2011-12-02 85 views
3

我有由一個形式:jQuery驗證不將規則應用於整個形式

  • 3文本框(前兩個是必填字段)
  • 3臺20的無線電的按鈕(使用jQuery評分風格),其中每個都是必需的
  • 1文本區域,這也是必需的。

如果只有一個單選按鈕被選中,而其他字段沒有有效數據,整個表單都會提交。似乎只要任何一個單選按鈕被選中 - 其餘的驗證規則就無法工作。

如果您嘗試提交一個空白表單,驗證會啓動並且每個字段上的錯誤都會正確顯示。

如果您在各個領域,除了填寫任何單選按鈕,驗證正確顯示並排設置錯誤,而不是提交。

誰能告訴我我做錯了什麼?我使用jQuery 1.6.1和jQuery驗證插件1.8.1

$(document).ready(function() { 
    // validate contact form on keyup and submit 
    $("#ratingfrm").validate({ 
     errorElement: "span",  

     //set the rules for the fild names 
     rules: { 
      name: { 
       required: true, 
       minlength: 3, 
       maxlength:25 
      }, 
      email: { 
       required: true, 
       email: true 
      }, 
      website: { 
       required: false, 
       minlength: 5, 
       maxlength:65 
      }, 
      rating1: {required: true}, 
      rating2: {required: true}, 
      rating3: {required: true}, 
      rating4: {required: true},   
      comment: { 
       required :true, 
       minlength:5 
      } 
     }, 

     //set messages to appear inline 
     messages: { 
      name: { 
       required: "<br>Your name is required.", 
       minlength: "<br>Please enter a minimum of 3 characters", 
       maxlength: "<br>Please enter a maximum of 25 characters" 
      },  
      email: "<br>A valid email is required.",   
      website: { 
       required: "<br>Please enter a valid website address", 
       minlength: "<br>Please enter a minimum of 5 characters", 
       maxlength: "<br>Please enter a maximum of 65 characters" 
      },  
      rating1: "Please rate", 
      rating2: "Please rate", 
      rating3: "Please rate", 
      rating4: "Please rate",  
      comment: { 
       required: "<br>Please enter a comment", 
       minlength: "<br>Please enter a minimum of 5 characters" 
      }  
     }, 
     errorPlacement: function(error, element) { 
      error.insertAfter(element); 
     } 
    }); 
}); 

表單代碼:

<form id="ratingfrm" name="ratingfrm" method="post" accept-charset="utf-8" action="/rateinput"> 
<fieldset class="one-fourth"> 
    <input type="hidden" name="RID" value="154341X"> 

    <label for="name">Name</label><br /> 
    <input type="text" name="name" value="" />       
    <br /><br /> 

    <label for="email">Email</label><br />       
    <input class="input" id="email" name="email" type="text" /> <br /> 
    We will not publish or share your<br />email address with anyone else.<br /><br /> 

    <label for="website">Website:</label><br /> 
    <input class="input" id="website" name="website" type="text" /> 
</fieldset> <!-- /one-fourth --> 

<fieldset class="one-fourth"> 

    <strong>Accommodation:</strong> 
    <div class="Clear"> 
     <input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="1 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="2 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="3 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="4 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="5 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="6 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="7 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="8 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="9 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="10 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="11 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="12 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="13 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="14 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="15 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="16 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="17 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="18 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="19 " /><input class="auto-submit-star {split:4}" type="radio" id="rating1" name="rating1" value="20 " />        
    </div><br /> 

    <strong>Facilities:</strong> 
    <div class="Clear"> 
    <input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="1"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="2"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="3"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="4"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="5"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="6"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="7"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="8"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="9"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="10"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="11"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="12"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="13"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="14"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="15"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="16"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="17"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="18"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="19"/><input class="auto-submit-star {split:4}" type="radio" id="rating2" name="rating2" value="20"/>        
    </div><br /> 

    <strong>Cleanliness:</strong> 
    <div class="Clear"> 
    <input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="1"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="2"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="3"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="4"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="5"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="6"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="7"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="8"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="9"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="10"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="11"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="12"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="13"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="14"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="15"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="16"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="17"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="18"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="19"/><input class="auto-submit-star {split:4}" type="radio" id="rating3" name="rating3" value="20"/>        
    </div><br />  

    <br /><strong>Value for Money:</strong> 
    <div class="Clear"> 
    <input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="1"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="2"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="3"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="4"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="5"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="6"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="7"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="8"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="9"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="10"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="11"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="12"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="13"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="14"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="15"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="16"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="17"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="18"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="19"/><input class="auto-submit-star {split:4}" type="radio" id="rating4" name="rating4" value="20"/>        
    </div><br />  

</fieldset> <!-- /one-fourth --> 

<fieldset class="one-half last"> 
    <strong>Comments:</strong><br />  
    <textarea name="comment" cols="180" rows="7" id="comment" style="width:100%" ></textarea>        
    <br /> 

    <input type="submit" name="submit" value="SUBMIT" />      

</fieldset> <!-- /one-half last--> 

+1

您的html外觀如何? – Iljaas

+0

添加表單html –

回答

1

我只是跑你的代碼,它似乎是工作。我確實將以下代碼添加到.validate()選項中:

 submitHandler: function() { 
      alert("do submit"); 
      return false; 
     }, 
     invalidHandler: function() { 
      alert("invalid form"); 
     } 
+0

謝謝,我沒有嘗試過自己的代碼,但只在整個頁面的上下文中。我將源代碼分開,並在隱藏的div中找到另一組星型評級按鈕,當它們被移除時,允許驗證完美地工作。我唯一不明白的是按鈕的名稱完全不同,甚至被設置爲禁用(它們顯示平均評分)。再次感謝您的幫助和時間,看看我能否讓他們一起工作好:) –