як перевірити, чи форма програмно дійсна, використовуючи плагін перевірки jQuery


93

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


2
Для тих , хто хоче використовувати HTML5 і ванільне JS (НЕ JQuery): stackoverflow.com/questions/12470622 / ...
2540625

Відповіді:


142

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

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

Перевіряє, чи є вибрана форма дійсною чи всі вибрані елементи є дійсними. validate () потрібно викликати у формі, перш ніж перевіряти її за допомогою цього методу.

Де форма з id='form_id'- це форма, яка вже .validate()зверталася до неї.


Дякую, я вже робив щось на зразок: $ j ("# myform label.error"). Each (function (i, e) {if ($ j (e) .css ('display')! = 'None' ) {obstaErrors = true;}}); : S Спасибі
Jaime Hablutzel

@jaime: Немає проблем, радий допомогти:)
Ендрю Уітакер

Насправді не потрібно спочатку запускати .validate () у формі. Ви можете просто зробити if (form.valid ()) {}, і це буде працювати, де 'form' - це елемент форми, на який ви націлюєтесь.
Gareth Daine

11
Помилка типу: $ ("# myForm"). Valid () не є функцією.
artgrohe

2
Якщо ви отримуєте TypeError valid() not a functionдоданий плагін до свого файлу, оскільки його плагін не входить до бібліотеки jquery, наприклад. <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
StackEdd

33

Відповідь 2015 року: у сучасних браузерах це нестандартно, просто використовуйте API перевірки HTML5 CheckValidity від jQuery. Я також зробив jquery-html5-validity module для цього:

npm install jquery-html5-validity

Тоді:

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

тоді ви можете запустити:

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

true

1
ми можемо назвати це у цілому вигляді, а не на кожному елементі?
parisssss

1
Чудово! саме те, що я шукав
Фестер,

Я віддаю перевагу цій функції, а не validфункції, оскільки вона не викликає validateфункцію та не перевіряє вашу форму.
KevinAdu

@parisssss Зробив модуль, який робить це за кількома варіантами відповідно до запиту.
mikemaccana

19

Відповідь @mikemaccana корисна.

І я також використовував https://github.com/ryanseddon/H5F . Знайдено на http://microjs.com . Це якийсь поліфіл, і ви можете використовувати його наступним чином (jQuery використовується в прикладі):

if ( $('form')[0].checkValidity() ) {
    // the form is valid
}

цей кращий, оскільки він не викликає перевірки форми
Бішой Ганна

Робота з атрибутом шаблону. Дякую.
MJ Vakili


4

iContribute: Ніколи не пізно для правильної відповіді.

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

Таким чином, основна перевірка HTML5 для полів "обов'язкових" відбувається без втручання у стандартне надсилання за допомогою значень форми "name".


Зауважте, що :inputі :visibleселектори є розширеннями jQuery і не є частиною CSS. Детальніше див. У документах
Geradlus_RU

3
Форма також може бути недійсною через відповідність шаблону і не тільки через відсутність обов’язкових полів
відверто

4

Для групи входів ви можете використовувати вдосконалену версію, засновану на відповіді @ 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;
            }
        });
    });
});

Сподіваюся, це може вам допомогти!

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.