我有一个表单(‘#registrations’),我正在使用Parsley.js验证,到目前为止它工作正常.但是,我想动态地删除表单字段,并添加新的Parsley验证,具体取决于某人在选择下拉菜单中选择什么(‘#manufacturer’).
这是我的标记:
<select name="manufacturer" id="manufacturer" parsley-required="true" data-error-message="Please select a manufacturer."> <option value="apple">Apple</option> <option value="blackBerry">BlackBerry</option> <option value="htc">HTC</option> <option value="huawei">Huawei</option> <option value="lg">LG</option> <option value="motorola">Motorola</option> <option value="nokia">Nokia</option> <option value="samsung">Samsung</option> <option value="sony">Sony</option> <option value="sony-ericsson">Sony Ericsson</option> </select>
这是我的JS:
//init parsley $('#registrations').parsley(); $('#manufacturer').change(function() { //define selected value var manufacturer = $(this).val(); //destroy parsley $('#registrations').parsley('destroy'); //remove all models selects from parsley validation //if someone has prevIoUsly selected a different manufacturer $('#registrations').parsley('removeItem','#apple-models'); $('#registrations').parsley('removeItem','#blackBerry-models'); $('#registrations').parsley('removeItem','#htc-models'); $('#registrations').parsley('removeItem','#huawei-models'); $('#registrations').parsley('removeItem','#lg-models'); $('#registrations').parsley('removeItem','#motorola-models'); $('#registrations').parsley('removeItem','#nokia-models'); $('#registrations').parsley('removeItem','#samsung-models'); $('#registrations').parsley('removeItem','#sony-models'); $('#registrations').parsley('removeItem','#sony-ericsson-models'); //add corresponding models select to parsely $('#registrations').parsley('addItem','#'+manufacturer+'-models'); //reinit parsley $('#registrations').parsley(); });
这不工作,但我不知道为什么.
解决方法
一旦将新的字段添加到Parsley,您需要在该字段中添加所需的约束.
//add corresponding models select to parsely $('#registrations').parsley('addItem','#'+manufacturer+'-models'); //add required constraint $('#'+manufacturer+'-models').parsley('addConstraint',{ required: true });
更新(2014年4月10日)
以上作品适用于Parsley.js 1.x,但不适用于欧芹2.x.
Parsley 2.x不使用addItem,removeItem,addConstraint或removeConstraint.
相反,Parsley 2.x将根据每个输入的数据属性自动检测您的表单中的更改.在上面的例子中,如果你想添加一个新的项目给欧芹,您可以执行以下操作:
//destroy parsley $('form').parsley().destroy(); //set required attribute on input to true $('input').attr('data-parsley-required','true'); //reinitialize parsley $('form').parsley();
//destroy parsley $('form').parsley().destroy(); //set required attribute on input to false $('input').attr('data-parsley-required','false'); //reinitialize parsley $('form').parsley();
原文地址:https://www.jb51.cc/jquery/179476.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。