我的表单中有两个字段,我希望其中一个字段被填充。我找到了JQuery validate
插件,但require_from_group
似乎无效。
检查中的控制台返回:
Uncaught TypeError: validator.elementValue is not a function
我做的第一件事就是将类附加到所需的字段grouprequired
。
现在我有JS文件;在我添加了short_description
和language_from
验证后,text_to_translate
和file
验证工作正常。
你知道问题出在哪里吗?
$(function () {
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$("#job_creation_form").validate({
rules: {
short_description: {
required: true
},
language_from: {
required: true
},
text_to_translate: {
require_from_group: [1, '.grouprequired']
},
file: {
require_from_group: [1, '.grouprequired']
}
},
messages: {
short_description: {
required: "Short description can't be empty. Please fill this field."
},
language_from: {
required: "Please choose current language."
},
text_to_translate: {
require_from_group: "Either fill this form with a text or attach a file (below)."
},
file: {
require_from_group: "Either attach a file or fill text to translate (above)."
}
}
});
$.validator.addMethod("require_from_group", function (value, element, options) {
alert('kosd')
var $fields = $(options[1], element.form),
$fieldsFirst = $fields.eq(0),
validator = $fieldsFirst.data("valid_req_grp") ? $fieldsFirst.data("valid_req_grp") : $.extend({}, this),
isValid = $fields.filter(function () {
return validator.elementValue(this);
}).length >= options[0];
// Store the cloned validator for future validation
$fieldsFirst.data("valid_req_grp", validator);
// If element isn't being validated, run each require_from_group field's validation rules
if (!$(element).data("being_validated")) {
$fields.data("being_validated", true);
$fields.each(function () {
validator.element(this);
});
$fields.data("being_validated", false);
}
return isValid;
}, $.validator.format("Please fill at least {0} of these fields."));
});
在控制台的红线之前,有这样的:
jquery.validate.min.js:29 exception occured when checking element id_text_to_translate, check the 'require_from_group' method TypeError: validator.elementValue is not a function(…)
编辑:这是表单的实际HTML:
<form id="job_creation_form" action="" method="post" enctype="multipart/form-data" novalidate="novalidate"><input
type="hidden" name="csrfmiddlewaretoken" value="249lrU6KpGBGmDp7ezM7ApU3jGLOvBnY">
<div id="div_id_short_description" class="control-group"><label for="id_short_description"
class="control-label requiredField">
Short description<span class="asteriskField">*</span> </label>
<div class="controls"><input class="textinput textInput" id="id_short_description" maxlength="40"
name="short_description" type="text">
<p id="hint_id_short_description" class="help-block">Very short description of this order</p></div>
</div>
<div id="div_id_language_from" class="control-group"><label for="id_language_from"
class="control-label requiredField">
Language from<span class="asteriskField">*</span> </label>
<div class="controls"><select class="select" id="id_language_from" name="language_from">
<option value="" selected="selected">---------</option>
<option value="45">Slovak</option>
<option value="46">Russian</option>
<option value="47">Magyar</option>
<option value="48">English</option>
<option value="49">Croatian</option>
<option value="50">Spanish</option>
<option value="51">Dutch</option>
<option value="52">Estonian</option>
</select></div>
</div>
<div id="div_id_text_to_translate" class="control-group"><label for="id_text_to_translate" class="control-label ">
Text to translate
</label>
<div class="controls"><textarea class="grouprequired textarea" cols="40" id="id_text_to_translate"
name="text_to_translate" placeholder="Specification" rows="10"></textarea></div>
</div>
<div id="div_id_file" class="control-group"><label for="id_file" class="control-label ">
File
</label>
<div class="controls"><input class="grouprequired clearablefileinput" id="id_file" name="file" type="file">
</div>
</div>
<div id="div_id_notes" class="control-group"><label for="id_notes" class="control-label requiredField">
Notes<span class="asteriskField">*</span> </label>
<div class="controls"><textarea class="textarea" cols="40" id="id_notes" name="notes" rows="10"></textarea>
<p id="hint_id_notes" class="help-block">Notes</p></div>
</div>
<input id="id_form-TOTAL_FORMS" name="form-TOTAL_FORMS" type="hidden" value="5"><input id="id_form-INITIAL_FORMS"
name="form-INITIAL_FORMS"
type="hidden"
value="0"><input
id="id_form-MIN_NUM_FORMS" name="form-MIN_NUM_FORMS" type="hidden" value="0"><input
id="id_form-MAX_NUM_FORMS" name="form-MAX_NUM_FORMS" type="hidden" value="5">
<input type="hidden" name="csrfmiddlewaretoken" value="249lrU6KpGBGmDp7ezM7ApU3jGLOvBnY">
<label for="id_form-0-language">Language:</label><select class="select-language" id="id_form-0-language"
name="form-0-language">
<option value="" selected="selected">---------</option>
<option value="45">Slovak</option>
<option value="46">Russian</option>
<option value="47">Magyar</option>
<option value="48">English</option>
<option value="49">Croatian</option>
<option value="50">Spanish</option>
<option value="51">Dutch</option>
<option value="52">Estonian</option>
</select>
<label for="id_form-0-level">Level:</label><select id="id_form-0-level" name="form-0-level">
<option value="" selected="selected">---------</option>
<option value="34">Unknown</option>
<option value="35">Standard level</option>
<option value="36">Professional level</option>
<option value="37">Native speaker level</option>
</select>
<br>
<br>
<input type="hidden" name="csrfmiddlewaretoken" value="249lrU6KpGBGmDp7ezM7ApU3jGLOvBnY">
<label for="id_form-1-language">Language:</label><select class="select-language" id="id_form-1-language"
name="form-1-language">
<option value="" selected="selected">---------</option>
<option value="45">Slovak</option>
<option value="46">Russian</option>
<option value="47">Magyar</option>
<option value="48">English</option>
<option value="49">Croatian</option>
<option value="50">Spanish</option>
<option value="51">Dutch</option>
<option value="52">Estonian</option>
</select>
<label for="id_form-1-level">Level:</label><select id="id_form-1-level" name="form-1-level">
<option value="" selected="selected">---------</option>
<option value="34">Unknown</option>
<option value="35">Standard level</option>
<option value="36">Professional level</option>
<option value="37">Native speaker level</option>
</select>
<br>
<br>
<input type="hidden" name="csrfmiddlewaretoken" value="249lrU6KpGBGmDp7ezM7ApU3jGLOvBnY">
<label for="id_form-2-language">Language:</label><select class="select-language" id="id_form-2-language"
name="form-2-language">
<option value="" selected="selected">---------</option>
<option value="45">Slovak</option>
<option value="46">Russian</option>
<option value="47">Magyar</option>
<option value="48">English</option>
<option value="49">Croatian</option>
<option value="50">Spanish</option>
<option value="51">Dutch</option>
<option value="52">Estonian</option>
</select>
<label for="id_form-2-level">Level:</label><select id="id_form-2-level" name="form-2-level">
<option value="" selected="selected">---------</option>
<option value="34">Unknown</option>
<option value="35">Standard level</option>
<option value="36">Professional level</option>
<option value="37">Native speaker level</option>
</select>
<br>
<br>
<input type="hidden" name="csrfmiddlewaretoken" value="249lrU6KpGBGmDp7ezM7ApU3jGLOvBnY">
<label for="id_form-3-language">Language:</label><select class="select-language" id="id_form-3-language"
name="form-3-language">
<option value="" selected="selected">---------</option>
<option value="45">Slovak</option>
<option value="46">Russian</option>
<option value="47">Magyar</option>
<option value="48">English</option>
<option value="49">Croatian</option>
<option value="50">Spanish</option>
<option value="51">Dutch</option>
<option value="52">Estonian</option>
</select>
<label for="id_form-3-level">Level:</label><select id="id_form-3-level" name="form-3-level">
<option value="" selected="selected">---------</option>
<option value="34">Unknown</option>
<option value="35">Standard level</option>
<option value="36">Professional level</option>
<option value="37">Native speaker level</option>
</select>
<br>
<br>
<input type="hidden" name="csrfmiddlewaretoken" value="249lrU6KpGBGmDp7ezM7ApU3jGLOvBnY">
<label for="id_form-4-language">Language:</label><select class="select-language" id="id_form-4-language"
name="form-4-language">
<option value="" selected="selected">---------</option>
<option value="45">Slovak</option>
<option value="46">Russian</option>
<option value="47">Magyar</option>
<option value="48">English</option>
<option value="49">Croatian</option>
<option value="50">Spanish</option>
<option value="51">Dutch</option>
<option value="52">Estonian</option>
</select>
<label for="id_form-4-level">Level:</label><select id="id_form-4-level" name="form-4-level">
<option value="" selected="selected">---------</option>
<option value="34">Unknown</option>
<option value="35">Standard level</option>
<option value="36">Professional level</option>
<option value="37">Native speaker level</option>
</select>
<br>
<br>
<button value="Update" type="submit">Submit</button>
</form>
答案 0 :(得分:1)
根据OP's comment:
<script src="ajax.aspnetcdn.com/ajax/jquery.validate/1.9/…
因此,您正在使用jQuery Validate插件的1.9版,以及从插件的require_from_group
文件的1.15版本中复制的additional-methods.js
方法。自版本1.9起,require_from_group
中的许多错误已得到修复,additional-methods.js
中的方法版本需要与jQuery Validate版本匹配。
将jQuery Validate插件升级到版本1.15
src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"
否则,它在这里工作:http://jsfiddle.net/s40kwon6/