如何在jQuery驗證中添加帶有消息的驗證規則？

Question

我試過下面的代碼，但無法獲取錯誤消息。

var v = jQuery("#account_info").validate({ 
    //errorLabelContainer: $("#result"), 
    submitHandler: function(form) { 
     jQuery(form).ajaxSubmit({        
      target: "#checkOut_error",     
      success: function(msg) { 
       //setTimeout("window.location='MyBids.php'", 2000);    
       if(msg == '<?php echo OBJECT_STATUS_SUCCESS;?>') { 
        $('#checkOut_error').html('<div class="msg msg-thanks">Bid Submitted Successfully !</div>'); 
        //setTimeout("window.location='"+<?php echo LINK_TO_TENBID;?>+"'", 2000); 
        //setTimeout("window.location.reload(true)",2000); 
        //$('.result').html('<div class="msg msg-thanks">Bid Submitted Successfully !</div>'); 

       } else{ 
             $("#checkOut_error").html(msg); 
            } 
      }, 
      clearForm: false, 
      resetForm: false 
     }); 
    }, 
      errorLabelContainer: "#checkOut_error", 
      rules: { 
       phone_number: { 
        required: true 

       }, 
       recipient_name: { 
        required: true, 
        min_length: 6 
       } 

      }, 
      messages: { 
       recipient_name: { 
        required: "Enter recipient name", 
        min_length: "Name should be atleast 6 characters long" 
       } 
      } 
}); 

- 如何添加規則和錯誤消息？

驗證插件使用哪個屬性：name或id？

- 如何一次顯示一條錯誤消息？

Answer 1

這裏是一個簡單的jQuery登記（註冊）驗證：

 $('#submitButton').click(function() { 
     $("#accounterForm").validate({ 
    rules: { 
     firstName: "required", 
     lastName: "required", 
     companyName: { 
      required: true, 
      no_special_characters: true, 
      maxlength: 64 
     }, 
     companyFullName: "required", 
     password: { 
      required: true, 
      minlength: 6 
     }, 
     confirmPassword: { 
      required: true, 
      minlength: 6, 
      equalTo: "#mid-box4" 
     }, 
     emailId: { 
      required: true, 
      email: true 
     } 
    }, 
    messages: { 
     firstName: "Please enter your first name", 
     lastName: "Please enter your last name", 
     companyName: "Please enter company ID", 
     companyName: { 
      required: "Please enter company ID", 
      no_special_characters: "Company ID should contain atleast one letter and no special characters", 
      maxlength: "Company ID exceeded the maximum length" 
     }, 
     companyFullName: "Please enter company name", 
     password: { 
      required: "Please provide a password", 
      minlength: "Your password must be at least 6 characters long" 
     }, 
     confirmPassword: { 
      required: "Please provide a password", 
      minlength: "Your password must be at least 6 characters long", 
      equalTo: "Please enter the same password as above" 
     }, 
     emailId: "Please enter a valid email address", 
     confirmemailId:{ 
     required:"Please confirm email address", 
     equalTo :"Emailid and confirm emaild must be same" 
     }, 
     agree: "Please accept Terms of use" 
    } 
}); 

Answer 2

哪位屬性並驗證插件使用：名稱或ID？

As per documentation，該插件要求所有input字段包含一個nameattribute。當在.validate()中指定rules和messages時，您可以使用nameattribute。

- 如何添加規則和錯誤消息？

的min_length規則應該不包含下劃線。這是minlength。否則，你的代碼看起來正確。根據你的代碼

簡單的演示...

的jQuery：

$(document).ready(function() { 

    $("#account_info").validate({ 
     rules: { 
      phone_number: { 
       required: true 
      }, 
      recipient_name: { 
       required: true, 
       minlength: 6 // <-- removed underscore 
      } 
     }, 
     messages: { 
      phone_number: { 
       required: "this field is required" 
      }, 
      recipient_name: { 
       required: "Enter recipient name", 
       minlength: "Name should be at least {0} characters long" // <-- removed underscore 
      } 
     }, 
     submitHandler: function (form) { // for demo 
      alert('valid form'); // for demo 
      return false; // for demo 
     } 
    }); 

}); 

HTML：

<form id="account_info"> 
    <input type="text" name="phone_number" /> 
    <br/> 
    <input type="text" name="recipient_name" /> 
    <br/> 
    <input type="submit" /> 
</form> 

工作的jsfiddle演示：http://jsfiddle.net/rfgRL/

---

此外，使用像minlength規則時，您的自定義消息可以包含一個佔位符，{0}，即插入特定規則定義。

minlength: 6 

與自定義消息...

minlength: "Name should be at least {0} characters long" 

會自動顯示...

名稱應該是長期的

---

至少6個字符，因爲只在DOM準備只初始化其選項的驗證插件調用.validate()一次，存在不分配的目的它是一個變量;它不會在任何地方重複使用......至少它不應該。

var v = jQuery("#account_info").validate({...}); 

，簡直是這...

jQuery("#account_info").validate({...}); 

其他地方在你的代碼，如果你需要測試form的有效性或重新觸發一個有效性測試，use the .valid() method。它將返回布爾值並觸發任何待處理表單錯誤的顯示。例如：

if (jQuery("#account_info").valid()) { ...