Question

我想使用http://jqueryvalidation.org/插件验证表单。但是，我希望首先显示结果，以便用户可以更加确定然后提交数据，而不是提交表单。 “额外确定”页面有一个后退按钮，只显示原始表单，但是当显示表单时，它似乎立即触发提交回调。请参阅下面的脚本和http://jsfiddle.net/SF9R4/的实时示例。如何防止此行为？

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>

Answer 1

添加按钮类型。 http://jsfiddle.net/SF9R4/1/

<button id='go-back' type="button">Go Back</button>

防止jQuery验证插件在可见时提交表单

1 个答案: