我有一个脚本可以检查表单输入是否有效。然后,如果出现错误,它会向.form-group类添加一个名为“has-error”的类。
我不完全理解它是如何选择正确的.form-group但我怀疑“最接近”意味着它会回溯直到找到第一个然后应用它:
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url'],input[type='radio'],Select"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
???$(curInputs[i]).closest(".form-group").addClass("has-error");???
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
所以这可以作为例子:
<div class="form-group col-md-6">
<label class="control-label">Surname</label>*
<input id="Surname" name="Surname" maxlength="100" required="required" class="form-control" placeholder="" type="text">
</div>
现在我有一个单选按钮,我正在努力解决A)如何更改我的HTML代码以匹配与上面输入的文本框相同的结构或B)在???之间添加到脚本的内容。 .... ???将类'has-error'添加到下面第2行的标签上。它将它添加到输入下面的两个标签上是好的(因为我猜这些是'最接近的')但不是第一个:
<div class="col-md-12">
<label class="control-label">Gender</label>*
<div class="form-group funkyradio">
<div class="form-group funkyradio-primary col-md-6">
<input type="radio" name="GenderRadio" id="radio1" required="required" />
<label class="control-label" for="radio1">Male</label>
</div>
<div class="form-group funkyradio-primary col-md-6">
<input type="radio" name="GenderRadio" id="radio2" required="required"/>
<label class="control-label" for="radio2">Female</label>
</div>
</div>
</div>
谢谢!
编辑:
所以这个修改有效:
<div class="form-group col-md-12">
<label class="control-label">Gender</label>*
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="Gender" value="M" id="radio1" required="required" />
<label class="control-label" for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="Gender" value="F" id="radio2" required="required"/>
<label class="control-label" for="radio2">Female</label>
</div>
</div>
</div>
虽然我仍然有兴趣知道在......之间放什么......如果我想在页面上的某个地方定位另一个元素,也许这个?:
(curInputs[i]).find?("#div-with-unique-ID").addClass("has-error");