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

Question

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>

Answer 1

Add a button type. http://jsfiddle.net/SF9R4/1/

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