javascript - jQuery 验证方法(需要 : false) not working

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>

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

Answer 1

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

但是，您可以通过编程方式强制它在每次单击提交时使用 .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 没有意义；因为对表单的验证仍然是“惰性”的(其他字段将在 focusout 上被忽略，直到提交被点击)。选项 #2 只有在你 have your whole form setup to also implement "eager" style validation 时才有意义.