Question

我有一个脚本可以检查表单输入是否有效。然后，如果出现错误，它会向.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");

.closest以及如何修改它以选择另一个不是最接近的类？

0 个答案: