出现错误时 JQuery 验证停止表单提交

Question

即使表单上有错误，我在表单提交的地方也遇到了 Jquery Validation 问题。

我在这里查看了其他解决方案，但没有一个对我有用。

// validate.js file
function setupFormsValidation(formName){

    // validate
    $(formName).validate({
        onfocusout:false,
        onkeyup:false,
        onclick:false,
        focusInvalid: false,

        errorPlacement: function(error, element) {
            if (element.parents('.inputgroup').length) {
                error.insertBefore(element.parents('.inputgroup'));
                element.parents('.inputgroup').addClass('error');
            } else {
                error.insertBefore(element);
            };            
        },
        showErrors: function (errorMap, errorList) {

            // Code to process errors

    });

    // Code for initializing the form etc


};  //setupFormsValidation  

在我的表单上，代码如下：

    <form action="thankyou.php" class="frmValidate" id="change-dept-form" method="post" name="change-dept-form">
        <fieldset class="inlinelabels">
        <legend><br /> Department name and code change information</legend>
        <div class="row required" id="txt_current_dept_code_row">
            <label class="required" for="txt_current_dept_code">Current department code (3 characters min, 4 characters max):</label> 
            <input class="required" data-min-length="3" id="txt_current_dept_code" name="txt_current_dept_code" required="required" type="text" />
        </div>
        <div class="row required" id="faculty2_row">
            <label for="faculty2">Faculty:</label>
                <select class="required" id="faculty2" name="faculty2" required="required">
                    <option value="">- Select -</option>
                    <option value="Arts">Arts</option>
                    <option value="Business">Business</option>
                </select>
        </div>
        </fieldset>
        <div class="row buttons">
            <input id="mySubmit" type="submit" value="Submit" />
            <input type="reset" value="Clear" />
        </div>
    </form>

<script src="../../assets/js/validate.js" type="text/javascript"></script>

$(document).ready(function(){

    setupFormsValidation('#change-dept-form');

    $("input[type='submit']").click(function(e){

       $form = $('#change-dept-form');

        if ($form.valid()){
            alert('Test'); 
            // need code to submit

        } else {
            alert('Show errors');
        };    

    });

});

我在 if ($form.valid()){ 上有一个断点，之后它不会运行任何代码。它甚至不显示测试警报或显示错误警报。

Answer 1

您并没有取消提交，这就是为什么无论是否有错误都会发生的原因。出现错误时需要取消提交按钮的默认行为

} else {
    alert('Show errors');
    return false; // <-- This should do the trick
};

Answer 2

onclick: false 选项在单击提交按钮时禁用验证。这就是您的表单在未经验证的情况下提交的原因。