验证失败一次后,提交表单无效

时间:2017-06-28 15:02:30

标签: javascript jquery jquery-validate

我有一个基本表单,我使用jQuery Validation Plugin验证。

如果完全填写表单没有任何错误并提交,则可以正常工作。

如果我部分填写,然后点击“提交”,则验证会启动并突出显示错误。

问题在于,即使在纠正错误之后,提交按钮也不再起作用。代码在

之下

这里可能有什么问题?

<form method="post" action="/form" class="form-horizontal" autocomplete="off" id="form">
    <input id="firstName" name="firstName" type="hidden">
    <input id="lastName" name="lastName" type="hidden">
    <div class="form-group">
        <label for="clientNr" class="col-lg-3 control-label">VNR</label>
        <div class="col-lg-9">
            <input name="clientNr" id="clientNr" class="form-control input-sm" pattern="\d{8}" autocomplete="off" autofocus="autofocus" maxlength="8" type="number" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-lg-3 control-label">Person</label>
        <div class="col-lg-9">
            <label for="caller0" class="radio-inline"><input name="caller" value="0" id="caller0" type="radio">VVV</label>
            <label for="caller1" class="radio-inline"><input name="caller" value="1" id="caller1" type="radio">WWW</label>
            <label for="caller2" class="radio-inline"><input name="caller" value="2" id="caller2" type="radio">XXX</label>
        </div>
    </div>
    <div class="form-group">
        <label class="col-lg-3 control-label">Grund</label>
        <div class="col-lg-9 ">
            <label for="reason0" class="checkbox-inline"><input name="reason" value="0" id="reason0" type="checkbox">Val 0</label>
            <label for="reason1" class="checkbox-inline"><input name="reason" value="1" id="reason1" type="checkbox">Val 1</label>
        </div>
    </div>
    <div class="form-group">
        <label class="col-lg-3 control-label">Betrifft</label>
        <div class="col-lg-9">
            <select name="processing" id="processing" class="form-control input-sm">
                <option value="">[...]</option>
                <option value="1">Lorem</option>
                <option value="2">Ipsum</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <div class="col-lg-offset-3 col-lg-9">
            <button type="submit" class="btn btn-large btn-primary">Speichern</button>
        </div>
    </div>
    <input name="_csrf" value="bda28feb-85e3-4c08-89d8-276e350ab1a7" type="hidden">
</form>
$(document).ready(function() {

    $.extend(jQuery.validator.messages, {
        required : ""
    });

    $("#form").validate({
        errorElement : "span",
        errorClass : "errors",
        rules : {
            clientNr : "required",
            caller : "required",
            reason : "required",
            processing : "required"
        },
        highlight : function(element, errorClass, validClass) {
            $(element).parents("div").prev("label.control-label").addClass(errorClass);
        },
        unhighlight : function(element, errorClass, validClass) {
            $(element).parents("div").prev("label.control-label").removeClass(errorClass);
        }
    });
});

0 个答案:

没有答案