javascript - 用户单击提交按钮时有效元素未突出显示

Question

我目前正在使用 jQuery 验证插件来验证我的表单字段。我设置了不需要用户名字段、需要帐户名称字段和不需要评论文本区域字段的规则。当用户单击“保存”按钮时，“有错误”类将突出显示无效元素。但是，'has-success'类没有突出显示 textarea 有效元素。为什么呢？这是我的问题的屏幕截图，所需的结果以及我的代码

错误图片，文本区域未突出显示

期望的结果

 $(document).ready(function () {
        $.validator.setDefaults({

            errorClass: 'help-block',


            highlight: function (element) {
                $(element)
                    .closest('.form-group')
                    .addClass('has-error');

            },

            unhighlight: function (element) {
                $(element)
                    .closest('.form-group')
                    .removeClass('has-error')
                    .addClass('has-success');
            }
        });

        $('#dataForm').validate({
            rules: {
                userNameInput: {
                    required: false
                },
                accountNameInput: {
                    required: true
                },
                commentInput: {
                    required: false
                }
            }
        });

    });

    $('#saveButton').on('click', function () {

        if ($('#dataForm').valid() == true) {

        }

        alert('nice');
    });

<form id="dataForm" method="post" action="#">
    <div class="form-group col-md-12">
        <label class="control-label col-md-4" for="accountNameInput">Account name</label>
        <input type="text" id="accountNameInput" name="accountNameInput" class="form-control font-bold"
               maxlength="100" placeholder="Account name" value="" />
    </div>

    <div class="form-group col-md-12">
        <label class="control-label  col-md-4" for="userNameInput">userName</label>
        <input type="text" id="userNameInput" name="userNameInput" class="form-control font-bold"
               maxlength="100" placeholder="userName" value="" />
    </div>

    <div class="form-group col-md-12">
        <label class="control-label col-md-4" for="commentInput">Comments</label>
        <textarea class="form-control" id="commentInput" rows="5"></textarea>
    </div>

    <input type="button" class="btn btn-primary" value="Save" id="saveButton" />

</form>

标签： javascripthtmltwitter-bootstrap-3jquery-validation-engine