jQuery验证在指定div中提交

Question

在我的index.php页面上，表单动作属性为'target.php'。我使用jQuery Valdiate来验证表单。

<form action="target.php" method="post" class="contact-validate"> 
    <div> 
     <div id="sent"></div> 
     <input type="text" placeholder="Przedstaw się" name="name" id="name" /> 
     <input type="text" placeholder="Miejscowość" name="city" id="city" /> 
     <button type="submit" id="submit">Send form *</button> 
    </div> 
</form> 

问题是，经过正确的验证，操作表单是作为其他页面执行的，但是我需要这个操作可以在#sent div中执行。

这里jQuery代码

<script> 
jQuery('.contact-validate').validate({ 
    rules: { 
     "name": { 
      required: true 
     }, 
     "city": { 
      required: true 
     } 
    }, 
    submitHandler: function(form) { 
     form.submit(); 
    } 
}); 
</script> 

我不知道我需要在“submitHandler”

Answer 1

，如果你想提交表单后剩余的页面无法使用form.submit()添加。相反，你可以使用这样的jQuery ajaxSubmit()功能，

HTML

<form action="target.php" id="theform" method="post" class="contact-validate"> 
    <div> 
     <div id="sent"></div> 
     <input type="text" placeholder="Przedstaw się" name="name" id="name" /> 
     <input type="text" placeholder="Miejscowość" name="city" id="city" /> 
     <button type="submit" id="submit">Send form *</button> 
    </div> 
</form> 

的Javascript

<script> 
jQuery('.contact-validate').validate({ 
    rules: { 
     "name": { 
      required: true 
     }, 
     "city": { 
      required: true 
     } 
    }, 
    submitHandler: function(form) { 
     $("#theform").ajaxSubmit({url: 'target.php', type: 'post'}); 
     $("#theform").submit(function(e){ // I think you need to prevent the actual (normal without ajax) form submitting. 
      e.preventDefault(); 
     }); 
    } 
}); 
</script> 

Answer 2

为了防止表单提交，您可以使用

//(jQuery) prevent default functionality of the button 
e.preventDefault(); 

或

//(javascript) return from the method so it does not submit. 
return false; 

我不太确定后面那个。让我知道，一旦你尝试。

干杯！例如，