我有一个基本表单,我使用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);
}
});
});