действительный элемент не выделяется, когда пользователь нажимает кнопку отправки - PullRequest
Новая
       24

действительный элемент не выделяется, когда пользователь нажимает кнопку отправки

0 голосов
/ 13 июня 2018

В настоящее время я использую плагин проверки jQuery для проверки полей формы.Я установил правило, в котором поле username равно , не обязательное , поле имя учетной записи , поле , обязательное и комментарии .поле textarea не обязательно. Когда пользователь нажимает кнопку «Сохранить», класс 'has-error' выделит недопустимый элемент.Однако класс has-success не выделил допустимый элемент textarea.Почему это так?Вот скриншот моей проблемы , желаемого результата, а также моих кодов

Изображение ошибки, текстовое поле не выделено Error picture, textarea not highlighted

Желаемый результат Desired result

 $(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>
...