jquery - 验证正在进行时，页面刷新时警报框消失

Question

HTML

<form action="#" id="MyForm" name="MyForm">
<table id="tblData">
    <tr>
        <td>
            <label for="Fie">
                A</label>
            <input id="A" name="A" type="text" value="" />
        </td>
    </tr>
    <tr>
        <td>
            <label for="B">
                B</label>
            <input id="B" name="B" type="text" value="" />
        </td>
    </tr>
    <tr>
        <td>
            <span id="submitButton" class="k-button">Next</span>
        </td>
    </tr>
</table>
</form>

jQuery

$(document).ready(function () {
    $('#submitButton').click(function () {
        $('#MyForm').submit();
        if ($('#MyForm').valid()) {
            alert('hi')
        }
        return false;
    });
    $('#MyForm').validate(
    {
        rules: {
            A:
            {
                required: false,
                range: [1, 100]
            },
            B: {
                required: false,
                range: [1, 100]
            }
        },
        messages: {
            A: {
                range: jQuery.validator.format("Please enter a valid range")
            },
            B: {
                range: jQuery.validator.format("Please enter a valid range")
            }
        }
        ,
        highlight: function (element) {
            $(element).closest('.invoicePrintForm').removeClass('success').addClass('error');
        }
    });
});

JSFiddle 演示

问题

当我单击按钮时，包括所有值都是有效的。假设显示警报消息。警报消息出现但刷新时消失。请检查 JSFiddle。

Answer 1

虽然验证不起作用。尝试删除

$('#MyForm').submit(); 

它将修复警报后的刷新

这是jsfiddle

Answer 2

$(document).ready(function () {
        $('#submitButton').click(function () {

            if ($('#MyForm').valid()) {
               alert('valid');
            }
            return false;
        });
       });