jQueryでのValidationの使い方を紹介！Validationを正しく使いこなそう！

Javascript
jQuery
プログラミング言語

公開日時: 2021-03-16 　更新日時: 2022-06-06

jQueryでのValidationの使い方を紹介！Validationを正しく使いこなそう！

この記事でわかること

システム エンジニア: validationメソッドとはなんでしょうか？

プロジェクト マネージャー: このメソッドは、プログラマーが意図した通りにユーザーが入力したかを検証することができるメソッドです。

jQueryでのValidationの使い方を紹介します

今回は、jQueryでのValidationの使い方について説明します。

Validationとは、ユーザが正しく値を入力したかチェックする機能です。例えば、必須項目を入力しているか、メールアドレスの形式で入力しているか、数字で入力しているか、10文字以内で入力しているか、など、様々あります。これらをjQueryで実現できます。

jQueryでのValidationの使い方に興味のある方はぜひご覧ください。

Validationの使い方

Validationを使えるようにするには、jQuery Validationプラグインを利用します。ダウンロードする方法と、ダウンロードせずにcdnを使う方法があります。ここではcdnを使う方法で紹介します。

バージョンがありますので、最新のものを使うようにするとよいでしょう。

ルールの記述方法

Validationのルール記載方法を紹介します。

jQueryで以下のように記述します。

$("form・formのid・formのclassを指定").validate({
  rules : {
    部品の名前: {
      required: true // ここにルールを記述する
     }
  }
});

$("form・formのid・formのclassを指定").validate({

rules : {

部品の名前: {

required: true // ここにルールを記述する

}

});

ルールは複数記述することもできます。代表的なルールとしては、以下があります。
・required : true/false 必須項目
・email : true/false Emailのフォーマットになっているか
・equalTo : “要素名” 要素の値と一致しているか
・number : true/false 数字になっているか
・birth : true/false 日付形式になっているか
・minlength : 数字最小文字列長を指定
・maxlength : 数字最長文字列長を指定

上記のいくつかについて、詳細を以降の章で紹介します。

required

Validationのrequiredルールの使い方について紹介します。値が入力されているか否かをチェックします。

HTMLを以下に記載します。

<form action="" method="post" id="form">
  <!-- 名前 -->
  <p class="is-error-name"></p>
  name : <input type="text" name="name"> 

  <!-- ラジオボタン -->
  <p class="is-error-gender"></p>gender : 
  <input type="radio" name="gender" value="male">male
  <input type="radio" name="gender" value="female">female

  <!-- セレクトボックス -->
  <p class="is-error-select"></p>select : 
  <select name="select" id="select_id">
      <option value="item1">item1</option>
      <option value="item2">item2</option>
      <option value="item3">item3</option>
  </select><br>

  <input type="submit">
</form>

name : <input type="text" name="name">

<p class="is-error-gender"></p>gender :

<input type="radio" name="gender" value="male">male

<input type="radio" name="gender" value="female">female

<p class="is-error-select"></p>select :

</select><br>

</form>

jQueryは以下のように記述します。

$('#form').validate({
    // Validationルール
    rules: {
        name: {
          required: true, 
        },
        gender: {
          required: true, 
        },
        select: {
          required: true, 
        },
    },
 
    // エラーメッセージ
    messages: {
        name: {
            required: '名前を入力してください',
        },
        gender: {
            required: '性別を選択してください',
        },
        select: {
            required: 'セレクトを選択してください',
        },
    },
 
    // エラーメッセージ出力箇所
    errorPlacement: function(error, element){
        var name = element.attr('name');
        error.appendTo($('.is-error-'+name));
    },
 
    errorElement: "span",
    errorClass: "is-error",
});

// selectボックスを未選択にする
var obj = document.getElementById("select_id");
obj.selectedIndex = -1;

$('#form').validate({

// Validationルール

rules: {

name: {

required: true,

gender: {

required: true,

select: {

required: true,

// エラーメッセージ

messages: {

name: {

required: '名前を入力してください',

gender: {

required: '性別を選択してください',

select: {

required: 'セレクトを選択してください',

// エラーメッセージ出力箇所

errorPlacement: function(error, element){

var name = element.attr('name');

error.appendTo($('.is-error-'+name));

errorElement: "span",

errorClass: "is-error",

});

// selectボックスを未選択にする

var obj = document.getElementById("select_id");

obj.selectedIndex = -1;

実行結果は以下のようになります。

See the Pen
jquery_validate2 by kskumd (@kskumd)
on CodePen.

email/equalTo

Validationのemail/equalToルールの使い方について紹介します。emailは、値がメール形式になっているか、equalToは指定要素と値が等しいかをチェックします。

HTMLを以下に記載します。

<form action="" method="post" id="form">
  <!-- mail -->
  <p class="is-error-email"></p>
  メールアドレス : <input type="mail" name="email"> 

  <p class="is-error-reemail"></p>
  確認用メールアドレス : <input type="mail" name="reemail"> 

  <br>
  <input type="submit">
</form>

メールアドレス : <input type="mail" name="email">

確認用メールアドレス : <input type="mail" name="reemail">

<br>

</form>

jQueryは以下のように記述します。

$(function(){
  $('#form').validate({
    // バリデーションルール
    rules: {
        email: {
          required: true, 
          email: true,
        },
        reemail: {
          required: true, 
          email: true,
          equalTo: '[name=email]',
        },
    },
 
    // エラーメッセージ
    messages: {
        email: {
            required: 'メールアドレスを入力してください',
            email: 'メールアドレスの形式で入力してください',
        },
        reemail: {
            required: '確認用メールアドレスを入力してください',
            email: 'メールアドレスの形式で入力してください',
            equalTo: 'メールアドレスと同じアドレスを入力してください',
        },
    },
 
    // エラーメッセージ出力箇所
    errorPlacement: function(error, element){
        var name = element.attr('name');
        error.appendTo($('.is-error-'+name));
    },
 
    errorElement: "span",
    errorClass: "is-error",
});
});

$(function(){

$('#form').validate({

// バリデーションルール

rules: {

email: {

required: true,

email: true,

reemail: {

required: true,

email: true,

equalTo: '[name=email]',

// エラーメッセージ

messages: {

email: {

required: 'メールアドレスを入力してください',

email: 'メールアドレスの形式で入力してください',

reemail: {

required: '確認用メールアドレスを入力してください',

email: 'メールアドレスの形式で入力してください',

equalTo: 'メールアドレスと同じアドレスを入力してください',

// エラーメッセージ出力箇所

errorPlacement: function(error, element){

var name = element.attr('name');

error.appendTo($('.is-error-'+name));

errorElement: "span",

errorClass: "is-error",

});

実行結果は以下のようになります。

See the Pen
jquery_validate3 by kskumd (@kskumd)
on CodePen.

number

Validationのnumberルールの使い方について紹介します。値が数字か否かをチェックします。

HTMLを以下に記載します。

<form action="" method="post" id="form">
  <!-- number -->
  <p class="is-error-number"></p>
  number : <input type="text" name="number"> 

  <br>
  <input type="submit">
</form>

number : <input type="text" name="number">

<br>

</form>

jQueryは以下のように記述します。

$('#form').validate({
    // Validationルール
    rules: {
        number: {
          required: true, 
          number : true,
        },
    },
 
    // エラーメッセージ
    messages: {
        number: {
            required: '必須入力項目です',
            number : 'ナンバーを入力してください',
        },
    },
 
    // エラーメッセージ出力箇所
    errorPlacement: function(error, element){
        var name = element.attr('name');
        error.appendTo($('.is-error-'+name));
    },
 
    errorElement: "span",
    errorClass: "is-error",
});

$('#form').validate({

// Validationルール

rules: {

number: {

required: true,

number : true,

// エラーメッセージ

messages: {

number: {

required: '必須入力項目です',

number : 'ナンバーを入力してください',

// エラーメッセージ出力箇所

errorPlacement: function(error, element){

var name = element.attr('name');

error.appendTo($('.is-error-'+name));

errorElement: "span",

errorClass: "is-error",

});

実行結果は以下のようになります。

See the Pen
jquery_validate4 by kskumd (@kskumd)
on CodePen.

システム エンジニア: フォーム要素によって実行されるメソッドなんですね。

プロジェクト マネージャー: エラー表示や独自ルールを作成することもできます。ここでは基本の記述方法を紹介しました。

まとめ

いかがでしたでしょうか。jQuery Validationプラグインを利用した、Validationの使い方について説明しました。ルールの記述方法について、ソースコードとともに紹介しました。

ぜひご自身でjQueryのソースコードを書いて、理解を深めてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

jQueryでのValidationの使い方を紹介！Validationを正しく使いこなそう！

jQueryでのValidationの使い方を紹介します

Validationの使い方

ルールの記述方法

required

email/equalTo

number

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

jQueryでのValidationの使い方を紹介！Validationを正しく使いこなそう！

jQueryでのValidationの使い方を紹介します

Validationの使い方

ルールの記述方法

required

email/equalTo

number

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

jQueryのparentメソッドとは？parentメソッドの使用方法を紹介

jQueryのdataの使い方を解説！dataメソッドは便利な機能をマスターしよう！

jQueryでのcheckboxのcheckedの扱い方を紹介！checkedを使いこなそう

jQueryを利用したsetTimeoutを紹介！setIntervalとは

jQueryのif文を基本から解説！文法をマスターしよう！