Начальная загрузка с плагином проверки jQuery


154

Я пытаюсь добавить проверку в мою форму с помощью jQuery Validation Plugin, но у меня возникла проблема, когда плагин помещает сообщения об ошибках, когда я использую группы ввода.

эта проблема

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    }
});

Мой код: http://jsfiddle.net/hTPY7/4/


Унаследовал приложение с Bootstrap 3, посмеялся над тем, что я нашел это, и добавил его в закладки несколько лет назад, когда в последний раз унаследовал приложение с Bootstrap 3.
Адриан Дж. Морено

Ответы:


347

для полной совместимости с Twitter начальной загрузки 3 мне нужно переопределить некоторые методы плагинов:

// override jquery validate plugin defaults
$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

Смотрите пример: http://jsfiddle.net/mapb_1990/hTPY7/7/


1
Замечательно, просто хотел упомянуть добавить $ (element) .removeClass (errorClass); отменить выделение и $ (element) .addClass (errorClass); выделить, если вы хотите, чтобы успех не использовал класс блока помощи начальной загрузки
Jay Rizzi

3
Это работает хорошо, за исключением одного: тестирование на jQuery Validate 1.11.1 и вызов resetForm()валидатора формы не будут вызывать unhighlightнедопустимые элементы, что делает необходимым удаление has-errorкласса вручную при сбросе формы. Что я делаю, это вызываю следующую функцию вместо resetForm()прямого вызова валидатора :function resetForm(form_id) { $(form_id).find(".form-group").removeClass("has-error"); $(form_id).data('validator').resetForm(); }
Адриан Лопес

Я не знаю, почему код не работает в моей форме :(
Алисса Рейес

Боже, это работает как шарм! Большое спасибо !!! Вы спасли меня потенциально час или два исследования.
racl101

1
Если у вас есть переключатели, как предлагает Bootstrap (радиовходы, размещенные внутри тегов меток), вы захотите добавить что-то вроде этого в блок if:else if (element.prop('type') === 'radio') { error.insertBefore(element.parent().parent()); }
Elliot Cameron

86

Для полной совместимости с Bootstrap 3 я добавил поддержку input-group , radio и checkbox , чего не было в других решениях.

Обновление 20/20/2017 : проверены предложения других ответов и добавлена ​​дополнительная поддержка специальной разметки встроенного радио , улучшено размещение ошибок для группы радиостанций или флажков и добавлена ​​поддержка пользовательского класса .novalidation для предотвращения проверки элементов управления. Надеюсь, что это помогает и спасибо за предложения.

После включения плагина проверки добавьте следующий вызов:

$.validator.setDefaults({
    errorElement: "span",
    errorClass: "help-block",
    highlight: function (element, errorClass, validClass) {
        // Only validation controls
        if (!$(element).hasClass('novalidation')) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        // Only validation controls
        if (!$(element).hasClass('novalidation')) {
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        }
    },
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        }
        else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) {
            error.insertAfter(element.parent().parent());
        }
        else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
            error.appendTo(element.parent().parent());
        }
        else {
            error.insertAfter(element);
        }
    }
});

Это работает для всех классов форм Bootstrap 3. Если вы используете горизонтальную форму, вы должны использовать следующую разметку. Это гарантирует, что текст блока помощи учитывает состояния проверки ("has-error", ...) группы форм .

<div class="form-group">
    <div class="col-lg-12">
        <div class="checkbox">
            <label id="LabelConfirm" for="CheckBoxConfirm">
                <input type="checkbox" name="CheckBoxConfirm" id="CheckBoxConfirm" required="required" />
                I have read all the information 
            </label>
        </div>
    </div>
</div>

1
Я подправил errorClass: "help-block error-help-block". Я уже использовал .help-block для регулярной справочной информации, и это переписывало его сообщениями проверки формы. Добавление второго класса сделало его уникальным, и теперь он добавляет, а не перезаписывает мое «настоящее» справочное сообщение.
Скотт Стаффорд

Hilight метод не называется
Владо Панджич

Здравствуйте, Владо, не могли бы вы дать больше информации, почему у вас это не работает?
Андреас Крон

Для группы переключателей это добавит сообщение об ошибке под первой опцией, которая выглядит странно. Вы, вероятно, хотите изменить это, чтобы относиться к переключателям по-разному.
Эллиот Камерон

Большое спасибо, мистер @AndreasKrohn ^ _ ^
Джанкарло Фонтальво

23

Я использую формы, разработанные только с помощью Twitter Bootstrap 3. Я устанавливаю функции по умолчанию для валидатора и запускаю только метод валидации с правилами. Я использую иконки из FontAweSome, но вы можете использовать Glyphicons, как в примере с документом.

введите описание изображения здесь

jQuery.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 has-feedback').addClass('has-error has-feedback');
            $(element).closest('.form-group').find('i.fa').remove();
            $(element).closest('.form-group').append('<i class="fa fa-exclamation fa-lg form-control-feedback"></i>');
        }
    },
    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('i.fa').remove();
            $(element).closest('.form-group').append('<i class="fa fa-check fa-lg form-control-feedback"></i>');
        }
    }
});

