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

Question

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

147

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

$('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/

Miguel Borges 12 сен. 2013, в 03:10

Источник

Теги:

twitter-bootstrap

twitter-bootstrap-3

jquery-validate

14 ответов

81

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

Обновление 10/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. Если вы используете горизонтальную форму, вам нужно использовать следующую разметку. Это гарантирует, что текст help-block соответствует состояниям проверки ( "has-error",...) form-group.

<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>

Andreas Krohn 25 сен. 2013, в 14:42

1

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

Метод с подсветкой не вызывается
Vlado Pandžić 01 май 2016, в 21:53
0

Здравствуйте, Владо, не могли бы вы дать больше информации, почему у вас это не работает?
Andreas Krohn 03 май 2016, в 15:03
0

Для группы переключателей это добавит сообщение об ошибке под первой опцией, которая выглядит странно. Вы, вероятно, хотите настроить это, чтобы относиться к переключателям по-разному.
Elliot Cameron 22 окт. 2016, в 02:42
0

Большое спасибо, мистер @AndreasKrohn ^ _ ^
Jeancarlo Fontalvo 29 дек. 2016, в 03:50
0

Рад, что смог помочь :) @JeancarloFontalvo
Andreas Krohn 05 янв. 2017, в 14:42
0

Мне пришлось добавить width: 100%; на мой флажок, чтобы это работало, сообщение помещалось прямо рядом с ним
Bruno Peres 15 март 2017, в 00:06

Показать ещё 5 комментариев

22

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

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

DARK_DIESEL 18 июль 2014, в 14:49

1

Было бы здорово иметь JSFiddle для этого
kofifus 18 сен. 2014, в 01:07
2

Добро пожаловать jsfiddle.net/dark_diesel/gzmwtvh3
DARK_DIESEL 27 март 2015, в 14:38
0

Не могли бы вы опубликовать HTML, который вы использовали для скриншота, пожалуйста? В примере с скрипкой нет ни красного сообщения об ошибке, ни значков. Спасибо!
Christopher Francisco 02 сен. 2015, в 19:35
0

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

Привет отличное решение! Как бы вы изменили это так, чтобы только те поля, в которых есть правила, отображали сообщения об успехах или сбоях? Правильно, ваш код заставляет все поля отображать CSS, независимо от того, есть правила или нет
Michael Smith 28 сен. 2015, в 17:18
0

Решение состоит в том, чтобы добавить: 'ignore: ".ignore,: hidden"' прямо над правилами. Затем просто добавьте класс «ignore» во все поля, которые вы не хотите проверять
Michael Smith 13 окт. 2015, в 18:36
0

Проверка электронной почты не работает должным образом. Вы можете ввести что-то вроде asga @ da - да, без окончания домена, и оно принимается. Это связано с тем, что цель ввода 'email' указана в кавычках - их нужно пропустить - тогда она работает правильно.
Hexodus 13 фев. 2016, в 18:58

Показать ещё 5 комментариев

10

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

    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');
    }

Jose Apollo 20 янв. 2014, в 22:07

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');
    }
});

он работает для меня как магия. Приветствия

Drixson Oseña 12 сен. 2013, в 02:20

0

error.insertAfter('.form-group'); положить ошибки во все .form-группу. но это показало мне идею. благодарю вас
Miguel Borges 12 сен. 2013, в 03:21

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.

Edwin Perez 31 окт. 2013, в 19:23

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);
    }

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

Marcel Overdijk 31 май 2014, в 10:49

0

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

2

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

Во-первых, чтобы правильно разместить значки, вам нужно добавить стиль, который соответствует тому, что было в bootstrap 3 и больше не в бутстрапе 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;
}

Классы также изменились, так как бета использует "состояние" элемента управления, а не классы, которые ваш размещенный код не отражает, поэтому ваш вышеприведенный код может не работать. Во всяком случае, вам нужно добавить класс "проверено" в форму либо в результате успешных вызовов, либо с помощью подсветки/невысоких обратных вызовов

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

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

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

