Question

即使表单上有错误，我仍然无法在表单提交的情况下进行Jquery验证。

我已经在这里检查了其他解决方案，但它们都没有为我工作。

// 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选项会禁用验证。这就是您的表单未经验证即提交的原因。

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

2 个答案: