Question

我正在使用jQuery验证来验证我的表单字段。我有两个领域，名为＆＃34;评论＆＃34;和＆＃34;帐户名称＆＃34;。评论字段有一种验证方法，其中必需设置为 false 。帐户名称字段具有验证方法，其中必需设置为 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>

DEMO：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时才有意义。

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

1 个答案: