Запуск завантажувача з плагіном для перевірки 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 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/


1
WOrks чудовий, просто хотів би згадати, щоб додати $ (element) .removeClass (errorClass); to unhighlight та $ (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(); }
Адріан Лопес

Я не знаю, чому код не працює на моїй формі :(
Alyssa Reyes

По-дівочому, це працює як шарм! Велике спасибі !!! Ви потенційно заощадили мене на годину-дві дослідження.
racl101

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

86

Для повної сумісності з Bootstrap 3 я додав підтримку групи вводу , радіо та прапорець , якої бракувало в інших рішеннях.

Оновлення 20.10.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 для регулярної довідкової інформації, і це було перезаписано її повідомленнями про перевірку форми. Додавання другого класу зробило його унікальним, і тепер він додає, а не перезаписує моє "реальне" довідкове повідомлення.
Скотт Стаффорд

Метод Хілігт не називається
Владо Панджич

Привіт Владо, чи могли б ви дати трохи більше інформації, чому це не працює для вас?
Андреас Крон

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

Дуже дякую Містер @AndreasKrohn ^ _ ^
Жанкарло Фонталво

23

Я використовую форми, розроблені тільки з Twitter Bootstrap 3. Я встановлюю функції за замовчуванням для validor і запускаю лише метод перевірки з правилами. Я використовую Ікони від 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


1
Було б чудово мати для цього
JSFiddle

Чи можете ви опублікувати HTML-код, який ви використовували для скріншоту? Приклад скрипки не має червоного стилю повідомлення про помилку, ані піктограми. Дякую!
Крістофер Франсіско

Крістофер Франсіско, я оновив приклад JSFiddle і додав шрифтовий дивовижний css.
DARK_DIESEL

Привіт, чудове рішення! Як би ви відредагували це, щоб лише ті поля, у яких є правила, відображали повідомлення про успіх чи помилку? Правильно ваш код змушує всі поля відображати css, незалежно від того, є правила чи ні
Майкл Сміт,

Рішення полягає в тому, щоб додати: 'ignore: ".ignore,: hidden"' прямо над правилами. Тоді просто додайте клас «ігнорувати» у всі поля, які ви не хочете перевірити
Майкл Сміт

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

Дякую, для мене це спрацювало у 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

Для завантажувальної версії 4 бета-версії були деякі великі зміни між альфа-та бета-версіями завантажувальної програми (а також завантажувальним пристроєм 3), esp. щодо перевірки форми.

По-перше, щоб правильно розмістити піктограми, вам потрібно буде додати стилізацію, яка прирівнюється до того, що було у завантажувальній службі 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;
}

Класи також змінилися, оскільки бета-версія використовує "стан" управління, а не класи, які розміщений вами код не відображає, тому ваш вищезгаданий код може не працювати. У будь-якому випадку вам потрібно буде додати клас "підтверджений" до форми або в успішному, або в підсвічуванні / не освітленому відкликанні

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