I would like to validate a form using the http://jqueryvalidation.org/ plugin. But instead of submitting the form, I wish to first display the results so that the user could make extra sure and then submit the data. The "extra sure" page has a back button which just displays the original form, but when the form is shown, it seems to instantly trigger the submit callback. Please see script below and a live example at http://jsfiddle.net/SF9R4/ . How do I prevent this behavior?
var validator=$("#my-form").validate({
rules: {name:{required:true},address:{required:true},city:{required:true}},
submitHandler: function(form) {
//Populate #my-form
$('#my-form>div').toggle();
}
});
$('#go-back').click(function(){
$('#my-form>div').toggle();
alert('go-back');
});
$('#submit').click(function(){
alert('Submit Form');
});
<form method="post" action="myform.php" id="my-form">
<div class="step1">
<input type="text" name="name" id="name" />
<input type="text" name="address" id="address" />
<input type="text" name="city" id="city" />
<input type="submit" name="submit" value="Submit">
</div>
<div class="step2 hidden">
<dl class="info">
<dt>Name</dt><dd id="name"></dd>
<dt>Address</dt><dd id="address"></dd>
<dt>City</dt><dd id="city"></dd>
</dl>
<button id='go-back'>Go Back</button>
<button id='submit'>Complete</button>
</div>
</form>
Add a button type. http://jsfiddle.net/SF9R4/1/
<button id='go-back' type="button">Go Back</button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.