как программно проверить правильность формы с помощью плагина проверки jQuery

96

У меня есть форма с парой кнопок, и я использую плагин проверки jQuery из http://jquery.bassistance.de/validate/ . Я просто хочу знать, есть ли способ проверить, считается ли форма в допустимом состоянии плагином проверки jquery из любого места в моем коде javascript.

Хайме Хаблуцель
источник
2
Для тех, кто хочет использовать HTML5 и ванильный JS (без jQuery): stackoverflow.com/questions/12470622/…
2540625

Ответы:

145

Используйте .valid()из плагина проверки jQuery:

$("#form_id").valid();

Проверяет, действительна ли выбранная форма или все выбранные элементы действительны. validate () необходимо вызвать в форме, прежде чем проверять ее с помощью этого метода.

Где форма с id='form_id'- это форма, которая уже обратилась .validate()к ней.

Эндрю Уитакер
источник
Спасибо, я уже делал что-то вроде: $ j ("# myform label.error"). Each (function (i, e) {if ($ j (e) .css ('display')! = 'None' ) {existErrors = true;}}); : S Спасибо
Хайме Хаблутцель
@jaime: Нет проблем, рад помочь:)
Эндрю Уитакер
На самом деле нет необходимости сначала запускать .validate () в форме. Вы можете просто сделать if (form.valid ()) {}, и это сработает, где 'form' - это элемент формы, на который вы нацеливаетесь.
Гарет Дейн
13
TypeError: $ ("# myForm"). Valid () не является функцией.
artgrohe
4
Если вы получаете TypeError valid() not a functionдобавление плагина в свой файл, так как его плагин не включен в библиотеку jquery, например. <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
StackEdd
34

Ответ 2015 года: у нас есть это из коробки в современных браузерах, просто используйте HTML5 CheckValidity API из jQuery. Я также сделал для этого модуль jquery-html5-validity :

npm install jquery-html5-validity

Затем:

var $ = require('jquery')
require("jquery-html5-validity")($);

тогда вы можете запустить:

$('.some-class').isValid()

true
микемаккана
источник
1
можем ли мы вызвать его на всей форме, а не на каждом элементе?
Париж,
1
Большой! именно то, что я искал
Фестер
Я предпочитаю это, а не validфункцию, поскольку она не вызывает validateфункцию и не проверяет вашу форму.
KevinAdu
@parisssss Создал модуль, чтобы делать это при множественном выборе по запросу.
mikemaccana
24

Ответ @mikemaccana полезен.

И я также использовал https://github.com/ryanseddon/H5F . Найдено на http://microjs.com . Это своего рода полифилл, и вы можете использовать его следующим образом (в примере используется jQuery):

if ( $('form')[0].checkValidity() ) {
    // the form is valid
}
антонгородезский
источник
этот лучше, так как он не запускает проверку формы
Бишой Ханна
Работа с атрибутом паттерна. Спасибо.
MJ Vakili
5

iContribute: никогда не поздно дать правильный ответ.

var form = $("form#myForm");
if($('form#myForm > :input[required]:visible').val() != ""){
  form.submit();
}else{
  console.log("Required field missing.");
}

Таким образом, базовая проверка HTML5 для «обязательных» полей происходит без вмешательства в стандартную отправку с использованием значений «name» формы.

juan.benavides
источник
Обратите внимание, что :inputи :visibleселекторы JQuery расширения и не является частью CSS. Подробности в документации
Geradlus_RU
3
Форма также может быть недействительной из-за сопоставления с образцом, а не только из-за отсутствия обязательных полей
откровенно
5

Для группы входов вы можете использовать улучшенную версию, основанную на ответе @mikemaccana

$.fn.isValid = function(){
    var validate = true;
    this.each(function(){
        if(this.checkValidity()==false){
            validate = false;
        }
    });
};

теперь вы можете использовать это, чтобы проверить, действительна ли форма:

if(!$(".form-control").isValid){
    return;
}

Вы можете использовать ту же технику для получения всех сообщений об ошибках:

$.fn.getVelidationMessage = function(){
    var message = "";
    var name = "";
    this.each(function(){
        if(this.checkValidity()==false){
            name = ($( "label[for=" + this.id + "] ").html() || this.placeholder || this.name || this.id);
            message = message + name +":"+ (this.validationMessage || 'Invalid value.')+"\n<br>";
        }
    })
    return message;
}
Матиас Медина
источник
Я сделал плагин jQuery, чтобы делать .each () за вас.
mikemaccana
1

Для Magento вы проверяете валидацию формы, как показано ниже.

Вы можете попробовать это:

require(["jquery"], function ($) {
    $(document).ready(function () {
        $('#my-button-name').click(function () { // The button type should be "button" and not submit
            if ($('#form-name').valid()) {
                alert("Validation pass");
                return false;
            }else{
                alert("Validation failed");
                return false;
            }
        });
    });
});

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

Казим Ноорани
источник