Question

我对此进行了更多改进：

我现在正试图获得输入和输入如果未选择相应的选项，请选择要删除属性“required”的字段。（例如，选项值= = div id）。目前，设置为display：none的字段将不允许进入下一个字段集，因为它们具有必需的字段，因此如果未填充两个选项中的所有字段，则不会继续执行下一个字段集。如何忽略未显示的字段？

这是一个小提琴：http://jsfiddle.net/darcher/aUKhN/26/

HTML

<form action="#" id="form">
  <fieldset>
    <legend>Select an option</legend>
    <div class="item">
      <label><span>Option 1 or 2?</span>
        <select name="oneOrTwo" id="two-op" required>
          <option value="" disabled>&mdash; Select &mdash;
          <option value="one">Option 1
          <option value="two">Option 2
        </select>
      </label>
    </div>
    <div class="item">
      <div id="one" class="addInfo" style="display:none">
        <div class="item">
          <label><span>Option 1</span>
            <input type="text" name="op1" required>
          </label>
        </div>
      </div>
      <div id="two" class="addInfo" style="display:none">
        <div class="item">
          <label><span>Option 2</span>
            <input type="text" name="op2" required>
          </label>
        </div>
      </div>
    </div>
    <input type="button" name="prev" class="prev" value="Previous">
    <input type="button" name="next" class="next" value="Next">
  </fieldset>
  <fieldset>
    ...
  </fieldset>
</form>

的jQuery

$(function () {
  $('#two-op').change(function () {
    $('.addInfo').hide();
    $('#' + $(this).val()).show();
    var formElements = new Array("one", "two");
    for (i = 0; i < formElements.length; i++) {
      if ($(this).val() != formElements[i]) {
        $("#" + formElements[i]).children().find('input,select').each(function () {
          $(this).val('');
          $(this).removeAttr('required');
        });
      } else {
        $(this).attr('required', 'required');
      }
    }
  });
});

更新：采用这种方法

   $(function () {
   $('#employment_status').change(function () {
       $('.addInfo').hide();
       $('#' + $(this).val()).show();
        var formElements = new Array("emp","semp","ret","unemp","student");
        for(i=0; i < formElements.length; i++){
            if($(this).val()=="emp" ||$(this).val()=="semp" ) fieldSetNumber = 9;

            else fieldSetNumber = 3;
            if($(this).val()!=formElements[i]){
                $("#"+formElements[i]).children().find('input,select').each(function(){
                    $(this).parents("div").first().removeClass("good");
                    if($(this).is('input')) $(this).val('');
                    if($(this).is('select')) $(this).val('');
                });
            }
        }

   });

}）;

Answer 1

当用户触发第一个<select>时，您可以初始化每个字段的验证。这可以通过<select>上的第一个change上的听众来完成。在您的具体情况： $('#empStatus').on('change', function() { //init validation on fields you want });

在此事件处理程序中，您可以通过两种方式处理字段。

常规字段
选择特定字段（或动态字段）

显然，不应该验证未显示的字段。

Answer 2

以下是您想要的工作示例...

http://jsfiddle.net/9Q8R7/1/

下面的代码

var t, cc=0, sp=$("<span class='err'>required</span>");

$('#btn').click(function(){
    if(!cc) return;
    var tt= true;
    $('#'+cc).children('input').each(function(){
        if($(this).val()==''){tt= 0; return tt;}
    });
    if(tt) $('#f').submit();
});

$('#c').change(function(){
    cc=$(this).val();
    $('#f>fieldset').hide().filter("#"+cc).show();
});

$('input').on('blur',function(){
    t=$(this);
    if(t.val()=='') t.after(sp); 
    else t.next('.err').remove(); 
});

它列出了原则，你可以扩展它...但现在你知道该怎么做了。

Answer 3

您可以使用:visible选择器查看元素何时可见。

无需添加或删除require属性，您可以轻松检查它是否可见。它被隐藏时将被忽略：

$('.addInfo:visible').find('input[type=text]').each(function()
{
   if($(this).val() == "")
   {
       if($(this).attr('required'))
       {
          alert('input field ' + $(this).attr('name') + ' is required!');
       }
    }
}

我首先检查的是父元素（.addInfo）是否可见。然后我会找到子输入元素。 再次，这仅在输入字段可见时。
现在，对于每个可见输入，我检查它是否具有属性required。如果是，则检查该值是否已填写，并在不是这种情况时发出警告。

<强> jsFiddle example

注意选项3
选项3没有属性required。这是为了向您显示输入元素没有属性required时可能为空白。

现在一切都很好，没有任何反应：）

在验证</options>时忽略其他<options>

3 个答案: