Question

我遇到了jquery验证插件的问题，在这种情况下没有删除空白条目（允许）的错误类。我只对输入应用一个自定义规则，允许空输入。

作为一个例子......

我为输入输入了一些无效的内容，例如####和移动到下一个输入。
输入变为红色，错误信息显示在我的fname字段下方。
我返回并删除'####'。这样做时错误消息消失，但输入仍然保持红色。我可以进出场地，但仍然保持红色。
如果我在现在空白的字段中输入任何一个有效字符，只是输入为红色，红色消失。

所以，我想我的问题是为什么错误消息被正确删除但是输入的类没有被删除（用红色突出显示）？

我已经在firebug中验证了这一点...当我删除####时，没有从<div class="col-md-6 form-group">删除has-error类，但是如果我删除并输入一个有效字符。

HTML：

<div class="col-md-6 form-group">
    <label><b>First Name</b></label>
    <div class="input-group">
        <span class="input-group-addon">
            <i class="fa fa-user fa-fw"></i>
        </span>
        <input class="form-control" type="text" name="fname" <?php echo ($_SESSION['account']['fname'] ? 'data-default="true" value="'.$_SESSION['account']['fname'].'"' : 'placeholder="first name"'); ?>/>
    </div>
    <span class="help-block"></span>
</div>

JS：

    $('#account-info-form').validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        rules: {
            fname: {
                cname: true
            }
        },

        messages: {
            fname: {
                cname: "Enter a valid first name."
            }
        },

        highlight: function (element) { // hightlight error inputs
            $(element)
                .closest('.form-group').addClass('has-error'); // set error class to the control group
        },

        success: function (label) {
            label.closest('.form-group').removeClass('has-error');
            label.remove();
        },

        errorPlacement: function (error, element) {
            error.insertAfter(element.closest('.input-group'));
        }

    });

    // custom name (first or last) validation
    $.validator.addMethod("cname", function (value,element) {
        return this.optional(element) || /^[a-z][a-z .,\-]{0,31}$|^$/i.test(value);
    },"Please enter a valid name.");

    // return default values on blank and do not cause error (if valid)
    $('input[data-default="true"]').on('blur', function() {
        if ( $(this).val() == '' ) {
            $(this).val( this.defaultValue );
            $(this).valid();
        }
    });

Answer 1

我能够在文档中找到“unhighlight”，我想我之前已经跳过了。

unhighlight: function (element) { // un-hightlight error inputs
  $(element)
  .closest('.form-group').removeClass('has-error'); 
},

Answer 2

我认为您需要使用.length

$('input[data-default="true"]').on('blur', function() {
    if ( $(this).length==0) {
        $(this).val( this.defaultValue );
        $(this).valid();
    }
});

<强> EDITED

空字段应通过验证，并且仅检查填充的字段是否有效字符。

DEMO http://jsfiddle.net/HBfJB/

jquery验证插件不删除空白输入的错误类

2 个答案: