JavaScript + Ajax 実践サンプル集 - 入力データを検証する

入力データを検証する

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのvalidate()プラグインを利用してフォームに入力したデータを検証します。サンプルの[Submit]ボタンをクリックするとエラーメッセージが表示されます。「Name」には少なくとも２文字以上入力します。「E-Mail」にはメールアドレスを入力します。メールアドレスが不正のときはエラーを表示します。「URL」にはホームページのURLを入力します。URLが不正のときはエラーを表示します。

このサンプルを編集して試してみる

エラーメッセージをカスタマイズするには jquery.validate.message_jp.jsを書き換えてください。

$("#commentForm").validate();

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery - Form Validation </title>
  <link href="jQuery/validate/screen.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
    #commentForm
    {
      width: 500px;
    }
    #commentForm label
    {
      width: 250px;
    }
    #commentForm label.error, #commentForm input.submit
    {
      margin-left: 253px;
    }
  </style>

$(function() {

$("#commentForm").validate();

});
  </script>

</head>
<body>

<form class="cmxform" id="commentForm" method="post" 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" class="required" minlength="2" />
      </p>
      <p>
        <label for="cemail">
          E-Mail (required)</label>
        <input id="cemail" name="email" class="required email" />
      </p>
      <p>
        <label for="curl">
          URL (optional)</label>
        <input id="curl" name="url" class="url" value="" />
      </p>
      <p>
        <label for="ccomment">
          Your comment (required)</label>
        <textarea id="ccomment" name="comment" class="required"></textarea>
      </p>
      <p>
        <input class="submit" type="submit" value="Submit" />
      </p>
  </fieldset>
  </form>
  
</body>
</html>

外部スクリプトHEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
jquery.validate.messages_jp.js

/*
 * Translated default messages for the jQuery validation plugin.
 * Language: JP
 * Author: Akio Kasai
 */
jQuery.extend(jQuery.validator.messages, {
        required: "このフィールドは必須項目です",
		remote: "このフィールドを修正してください",
		email: "メールアドレスが不正です",
		url: "URLが不正です",
		date: "日付が不正です",
		dateISO: "日付が不正です (ISO).",
		number: "数値を入力してください",
		digits: "整数を入力してください",
		creditcard: "クレジットカードの番号を入力してください",
		equalTo: "同じデータ(値)を入力してください",
		accept: "拡張子付きのデータ(値)を入力してください",
		maxlength: jQuery.format(" {0} 以下の文字列を入力してください"),
		minlength: jQuery.format("すくなくとも {0} 以上のデータを入力してください"),
		rangelength: jQuery.format(" {0} ～ {1} の範囲で長さのデータを入力してください"),
		range: jQuery.format(" {0} ～ {1} の範囲で入力してください"),
		max: jQuery.format(" {0} と等しいか、それ以下のデータを入力してください"),
		min: jQuery.format(" {0} と等しいか、それ以上のデータを入力してください")
});

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
  <link href="jQuery/validate/screen.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
    #commentForm
    {
      width: 500px;
    }
    #commentForm label
    {
      width: 250px;
    }
    #commentForm label.error, #commentForm input.submit
    {
      margin-left: 253px;
    }
  </style>

  <script src="jQuery/validate/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/validate/jquery.validate.js" type="text/javascript"></script>
  <script src="jQuery/validate/jquery.validate.messages_jp.js" type="text/javascript"></script>
  <script src="jQuery/validate/cmxforms.js" type="text/javascript"></script>
  <script type="text/javascript">

    $(function() {

      $("#commentForm").validate();

    });
  </script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
  <form class="cmxform" id="commentForm" method="post" 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" class="required" minlength="2" />
      </p>
      <p>
        <label for="cemail">
          E-Mail (required)</label>
        <input id="cemail" name="email" class="required email" />
      </p>
      <p>
        <label for="curl">
          URL (optional)</label>
        <input id="curl" name="url" class="url" value="" />
      </p>
      <p>
        <label for="ccomment">
          Your comment (required)</label>
        <textarea id="ccomment" name="comment" class="required">

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

入力データを検証する

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

入力データを検証する

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!