我想在提交表单时检查我的<ul>
是否有子项。下面是我的html:
<form>
/*other input elements*/
<div class="attributes-added">
<ul name = "attributesAddedList">
// by default no element is present
</ul>
<input type = "submit" value = "save"> </div>
</form>
正如您所看到的,提供的ul默认情况下有子级(<li>
)。用户需要动态添加它们,这不是问题。但我需要的是,当我提交表单时,它应该使用自定义函数检查ul
在jQuery validator
中是否有子项。
我已经尝试了下面这样的验证器,但还没有取得丰硕的成果。
$("#templateForm").validate({
rules: {
attributesAddedList:{
addedCategory: $(".attributes-added ul").has("li").length
}
},
message: {
attributesAddedList:{
addedCategory: "the message"
}
}
});
现在用于自定义功能
$.validator.addMethod("addedCategory", function(value, element, len) {
if(len < 0){
return false;
}
}, "choose a category");
有什么帮助吗?
我使用了一个隐藏的输入来添加一个规则,但我建议使用提交处理程序,但通过这种方式,您可以使用.valid()方法,而不必等待表单的提交,希望这能帮助
jQuery.validator.addMethod("hasAttributes", function(value, element) {
console.log('bla');
return $("ul > li").length > 0
})
console.log($("#templateForm").validate({
ignore: "",
rules: {
attr: {hasAttributes: true}
},
submitHandler: function (form) { // for demo
alert(this.valid()); // for demo
return false; // for demo
},
invalidHandler: function(event, validator) { alert('oops, no attributes'); }
}));
$("#templateForm").valid()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<form id="templateForm">
/*other input elements*/
<div class="attributes-added">
<input type="hidden" id="attr" name="attr">
<ul name = "attributesAddedList">
// by default no element is present
</ul>
<input type = "submit" value = "save"> </div>
</form>