Готово. После запуска проверьте функцию:

$("#default-register-user").validate({
    rules: {
        'login': {
            required: true,
            minlength: 5,
            maxlength: 20
        },
        'email': {
            required: true,
            email: true,
            minlength: 5,
            maxlength: 100
        },
        'password': {
            required: true,
            minlength: 6,
            maxlength: 25
        },
        'confirmpassword': {
            required: true,
            minlength: 5,
            maxlength: 25,
            equalTo: "#password"
        }
    }
});

Пример JSFiddle


1
Было бы здорово иметь для этого
JSFiddle

Не могли бы вы опубликовать HTML, который вы использовали для скриншота, пожалуйста? В примере с скрипкой нет ни красного сообщения об ошибке, ни значков. Спасибо!
Кристофер Франциско

Кристофер Франциско, я обновил пример JSFiddle и добавил шрифт.
DARK_DIESEL

Привет отличное решение! Как бы вы отредактировали это так, чтобы только те поля, которые имеют правила, отображали сообщения об успехе или сбое? Право, ваш код заставляет все поля отображать CSS, независимо от того, есть правила или нет
Майкл Смит,

Решение состоит в том, чтобы добавить: 'ignore: ".ignore,: hidden"' прямо над правилами. Затем просто добавьте класс «ignore» во все поля, которые вы не хотите проверять
Майкл Смит

10

Добавив ответ Мигеля Борхеса выше, вы можете дать пользователю зеленый отзыв об успехе, добавив следующую строку в блок кода выделения / выделения.

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

8

это решение, которое вам нужно, вы можете использовать errorPlacementметод, чтобы переопределить, куда поместить сообщение об ошибке

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    errorPlacement: function(error, element) {
        error.insertAfter('.form-group'); //So i putted it after the .form-group so it will not include to your append/prepend group.
    }, 
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    }
});

это работает для меня как магия. ура


error.insertAfter('.form-group');положить ошибки во все .form-группу. но это показало мне идею. спасибо
Мигель Борхес

5

для начальной загрузки 4 это работа со мной хорошо

    $.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').find(".form-control:first").addClass('is-invalid');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').find(".form-control:first").removeClass('is-invalid');
        $(element).closest('.form-group').find(".form-control:first").addClass('is-valid');

    },
    errorElement: 'span',
    errorClass: 'invalid-feedback',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

надеюсь, это поможет!


Это работает из коробки очень хорошо! Единственное, что я добавил, былоvalidClass: 'valid-feedback'
Саймон Зикс

Спасибо, это сработало для меня в Bootstrap 4 с validClass: 'valid-feedback'.
Заки Мохаммед

4

Вот что я использую при добавлении проверки в форму:

// Adding validation to form.
        $(form).validate({
            rules: {
                title: {
                    required: true,
                    minlength: 3,
                },
                server: {
                    ipAddress: true,
                    required: true
                }   
            },
            highlight: function(element) {
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },
            success: function(element) {
                $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
            },
            errorClass: 'help-block'
        });

Это сработало для меня в стиле Bootstrap 3 при использовании библиотеки проверки jquery.


3

Я использовал это для радио:

    if (element.prop("type") === "checkbox" || element.prop("type") === "radio") {
        error.appendTo(element.parent().parent());
    }
    else if (element.parent(".input-group").length) {
        error.insertAfter(element.parent());
    }
    else {
        error.insertAfter(element);
    }

таким образом, ошибка отображается под последней опцией радио.


Блестяще простой ответ, спасибо - просто вставил предложение о дополнительном типе в мою существующую логику errorPlacement
theotherdy

3

Я знаю, что этот вопрос относится к Bootstrap 3, но поскольку некоторые связанные с Bootstrap 4 вопросы перенаправляются на этот вопрос в виде дубликатов, вот совместимый с Bootstrap 4 фрагмент:

$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-danger');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-danger');
    },
    errorElement: 'small',
    errorClass: 'form-control-feedback d-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else if(element.prop('type') === 'checkbox') {
            error.appendTo(element.parent().parent().parent());
        } else if(element.prop('type') === 'radio') {
            error.appendTo(element.parent().parent().parent());
        } else {
            error.insertAfter(element);
        }
    },
});

Несколько различий:

  • Использование класса has-dangerвместоhas-error
  • Лучшее позиционирование ошибок радио и флажки

Bootstrap 4 больше не имеет .has-*классов. getbootstrap.com/docs/4.3/migration/#forms-1
Фред

2

В бета-версии bootstrap 4 произошли большие изменения между альфа- и бета-версиями bootstrap (а также bootstrap 3), особенно. в отношении проверки формы.

Во-первых, чтобы правильно разместить значки, вам нужно добавить стили, которые соответствуют тому, что было в bootstrap 3, а не в бета-версии bootstrap 4 ... вот что я использую

.fa.valid-feedback,
.fa.invalid-feedback {
    position: absolute;
    right: 25px;
    margin-top: -50px;
    z-index: 2;
    display: block;
    pointer-events: none;
}

.fa.valid-feedback {
    margin-top: -28px;
}

