作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个多部分表单,它在开始时获取基本用户信息,并进行一些 jquery.validate 错误检查,以查看字段是否已填写以及电子邮件地址是否有效。
下面有一系列用于新帐户、删除帐户、新软件等的复选框(type_of_request),它们在选中/取消选中时显示/隐藏这些表单元素。
仅当相应的 type_of_request 项目已被选中时,我才想验证表单上的必填部分。
<小时/>更新信息
<小时/>这是一个很好的解决方案,但似乎需要所选部分的所有子项。
典型的场景是 type_request 中的电子邮件和其他复选框均被选中:
<div id="email" style="display: block;"> // shown because other has been selected in the type request
<input id="email_new_account" class="sq-form-field" type="checkbox" value="0" name="q4836:q1"/> // not required
<input id="email_new_account_name" class="sq-form-field" type="text" name="q4836:q2"/> // if email_new_account checked then make required
<input id="email_new_account_access" class="sq-form-field" type="text" name="q4836:q2"/> // if email_new_account checked then make required
<input id="email_new_account_manager" class="sq-form-field" type="text" name="q4836:q3"/> // if email_new_account checked then make required
<input id="email_add_remove_access" class="sq-form-field" type="checkbox" value="0" name="q4837:q1"/> // not required
<input id="email_add_remove_account_name" class="sq-form-field" type="text" name="q4837:q2"/> // if email_add_remove_access checked then make required
<input id="email_add_access" class="sq-form-field" type="text" name="q4836:q2"/> // if email_add_remove_access checked then make required
<input id="email_remove_access" class="sq-form-field" type="text" name="q4837:q3"/> // if email_add_remove_access checked then make required
</div>
<div id="other" style="display: block;"> // shown because other has been selected in the type request
<input id="other_describe_request" class="sq-form-field" type="text" name="q4838:q1"/> // required because #other was checked in type request
<input id="other_request_justification" class="sq-form-field" type="text" name="q48387:q2"/> // required because #other was checked in type request
</div>
<小时/>
进一步阅读
<小时/>我进一步审查了这一点,发现可以将以下内容添加到输入项的类中
class="{required:true, messages:{required:'Please enter
your email address'}}"
或
class="{required:true, email:true, messages:{required:'Please enter
your email address', email:'Please enter a valid email address'}}"
但是当我添加
class="{required:'input[@name=other]:checked'}"
http://jquery.bassistance.de 上对此进行了描述网站,它不起作用。我需要更改语法才能使其正常工作吗?
最佳答案
假设您正在使用 jQuery validation plugin ,您可以根据单击的复选框设置/清除必需/非必需部分中每个控件的类。
$(document).ready( function() { $('form').validate(); } );
function init_validation(divName)
{
$('div#' + divName).find('input').addClass( 'required' );
$('div#inputs').children('div:not(#' + divName + ')')
.find('input')
.removeClass( 'required' );
}
HTML:
<form>
<div>
<input type='radio'
id='new_account_radio'
name='interface_selector'
value='new_account'
selected=true
onclick='init_validation("new_account");' /> New Account
<input type='radio'
id='delete_account_radio'
name='interface_selector'
value='delete_account'
onclick='init_validation("delete_account");' /> Delete Account
<input type='radio'
id='new_software_radio'
name='interface_selector'
value='new_software'
onclick='init_validation("new_software");' /> New Software
</div>
<div id='inputs'>
<div id='new_account'>
<input type='text' id='new_account_name' class='required' />
</div>
<div id='delete_account'>
<input type='text' id='delete_account_name' />
</div>
<div id='new_software'>
<input type='text' id='new_software_name' />
</div>
</div>
</form>
关于如果某些复选框被选中,jquery 验证表单输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/297555/
我是一名优秀的程序员,十分优秀!