未調用jQuery表單驗證

我需要驗證HTML表單中的名稱，房間號和電話號碼字段。我爲每個編寫了自定義規則，並在腳本中調用它們。但是這些和默認的jQuery規則在輸入無效時不會拋出錯誤。這是我的代碼。未調用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驗證插件版本的試驗，以及和他們都讓我提交無效輸入。我在這裏先向您的幫助表示感謝！

來源

2013-04-01 Nathan Foss

我覺得這個代碼僅用於輸入驗證，並不能防止從表單提交 – Hackerman

我在另一個項目中，做同樣的事情，是充分發揮作用有非常相似的代碼。當它拋出一個錯誤時，它會阻止提交操作。 –

然後，這是一個批准錯誤，或其他....嘗試使用其他代碼作爲指導。 – Hackerman

根本問題是您的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/

如果您希望您的錯誤文本在之內，您可以使用而不是默認的label元素。請參閱：http://jsfiddle.net/8KVHv/3/

BTW：您可能不需要編寫自定義方法的電話號碼。也許只是使用additional-methods.js文件中的phoneUS規則。

參見：http://jsfiddle.net/8KVHv/1/

來源

2013-04-01 21:01:19 Sparky

未調用jQuery表單驗證

回答

相關問題