[英]jQuery Validate seems to pass invalid form to submitHandler
I am trying to use jQuery Validate to prevent my ajax form submit when three fields contain any characters other than digits. 我试图使用jQuery Validate来阻止我的ajax表单提交三个字段包含除数字以外的任何字符。 Apparently I'm doing something wrong, but I can't see what.
显然我做错了什么,但我看不清楚是什么。
EDIT : There seem to be two errors. 编辑 :似乎有两个错误。 My validation rules use the field ID instead of the field name.
我的验证规则使用字段ID而不是字段名称。 However, after fixing that problem, the form still validates unexpectedly..
但是,在修复该问题后,表单仍然意外验证..
This is my jQuery code: 这是我的jQuery代码:
(function() {
$(document).ready(function() {
formSubmits();
/**
* Handles all the form submits that go on.
* This is primarily the ID search and the form submit.
*/
function formSubmits() {
/*** SAVE RECIPE ***/
// validate form
$("#category-editor").validate({
rules: {
"time-prep": {number: true}, /* not sure why validation doesn't work.. */
"time-total": {number: true}, /* according to this, it should: http://goo.gl/9z2odC */
"quantity-servings": {number: true}
},
submitHandler: function(form) {
// submit changes
$.getJSON("setRecipe.php", $(form).serialize() )
.done(function(data) {
// de-empahaize submit button
$('.footer input[type=submit]')
.removeClass('btn-primary')
.addClass('btn-default');
});
// prevent http submit
return false;
}
});
}
});
})(jQuery);
Here's what I see in the inspector when I put a breakpoint inside the submitHandler. 当我在submitHandler中放置断点时,这是我在检查器中看到的内容。 It is getting to the submitHandler despite bad input (a value of 'dsdfd' instead of '123')
尽管输入错误('dsdfd'而不是'123'的值),它仍然转到submitHandler
This is the relevant markup: 这是相关的标记:
<form id="category-editor" class="form-inline" method="get">
....
<div class='form-group'>
<div>
<label for="time-prep">Prep time (min):</label>
<input value="" id="time-prep" name="activeTime" class="form-control min-calc jqValidateNum" data-calc-dest="time-prep-desc" type="number">
<input value="" id="time-prep-desc" name="activeTimeDesc" class="form-control subtle" type="text">
</div>
</div>
<div class='form-group'>
<div>
<label for="time-total">Total time (min):</label>
<input value="" id="time-total" name="totalTime" class="form-control min-calc jqValidateNum" data-calc-dest="time-total-desc" type="number">
<input value="" id="time-total-desc" name="totalTimeDesc" class="form-control subtle" type="text">
</div>
</div>
<div class='form-group'>
<div>
<label for="quantity-servings">Servings:</label>
<input value="" id="quantity-servings" name="servings" class="form-control jqValidateNum" type="number">
</div>
</div>
....
</form>
You've got your rules set up with the "id" values for the <input>
elements instead of their "name" values. 您已使用
<input>
元素的“id”值而不是“name”值设置规则。 Should be: 应该:
rules: {
"activeTime": {number: true},
"totalTime": {number: true},
"servings": {number: true}
},
edit — now that you've fixed that, I think the problem is that the "value" properties of the input elements are empty, because you've declared them type=number
. 编辑 - 现在你已经解决了这个问题,我认为问题是输入元素的“value”属性是空的,因为你已声明它们是
type=number
。 Firefox and Chrome let you type anything into the fields, but they won't have a non-empty value unless the fields really do contain numbers. Firefox和Chrome允许您在字段中键入任何内容,但除非字段确实包含数字,否则它们不会具有非空值。
If you also mark the fields as required, then it works. 如果您还根据需要标记字段,那么它可以工作。 fiddle
小提琴
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.