[Jquery] Validation
フォームの入力体験を向上するため、
フォームのバリデーションを Jquery Validation
を使って正しい入力へ誘導します。
URL
こちらが本家サイトになります。
jQuery Validation Plugin | Form validation with jQuery
ドキュメントはこちらから
利用方法
Hotlink
今回はこちらを使います。
https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js
パッケージ経由
パッケージマネージャー経由で利用する人は下記を参照してください。
Nuget
https://www.nuget.org/packages/jquery.validation
Npm
https://www.npmjs.com/package/jquery-validation
メソッド
jquery.validate.jsには3つのメソッドがあります。
validate()
指定したフォームを`validate"します。
valid()
指定したフォームまたはエレメントをvalidate
します。
rules()
指定したエレメントに対してrule
を読み込み、追加、削除
カスタムセレクター
3つのセレクターが用意されています
:blank
入力されてないエレメントを選択します
:filled
入力済みのエレメントを選択します
:unchecked
チェックされていないエレメントを選択します
Build-inされているValidation メソッド
- required
- remote
- minlength
- maxlength
- rangelength
- min
- max
- range
- step
- email
- url
- date
- dateISO
- number
- digits
- equalTo
サンプル1
本家にあるサンプルは下記
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
<script>
$("#commentForm").validate();
</script>
Ruleを作る
基本的な使い方はRuleを作っていきます。各Ruleに沿ってValidateしていきます。
例
$("#myform").validate({
rules: {
// simple rule, converted to {required:true}
name: "required",
// compound rule
email: {
required: true,
email: true
}
}
});
上のサンプルではrules
の名前を required
とし、email
というフィールド名をもつフィールドに対してrequired
(必須)であること、メールタイプであることをrule
としています。
次
サーバーサイドでのチェック、エラーメッセージの表示場所の指定などをカバー
Author And Source
この問題について([Jquery] Validation), 我々は、より多くの情報をここで見つけました https://qiita.com/syantien/items/8928eb8aa7276c23e733著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .