0

HTML フォームの名前、部屋番号、電話番号のフィールドを検証する必要があります。それぞれのカスタム ルールを作成し、スクリプトで呼び出しました。しかし、入力が無効な場合、これらとデフォルトの jQuery ルールはエラーをスローしません。これが私のコードです。

<script>
$(document).ready(function() {

jQuery.validator.addMethod("firstlastname", function(value, element){
    return this.optional(element) || (/^[a-z]([-']?[a-z]+)*( [a-z]([-']?[a-z]+)*)+$/.test(value));
}, "Please Enter Your First and Last Name");

jQuery.validator.addMethod("roomnumber", function(value, element){
    return this.optional(element) || (/^\d{3}\S{0,1}/.test(value));
}, "Invalid Room Number");

jQuery.validator.addMethod("phonenumber", function(value, element){
    return this.optional(element) || (/^\d{3}\-\d{3}\-\d{4}$ | ^\d{10} | ^\(\d{3}\)\d{3}\-\d{4}$/.test(value));
}, "Invalid Phone Number Format");


  $("#my_form").validate({

    rules: {
      name: {
            required: true,
            firstlastname: true
      },

      room_number: { 
            roomnumber: true
      },
      cell_phone: {
          required: true,
          phonenumber: true
      }
    },

    messages: {
        name: {
            required: "First and Last Name is Required",
            firstlastname: "Please Enter Your First and Last Name"
        },
        room_number: {
            roomnumber: "Invalid Room Number"
        },
        cell_phone: {
            required: "Phone Number is Required",
            phonenumber: "Please Enter a Valid Phone Number"
        }
    },

    errorPlacement: function(error, element) {
        if (element.attr("name") == "Name") {
            error.appendTo($("#nameValid"));
        } else if (element.attr("name") == "Room_Number") {
            error.appendTo($("#roomNumberValid"));
        } else if (element.attr("name") == "Cell_Phone") {
            error.appendTo($("#cellPhoneValid"));

        }
    } 
});
});

</script>

そして、ここにHTMLがあります

<form id="my_form" method="post" >
<p>Name:    </p>
<p>
  <input name="name" style="width: 275px" type="text"/>
  <span id="nameValid"></span>
</p>

<p>Room Number:</p>
<p>
  <input name="room_number" type="text" maxlength="5"/>
  <span id="roomNumberValid"></span>
</p>

<p>Cell Phone:</p>
  <p> <input name="cell_phone" style="width: 192px" type="text" maxlength="13"/> <br/>
<span id="cellPhoneValid"></span>
  </p>

さまざまなjqueryファイルとjquery検証プラグインのバージョンも試しましたが、それらはすべて無効な入力を送信できます。事前に助けてくれてありがとう！

4

1 に答える 1

0

errorPlacement根本的な問題は、関数内の構文の問題です。ほとんどの JavaScript や HTML と同様に、name属性は大文字と小文字を区別します。

if (element.attr("name") == "Room_Number")nameが実際に動作することはありません"room_number"。

代わりにこれを試してください：

errorPlacement: function (error, element) {
    if (element.attr("name") == "name") {
        error.appendTo($("#nameValid"));
    } else if (element.attr("name") == "room_number") {
        error.appendTo($("#roomNumberValid"));
    } else if (element.attr("name") == "cell_phone") {
        error.appendTo($("#cellPhoneValid"));
    }
}

作業: http://jsfiddle.net/8KVHv/

errorPlacementただし、デフォルトとまったく同じように機能するように見えるのに 、なぜ非常に冗長なカスタム コールバックがあるのか​​よくわかりません: http://jsfiddle.net/8KVHv/2/

エラーテキストをデフォルトの要素ではなくa の中に入れたい場合は、このwrapper: "span"オプションを使用できます。参照: http://jsfiddle.net/8KVHv/3/spanlabel

ところで：おそらく電話番号のカスタムメソッドを書く必要はありません。おそらく、ファイルphoneUS内のルールを使用するだけです。additional-methods.js

参照: http://jsfiddle.net/8KVHv/1/

于 2013-04-01T21:01:19.350 に答える