web-dev-qa-db-ja.com

jQuery検証プラグインを使用して、フォームがプログラムで有効かどうかを確認する方法

いくつかのボタンがあるフォームがあり、 http://jquery.bassistance.de/validate/ のjQuery Validationプラグインを使用しています。 javascriptコードのどこからでもjquery検証プラグインによってフォームが有効な状態にあるかどうかを確認できる方法があるかどうかを知りたいだけです。

javascriptjqueryjquery-validate
81
Jaime Hablutzel

.valid() を使用します。

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

選択したフォームが有効かどうか、または選択したすべての要素が有効かどうかを確認します。このメソッドを使用してチェックする前に、フォームでvalidate（）を呼び出す必要があります。

id='form_id'のあるフォームは、すでに.validate()が呼び出されているフォームです。

118
Andrew Whitaker

2015 answer：最新のブラウザではこれをそのまま使用できます。jQueryの HTML5 CheckValidity API を使用してください。また、これを行うために jquery-html5-validity module を作成しました。

npm install jquery-html5-validity

次に：

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

次に実行できます：

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

true
31
mikemaccana

@mikemaccanaの回答は便利です。

また、 https://github.com/ryanseddon/H5F も使用しました。 http://microjs.com にあります。それはある種のポリフィルであり、次のように使用できます（例ではjQueryが使用されます）。

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

valid（）メソッド。

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

5
ysrb

iContribute：正しい答えを出すのに遅すぎることはありません。

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

このようにして、「必須」フィールドの基本的なHTML5検証は、フォームの「名前」値を使用した標準送信を妨げることなく行われます。

4
juan.benavides

入力のグループについては、@ 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
Matias Medina

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