使用jQuery Validate和选择的插件来验证选择框 [英] Validating select box with jquery validate and chosen plugins
问题描述
我正在尝试同时使用validate和selected插件.验证选择框时出现问题.我发现了类似的问题如何将jQuery验证与选择"插件?和 Chosen.js并验证jquery ，但我无法找到一种将解决方案导入我的代码的方法:
I am trying to use validate and chosen plugin together. I am having the problem while validating select boxes. I found similar questions How can I use jQuery validation with the "chosen" plugin? and Chosen.js and validate jquery but I couldn't find a way to import the solutions to my code :
<form class='myform' id='producteditform'>
<input type='hidden' value='<? echo $row['id']; ?>' name='pkedit' id='pkedit'>
<input type='hidden' value='save' name='operation' id='operation'>
<p><label for='nameedit'>Product Name</label><em>*</em><input id='nameedit' name='nameedit' value='<? echo $row['pname']?>'/></p>
<p><label for='unitedit'>Unit</label><em>*</em><?
$query="select * from units";
$result=$mysqli->query($query);
if($result->num_rows==0)
echo "<a href='units.php?operation=insert'>No unit found. Please define a unit first</a>";
else{
echo "<select class='chosen' id='unitedit' name='unitedit'>";
while($row=$result->fetch_assoc())
echo "<option value='".$row['id']."'>".$row['name']."</option>";
echo "</select>";
}
$mysqli->close();
?></p>
<p><a class='button' class='button' id='saveedit'>Save</a>
<a class='button' id='canceledit' onclick='f()' >Cancel</a></p>
</form>
jquery代码
$("#save").click(function () {
if($("#producteditform").validate({
ignore: [],
rules: {
nameedit: {
required: true,
maxlength:100
},
unitedit:{
required: true,
}
}
}).form()
)
{
// do sth
})
}
}
html呈现的输出
<form class="myform" id="productform" novalidate="novalidate">
<input type="hidden" value="insert" name="operation" id="operation">
<p><label for="name">Product Name</label><em>*</em><input type="text" name="name" id="name"></p>
<p><label for="unit">Unit</label><em>*</em><select class="chosen chzn-done" id="unit" name="unit" style="display: none;"><option value="">please choose..</option><option value="1">kgg</option></select><div id="unit_chzn" class="chzn-container chzn-container-single" style="width: 200px;" title=""><a href="javascript:void(0)" class="chzn-single" tabindex="-1"><span>please choose..</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 198px; top: 24px;"><div class="chzn-search"><input type="text" autocomplete="off" style="width: 163px;"></div><ul class="chzn-results"><li id="unit_chzn_o_0" class="active-result result-selected" style="">please choose..</li><li id="unit_chzn_o_1" class="active-result" style="">kgg</li></ul></div></div></p>
<p><a class="button" id="save">Save</a>
<a class="button" id="cancel" onclick="f()">Cancel</a></p>
</form>
当我删除class ='chosen'时，单击保存按钮时一切正常，否则会出现错误未捕获的错误:无法验证，发现未分配名称的元素.请参阅控制台以获取元素参考.
when I remove class='chosen' everything works fine when save button clicked, otherwise im getting error Uncaught Error: Failed to validate, found an element with no name assigned. See console for element reference.
推荐答案
尝试类似的方法.
$(document).ready(function() {
// initialize the plugin on DOM ready
$("#producteditform").validate({
// all rules and options,
rules: {
nameedit: {
required: true,
maxlength:100
},
unitedit:{
required: true,
}
}
});
// test for valid form
$('#save').on('click' function() {
if($("#producteditform").valid()) {
// do this on valid form
} else {
// do this on invalid form
}
});
});
$('#producteditform').validate()初始化form上的验证插件.
$('#producteditform').validate() initializes the validate plugin on the form.
$('#producteditform').valid()以编程方式触发实际的验证测试并返回true/false布尔值.
$('#producteditform').valid() programmatically triggers an actual validation test and returns a true/false boolean value.
或者，由于您的event是submit事件上的click形式，因此您只需使用内置的submitHandler回调函数即可. (无需创建其他click处理程序.)
Alternatively, since your event is the form click on submit event, then you simply use the built-in submitHandler callback function instead. (There is no need to create another click handler.)
$(document).ready(function() {
// initialize the plugin on DOM ready
$("#producteditform").validate({
// all rules and options,
rules: {
nameedit: {
required: true,
maxlength:100
},
unitedit:{
required: true,
}
},
submitHandler: function(form) {
// do this on valid form
}
});
});
完整文档:
http://docs.jquery.com/Plugins/Validation
在显示HTML输出而不是PHP之前，这是如何验证select元素的一般示例:
Until you show your HTML output instead of the PHP, here is a generic example of how to validate a select element:
http://jsfiddle.net/6Dt7F/
select元素中的重要，第一位或默认option必须包含value=""，否则required规则将失败.
Important, the very first, or the default option in the select element must contain value="" or the required rule will fail.
<select name="field1">
<option value="">please choose...</option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
编辑:
我仍然没有足够的代码来进行正常的演示.但是，由于chosen插件隐藏了实际的表单元素，因此您必须执行以下操作...
I still don't have enough code to make a working demo. However, since the chosen plugin is hiding the actual form elements, you'll have to do the following...
1)定位要验证并传递数据的实际表单元素，而不是chosen创建的可视元素.
1) Target the actual form element that is going to get validated and pass the data, not the visual element created by chosen.
2)启用jQuery可以通过设置ignore: []选项来对隐藏元素进行操作.
2) Enable jQuery Validate to work on hidden elements by setting ignore: [] option.
尝试一下...
$(document).ready(function () {
// initialize the plugin on DOM ready
$("#producteditform").validate({
// all rules and options,
ignore: [], // <-- option so that hidden elements are validated
rules: {
name: { // <-- name of actual text input
required: true,
maxlength: 100
},
unit:{ // <-- name of actual select input
required: true
}
},
submitHandler: function(form) {
// do this on valid form
}
});
});
这篇关于使用jQuery Validate和选择的插件来验证选择框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
