1

我对此进行了更多改进：

如果未选择相应的选项，我现在只是尝试获取输入和选择字段以删除“必需”属性。（例如选项值是 = 到 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('');
                });
            }
        }

   });

});

4

3 回答 3

0

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

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

  • 一般字段
  • 选择特定字段（或动态字段）

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

于 2013-10-12T19:32:25.177 回答
0

这是您想要的工作示例...

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(); 
});

它列出了原理，您可以对其进行扩展……但现在您知道该怎么做了。

于 2013-10-12T20:48:46.903 回答
0

好吧，您可以使用选择器检查元素是否可见: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 示例

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

现在一切都很好，什么都没有发生:)

于 2013-11-20T12:45:04.400 回答