jQuery Validate pluginjQuery Validating Pluginの使い方


備考

このセクションでは、jquery-validateの概要と、なぜ開発者がそれを使用するのかについて概要を説明します。

また、jquery-validate内の大きな件名についても言及し、関連トピックにリンクする必要があります。 jquery-validateのドキュメントは新しくなっているので、これらの関連トピックの初期バージョンを作成する必要があります。

インストールまたはセットアップ

CDNから、またはjQueryを組み込んだ後にローカルからプラグインを組み込みます。次に、プラグインを初期化するためにフォームに.validate() メソッドをアタッチします。この方法では、ルール、カスタムメッセージ、およびその他のオプションを定義することができます。

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>
<script>
    $(document).ready(function() {  // <-- ensure form's HTML is ready
    
        $("#myform").validate({  // <-- initialize plugin on the form.
            // your rules and other options,
            rules: {
                first_name: {  // <-- this is the name attribute, NOT id
                    required: true
                },
                last_name: {
                    required: true
                },
                phone: {
                    required: true,
                    digits: true
                }
            }
        });
    
    });
</script>
 

検証のために考慮されるすべての入力には、一意のname 属性が含まれている必要がありこれはプラグインが入力を追跡する方法です。対応するHTMLマークアップ:

<form id="myform">
    <input type="text" name="first_name" /><br/>
    <input type="text" name="last_name" /><br/>
    <input type="text" name="phone" /><br/>
    <input type="submit" />
</form>