0

jQuery プラグインを使用して検証を行う方法を示す本をたくさん持っていますが、私が取り組んでいるプロジェクトでは、型にはまらないアプローチが必要です。

以下のサンプル コードでは、各エラー メッセージ ホルダーに ID を追加しました。これは、各メッセージを個別に呼び出したいためです。特定のアイテムでエラーが発生した場合は、タグを削除し、 (可能であれば) Leave イベントでタグを呼び出して、メッセージ全体を非表示にする必要があります。

例として、次の jQuery を作成しました。したがって、検証プラグインを使用してエラー メッセージを生成する代わりに、 show show the message on leave eventを実行するだけで済みます。

説明のために:

<script type="text/javascript">
$(document).ready(function(){
  $('#signup').validate({
    rules: {
      txtUserName: {
        required: true,
        txtUserName: true
      }
    }, 
    messages: {
      txtUserName: {
        required: "Please supply your e-mail address.",
        txtUserName: "This is not a valid e-mail address."
      }
    } 
  });
});
</script>

これは基本的なフォームの例です:

<form action="/" method="post" id="signup">
  <ul>
    <li>
      <p id="flgUserName">Hide on page load but show on error</p>
      <input name="txtUserName" id="txtUserName" type="text" class="required">
      <label for="txtUserName">Username:</label>
    </li>

    <li>
      <p id="flgEmail">Hide on page load but show on error</p>
      <input name="txtEmail" id="txtEmail" type="text" class="required">
      <label for="txtEmail">E-mail:</label>
    </li>

    <li>
      <input type="submit" name="submit" value="Submit">
    </li>
  </ul>
</form>
4

1 に答える 1

0

jquery を使用.blur()して、フォーム入力要素がいつフォーカスを失ったかを把握できます。

そこから、フォーム入力要素が有効かどうかを確認できますformInputElement.validity.valid == true。requiredこれは、各フォーム入力要素にhtml5 の属性を追加した場合にのみ機能します。

コードの例:

$('form input').blur(function() {
    if(!this.validity.valid) {
        $(this).prev().show();
    } else {
        $(this).prev().hide();
    }
});

typeまた、正しく検証されるように、入力要素の属性を変更することもできます。ここに入力要素の新しいタイプのリストがあります:

http://www.w3schools.com/html/html5_form_input_types.asp

于 2013-06-14T07:20:35.140 に答える