jQuery验证不将规则应用于整个形式

问题描述:

我有由一个形式: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 –

我只是跑你的代码,它似乎是工作。我确实将以下代码添加到.validate()选项中:

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

谢谢,我没有尝试过自己的代码,但只在整个页面的上下文中。我将源代码分开,并在隐藏的div中找到另一组星型评级按钮,当它们被移除时,允许验证完美地工作。我唯一不明白的是按钮的名称完全不同,甚至被设置为禁用(它们显示平均评分)。再次感谢您的帮助和时间,看看我能否让他们一起工作好:) –