Классы также изменились, поскольку бета-версия использует «состояние» элемента управления, а не классы, которые не отражен в размещенном вами коде, поэтому приведенный выше код может не работать. В любом случае, вам нужно будет добавить класс «was-validated» в форму при выполнении обратных вызовов highlight или unhighlight.

$(element).closest('form').addClass('was-validated');

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

errorElement: 'small',
errorClass: 'form-text invalid-feedback',

1

Это составляет поля

 $("#form_questionario").validate({
                debug: false,
                errorElement: "span",
                errorClass: "help-block",
                highlight: function (element, errorClass, validClass) {
                    $(element).closest('.form-group').addClass('has-error');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).closest('.form-group').removeClass('has-error');
                },
                errorPlacement: function (error, element) {
                    if (element.parent('.input-group').length || element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
                        error.insertBefore(element.parent());
                    } else {
                        error.insertAfter(element);
                    }
                },
                // Specify the validation rules
                rules: {
                        'campo1[]': 'required',
                        'campo2[]': 'required',
                        'campo3[]': 'required',
                        'campo4[]': 'required',
                        'campo5[]': 'required'
                        },

                submitHandler: function (form) {
                    form.submit();
                }
            });

1

добавить исправление встроенного радио в этот https://stackoverflow.com/a/18754780/966181

$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else if (element.parent('.radio-inline').length) {
            error.insertAfter(element.parent().parent());
        } else {
            error.insertAfter(element);
        }
    }
});

Это просто, очень полезно. Спасибо.
Chofoteddy

0

Ответ DARK_DIESEL отлично сработал для меня; Вот код для тех, кто хочет эквивалент с использованием глифов:

jQuery.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 has-feedback').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>');
        }
    }
});

0

Попробуйте использовать этот пример кода. Использование плагина проверки Jquery и дополнительных методов. Это рабочий код для моего проекта. Надеюсь, это поможет вам

//jquery validation booking page
	
	// Wait for the DOM to be ready
$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("form[name='book']").validate({
	  //on key up validation
	  onkeyup: function(element) {
      $(element).valid(); 
    },  
    // Specify validation rules
    rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      fname: {
        required: true,
        lettersonly: true
        },
      lname:{
        required: true,
        lettersonly: true
        },
      email: {
        required: true,
        // Specify that email should be validated
        // by the built-in "email" rule
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
    // Specify validation error messages
    messages: {
      fname: {
      required:"Please enter your firstname",
      lettersonly:"Letters allowed only"
      },
      lname: {
      required:"Please enter your lastname",
      lettersonly:"Letters allowed only"
      },
      email: "Please enter a valid email address"
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });
});
.error {
  color: red;
  margin-left: 5px;
  font-size:15px;
}
<script src="design/bootstrap-3.3.7-dist/js/jquery.validate.js"></script>
<script src="design/bootstrap-3.3.7-dist/js/additional-methods.js"></script>

<form name="book" id="book" action="" method="post">

    <div class="row form-group">
        <div class="col-md-6 ">
            <label class="" for="fname">First Name</label>
            <input type="text" name="fname" id="fname" class="form-control" placeholder="First Name">
        </div>
        <div class="col-md-6">
            <label class="" for="lname">Last Name</label>
            <input type="text" name="lname" id="lname" class="form-control" placeholder="Last Name">
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-6 ">
            <label class="" for="date">Date</label>
            <input type="text" id="date" class="form-control datepicker px-2" placeholder="Date of visit">
        </div>
        <div class="col-md-6">
            <label class="" for="email">Email</label>
            <input type="email" name="email" id="email" class="form-control" placeholder="Email">
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-12">
            <label class="" for="treatment">Service You Want</label>
            <select name="treatment" id="treatment" class="form-control">
                <option value="">Hair Cut</option>
                <option value="">Hair Coloring</option>
                <option value="">Perms and Curls</option>
                <option value="">Hair Conditioning</option>
                <option value="">Manicure</option>
                <option value="">Pedicure</option>
                <option value="">Nails Extension</option>
                <option value="">Nail Design</option>
                <option value="">Waxing Eyebrows</option>
                <option value="">Waxing Hands/Legs</option>
                <option value="">Full Face Waxing</option>
                <option value="">Full Body/Body Parts Wax</option>
            </select>
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-12">
            <label class="" for="note">Notes</label>
            <textarea name="note" id="note" cols="30" rows="5" class="form-control" placeholder="Write your notes or questions here..."></textarea>
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-12">
            <center><input type="submit" value="Book Now" class="btn btn-primary btn-lg"></center>
        </div>
    </div>

</form>


-1

Другой вариант - заранее поместить контейнер ошибок за пределы вашей группы форм. Затем валидатор будет использовать его при необходимости.

<div class="form-group">
  <label class="control-label" for="new-task-due-date">When is the task due?</label>
  <div class="input-group date datepicker">
    <input type="text" id="new-task-due-date" class="required form-control date" name="dueDate" />
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>                          
  </div>
  <label for="new-task-due-date" class="has-error control-label" style="display: none;"></label>
</div>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.