jQuery 验证方法（必需：false）无效

Question

我正在使用 jQuery 验证来验证我的表单字段。我有两个字段，名为 "comment" 和 "account name"。评论字段有一个验证方法，其中 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>

演示：https://jsfiddle.net/Issaki1/gud7xjy0/

Answer 1

您的 commentInput 字段不是 "required"，因此只要留空，该字段将被完全忽略以进行验证。

但是，您可以通过编程强制它在每次单击提交时使用 .valid() 方法进行验证。

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

工作演示：jsfiddle.net/gud7xjy0/6/

您还可以选择在 focusout 时强制验证此空字段...

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

工作演示 2：jsfiddle.net/gud7xjy0/9/

然而，这个演示 #2 没有意义；因为表单的验证仍然是 "lazy"（其他字段将在 focusout 上被忽略，直到提交被点击 ）。选项 #2 仅在 have your whole form setup to also implement "eager" style validation.

时才有意义

jQuery 验证方法（必需：false）无效

jQuery validation method (required: false) not working

javascript

jquery

jquery-validate