验证自定义元框值和必填字段


16

我从未见过的东西是验证特定表格字段是否正确填写自定义帖子类型元框的最佳方法。

我正在寻求有关如何最好地验证可能创建的任何metabox的自定义字段的专家意见。我的兴趣是:

  • 确保在发布/更新帖子之前进行字段验证
  • 利用与其他wordpress javascript不冲突的类/代码
  • 允许您根据需要定义特定字段,而其他字段则可选
  • 根据可自定义的规则(包括正则表达式)验证字段,例如电子邮件格式
  • 控制任何错误/通知的视觉显示

提前致谢!

Answers:


21

最简单的方法是通过jQuery Validate插件添加Javascript验证。这是最基本的演练:

在您的add_meta_box调用附近,将jQuery Validate插件以及一个JS文件放入您的简单脚本中:

add_action('admin_enqueue_scripts', 'add_my_js');   
function add_my_js(){    
  wp_enqueue_script('my_validate', 'path/to/jquery.validate.min.js', array('jquery'));
  wp_enqueue_script('my_script_js', 'path/to/my_script.js');
}

然后在my_script.js中包括以下内容:

jQuery().ready(function() {
    jQuery("#post").validate();
});

这将启用对邮寄表格的验证。然后在定义自定义字段的add_meta_box回调中,为要验证的每个字段添加一个“必需”类,如下所示:

<input type="text" name="my_custom_text_field" class="required"/>

保存/发布/更新帖子时,将验证班级中所有具有“必填”字段的字段。可以在my_script.js中的document.ready函数中设置所有其他验证选项(规则,错误样式等);检查jQuery Validate文档中的所有选项。


谢谢,明天我会尝试一下,但是请您解释一下如何进行不同的验证。例如,验证一个正确的电子邮件地址,验证不超过或至少不超过XX个字符,是否填写了表单字段...诸如此类?
NetConstructor.com 2010年

此外,这是否可以在帖子保存/更新之前验证?如果没有,我该怎么办?
NetConstructor.com 2010年

jQuery Validation插件的示例和文档(在我的答案中链接)将向您展示如何完成所有这些操作。验证默认情况下在提交时进行,但是您可以在自定义字段的任何表单元素模糊或更改时触发它。
danblaker 2010年

我实现了此解决方案,它看起来非常有前途,尽管有一个问题,我应该在“ submitHandler”中添加什么?在使用jquery.validate进行验证之后,Wordpress不会执行任何操作(保存按钮会保持动画状态)。如何将婴儿送回WP?
mike23 2011年

2
如果您只想在必填字段为空(或其他验证失败)时将“发布”按钮恢复为正常状态,则无需对SubmitHandler进行任何操作。验证失败时,只需编辑validate()代码即可更改按钮。这有效:jQuery(“#post”)。validate({invalidHandler:function(){jQuery('#publish')。removeClass('button-primary-disabled'); jQuery('#ajax-loading')。css ('visibility','hidden');}});
danblaker 2011年

2

添加jQuery验证的完整基本代码:

  1. 使验证脚本入队。我认为jQuery已经入队。

    add_action('admin_enqueue_scripts',function($id){
        $validation',$validation_js_url = #your validation.js source;
        wp_register_script( 'validation',$validation_js_url,array(),'',true );
        wp_enqueue_script( 'validation' );
    });
  2. 在js文件或脚本标签中:

    jQuery(document).ready(function($){
        var form = $("form[name='post']");
        $(form).find("input[type='submit']").click(function(e){
            e.preventDefault();
            $(form).validate();
    
            if($(form).valid())
            {
                $("#ajax-loading").show();
                $(form).submit();
            }else{
                $("#publish").removeClass().addClass("button-primary");
                $("#ajax-loading").hide();
            }
        });
    });
  3. 完成:)


在服务器端呢?
NetConstructor.com 2012年

2

我使用了这段代码,非常有帮助,只需更改一下即可:

$(form).find("input[type='submit']").click(function(e){

至:

$(form).find("#publish").click(function(e){

因为如果您在主表单中还有其他表单,则会启动脚本。

和:

$(form).submit();

至:

$(this).submit();

因为第一行只会将帖子另存为草稿,您将无法再发布。

在这里写下所有内容:http : //allgraphics.it/blog/2012/10/jquery-validation-sui-campi-di-input-postcustom-post-di-wordpress/



By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.