用户单击提交按钮时，不会突出显示有效元素

Question

我目前正在使用jQuery验证插件来验证我的表单字段。我设置了一个规则，其中用户名字段不需要，帐户名称字段必需且评论textarea 字段不是必需的。当用户点击“保存”按钮时，'有错误' class将突出显示无效元素。但是，'has-success'类没有突出显示textarea有效元素。为什么会这样？以下是我的问题，所需结果以及代码

的屏幕截图

错误图片，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>