user2030404 20 нояб. 2017, в 23:50

1

Я знаю, что этот вопрос относится к 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
Лучшее расположение радиостанций и флажков с позиционированием ошибок

martpie 16 янв. 2017, в 17:48

1

добавьте исправление в строку https://stackoverflow.com/questions/18754020/bootstrap-with-jquery-validation-plugin

$.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);
        }
    }
});

bl4ckb1rd 15 июль 2015, в 14:29

0

Это просто, очень полезно. Спасибо.
Chofoteddy 02 дек. 2015, в 18:28

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();
                }
            });

gilcierweb 09 фев. 2015, в 18:46

0

Только на английском
ridermansb 09 фев. 2015, в 18:33

0

для начальной загрузки 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);
        }
    }
});

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

Jehad Ahmad Jaghoub 06 фев. 2019, в 03:49

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>');
        }
    }
});

jamshehan 07 янв. 2016, в 20:41

-2

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

<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>

Neve12ende12 08 сен. 2014, в 16:25

Ещё вопросы

Я подправил errorClass: "help-block error-help-block" . Я уже использовал .help-block для регулярной справочной информации, и это переписывало его сообщениями проверки формы. Добавление второго класса сделало его уникальным, и теперь он добавляет, а не перезаписывает мое «реальное» справочное сообщение.
Метод с подсветкой не вызывается
Здравствуйте, Владо, не могли бы вы дать больше информации, почему у вас это не работает?
Для группы переключателей это добавит сообщение об ошибке под первой опцией, которая выглядит странно. Вы, вероятно, хотите настроить это, чтобы относиться к переключателям по-разному.
Большое спасибо, мистер @AndreasKrohn ^ _ ^
Мне пришлось добавить width: 100%; на мой флажок, чтобы это работало, сообщение помещалось прямо рядом с ним
Было бы здорово иметь JSFiddle для этого
Добро пожаловать jsfiddle.net/dark_diesel/gzmwtvh3
Не могли бы вы опубликовать HTML, который вы использовали для скриншота, пожалуйста? В примере с скрипкой нет ни красного сообщения об ошибке, ни значков. Спасибо!
Кристофер Франциско, я обновил пример JSFiddle и добавил шрифт.
Привет отличное решение! Как бы вы изменили это так, чтобы только те поля, в которых есть правила, отображали сообщения об успехах или сбоях? Правильно, ваш код заставляет все поля отображать CSS, независимо от того, есть правила или нет
Решение состоит в том, чтобы добавить: 'ignore: ".ignore,: hidden"' прямо над правилами. Затем просто добавьте класс «ignore» во все поля, которые вы не хотите проверять
Проверка электронной почты не работает должным образом. Вы можете ввести что-то вроде asga @ da - да, без окончания домена, и оно принимается. Это связано с тем, что цель ввода 'email' указана в кавычках - их нужно пропустить - тогда она работает правильно.
error.insertAfter('.form-group'); положить ошибки во все .form-группу. но это показало мне идею. благодарю вас
Блестяще простой ответ, спасибо - просто вставил предложение дополнительного типа в мою существующую логику errorPlacement
Это просто, очень полезно. Спасибо.

Miguel Borges · Accepted Answer · 2013-09-12T03-25-00.000Z

352

Лучший ответ

для полной совместимости с twitter bootstrap 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/

Miguel Borges 12 сен. 2013, в 03:25

1

Хорошая работа, это работает для меня как шарм ...!
Pragnesh Karia 29 окт. 2013, в 15:20
1

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

Спасибо, именно то, что я искал ...
Stephen 21 янв. 2014, в 20:29
3

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

Это удивительный код!
dcolumbus 20 март 2014, в 21:39
0

Я не знаю, почему код не работает в моей форме :(
Alyssa Reyes 09 апр. 2014, в 14:44
0

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

Это фантастика. Спасибо!
Bryan Slatner 18 окт. 2014, в 20:07
0

Скрипка не работает
Vasanthan.R.P 21 март 2015, в 07:30
0

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

Показать ещё 8 комментариев