![](/img/trans.png)
[英]How to validate form based on input type=text/radio/checkbox using jQuery Validation Plugin
[英]Validate using jQuery based on input type = radio/checkbox/select
我需要验证输入字段,如文本,电子邮件,单选,复选框,选择。 可以说我有这个:
<fieldset>
<div class="form-top">
<div class="form-bottom">
<div class="form-group">
<label class="sr-only" for="form-first-name">First name</label>
<input type="text" name="form-first-name" placeholder="First name..." class="form-first-name form-control" id="form-first-name">
</div>
<div class="form-group">
<label class="sr-only" for="form-last-name">Last name</label>
<input type="text" name="form-last-name" placeholder="Last name..." class="form-last-name form-control" id="form-last-name">
</div>
<div class="form-group">
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</div>
<div class="form-group">
<label class="sr-only" for="form-about-yourself">About yourself</label>
<textarea name="form-about-yourself" placeholder="About yourself..." class="form-about-yourself form-control" id="form-about-yourself"></textarea>
</div>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
在jQuery中,我使用它来验证:
$('.registration-form .btn-next').on('click', function() {
var parent_fieldset = $(this).parents('fieldset');
console.log(parent_fieldset);
var next_step = true;
parent_fieldset.find('input[type="text"], input[type="radio"], input[type="password"], textarea').each(function() {
if( $(this).val() == "" ) {
$(this).addClass('input-error');
next_step = false;
}
else {
$(this).removeClass('input-error');
}
});
输入type = text和textarea验证有效,但输入type = radio无效。 任何想法 ?
UPDATE 1我正在使用多步骤表单,我使用此示例 ,在此示例中,我在第一步中添加了
<div class="form-group">
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</div>
不要检查($this).val()
广播,应该检查:
($this).find(":selected").text();
编辑
一个小例子:
$('.btn').on('click', function() { $("input[type='radio']").each(function() { var radioName= $(this).attr('name'); var isChecked =$("input[name='"+radioName+"']:checked").val(); if( $(this).val() != "" && isChecked){ $("#result").html('success'); } else { $("#result").html('error'); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group"> <input type="radio" name="gender" value="male"> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other </div> <div id="result"></div> <input type="button" class="btn" value="send"/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.