jQuery验证方法（必需：false）不起作用

Question

我正在使用jQuery验证来验证我的表单字段。我有两个字段，名为“评论”和“帐户名称”。注释字段具有验证方法，其中required设置为false。帐户名称字段具有验证方法，其中required设置为true。当用户单击提交按钮而不在两个字段上输入任何值时，即使不需要此字段，注释字段也不会以绿色突出显示。为什么会这样？

$(document).ready(function () {
    $.validator.setDefaults({
        highlight: function (element, errorClass, validClass) {
            if (element.type === "radio") {
                this.findByName(element.name).addClass(errorClass).removeClass(validClass);
            } else {
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error has-feedback');
                $(element).closest('.form-group').find('span.glyphicon').remove();
                $(element).closest('.form-group').append('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');
            }
        },
        unhighlight: function (element, errorClass, validClass) {
            if (element.type === "radio") {
                this.findByName(element.name).removeClass(errorClass).addClass(validClass);
            } else {
                $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
                $(element).closest('.form-group').find('span.glyphicon').remove();
                $(element).closest('.form-group').append('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');
            }
        }
    });

    $('#dataForm').validate({
        rules: {                
            accountNameInput: {
                required: true
            },
            commentInput: {
                required: false
            }
        },
        submitHandler: function (form) {
            alert('success');
        }
    });
});

<form id="dataForm" method="post" action="#">

    <div class="form-group">
        <label class="control-label" for="commentInput">Comments</label>
        <textarea class="commentInput" id="commentInput" name="commentInput" rows="5"></textarea>
    </div>

    <div class="form-group">
        <label class="control-label" for="accountNameInput">Account name</label>
        <input type="text" id="accountNameInput" name="accountNameInput"
               placeholder="Account name" class="form-control font-bold" value="" />
    </div>
        <input type="submit" class="btn btn-primary" value="Save" id="saveButton" />

    </form>

但是：ぁzxswい

Answer 1

您的https://jsfiddle.net/Issaki1/gud7xjy0/字段不是“必需的”，因此只要该字段为空，该字段将被完全忽略以进行验证。

但是，只要单击提交，您就可以使用commentInput方法以编程方式强制它进行验证。

.valid()

工作演示：

$('#saveButton').on('click', function() {
    $('#commentInput').valid();  // <- force validation test on this field
});

或者，你也可以强制这个空字段来验证你jsfiddle.net/gud7xjy0/6/它...

focusout

工作演示2：

// force eager validation on this one field
$('#commentInput').on('focusout', function() {
    $(this).valid();  
});

但是，这个＃2的演示没有意义;因为表单的验证仍然是“懒惰的”（在点击提交之前，jsfiddle.net/gud7xjy0/9/将忽略其他字段）。选项＃2只有在你focusout时才有意义。