jquery验证 - 点击“提交”检查复选框

我有一个脚本验证表单（使用jQuery Validate），然后提交数据。它目前运行良好，但现在我需要添加一个复选框，并且我不清楚如何使用jQuery/ajax提交值。我是否需要包含诸如$('#checkBox').attr('checked');之类的内容？如果是这样，我如何将它传递给ajax？jquery验证 - 点击“提交”检查复选框

此外，当我点击“提交”，没有完成表格，复选框自动检查自己。这是为什么发生？

的jquery：

<script> 
$(document).ready(function(){ 
    $("#formid").validate({ 
     rules: { 
      name: "required", 
      email: { 
       required: true, 
       email:  true 
      }, 
      mobile: { 
       required: true, 
       minlength: 10 
      }, 
      news: { 
       required: false, 
      } 
     }, 
     messages: { 
      name: "Please enter your name", 
      email: "Please enter a valid email address", 
      mobile: "Please enter your mobile number" 
     }, 
     submitHandler: function() { 
       var name  = $('#name').attr('value'); 
       var email  = $('#email').attr('value'); 
       var mobile  = $('#mobile').attr('value'); 
       var news  = $('#news').attr('value'); 

       $.ajax({ 
        type: "POST", 
        url: "ajax.php", 
        data: $("#formid").serialize(), 
        success: function(){ 
         $('form#formid').hide(); 
         $('div.success').fadeIn(); 
        } 
       }); 
      return false; 
     } 
    }); 
}); 
</script>

形式：

<form id="formid" method="post"> 
    <fieldset> 
     <div> 
      <label for="name">Name</label> 
      <input type="text" id="name" name="name" class="required" /> 
     </div> 

     <div> 
      <label for="email">Email</label> 
      <input type="text" id="email" name="email" class="required" /> 
     </div> 

     <div> 
      <label for="mobile">Mobile</label> 
      <input type="text" id="mobile" name="mobile" class="required" /> 
     </div> 
     <label for="news"><p>Please don&rsquo;t send me ongoing news</p> 
     <input type="checkbox" id="news" name="news" value="No" /> 

    <label for="submit1" id="submit"><span>&nbsp;</span> 
     <input id="submit1" type="submit" name="submit" value="Submit"/> 
     </label> 
    </fieldset> 
</form>

来源

2012-08-01 circey

您有一个未封闭的label标记，浏览器正在扩展为包含checkbox和submit按钮。

<label for="news"> 
    <p>Please don&rsquo;t send me ongoing news</p> 
    <input type="checkbox" id="news" name="news" value="No" /> 
<!-- should close news label here -->  
<label for="submit1" id="submit"> 
    <span>&nbsp;</span> 
    <input id="submit1" type="submit" name="submit" value="Submit"/> 
</label>

这是造成两者checkbox和submit充当如果点击其中一方时，他们被点击。

修复你的标记应该可以解决你的问题。

来源

2012-08-01 02:28:02

它的确如此。辉煌:-)非常感谢！多么愚蠢的错误...... – circey 2012-08-01 02:31:06

@circey我们都做到了;） – 2012-08-01 02:32:07

这先前已经讨论here。与this demo的链接也应该有所帮助。

请注意，jquery serialize将只包含复选框的值，如果它被选中。

来源

2012-08-01 02:27:42 Christo

jquery验证 - 点击“提交”检查复选框

回答

相关问题