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

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

7 67
javascript jquery jquery-validate

7 ответов:

использовать .valid():

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

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

где форма с id='form_id' - это форма, которая уже имела .validate() призвал он.

94

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

npm install jquery-html5-validity

затем:

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

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

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

true
30

действующий() метод.

http://docs.jquery.com/Plugins/Validation/valid

3

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

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

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

для группы входов вы можете использовать улучшенную версию, основанную на ответе @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;
}
2

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

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

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

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

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

0