忽略其他<选项>在验证时 [英] ignoring other <options> when validating

问题描述

我对此进行了更多改进：

我现在只是想获取输入和输入如果未选择相应的选项，则选择字段以删除属性必需。 （例如，选项值是=到div id）。目前，设置为display：none的字段将不允许进入下一个字段集，因为它们具有必填字段，因此如果未填充两个选项中的所有字段，则不会继续执行下一个字段集。我怎么能忽略那些没有显示的字段？

I'm now just trying to get the input & select fields to drop the attribute "required" if the corresponding option is not selected. (e.g. option value is = to div id). Currently, the fields that are set to display:none won't allow progress to the next fieldset since they have required fields, so if all fields from both options aren't filled in it won't proceed to the next fieldset. How can I get this ignore the fields that aren't displaying?

这里有一个小提琴： 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('');
                });
            }
        }

   });

}）;

推荐答案

您可以使用 ：可见 选择器。

Well you can check whenever a element is visible with the :visible selector.

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

There is no need to add or delete the require attribute, you can easially check if it's visible. It will be ignored when it is hidden:

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

我首先检查的是父元素（ .addInfo ）是可见的。然后我会找到子输入元素。再次，这只是在输入字段可见时。


现在对于每个可见输入我检查它是否具有所需的属性。如果是，它会检查该值是否已填写并将提醒消息当情况并非如此。

What i first check is if the parent element(.addInfo) is visible. Then i'll find the child input element. again, this is only when the input field is visible.
Now for every visible input i check if it has the attribute required. If so, it checks if the value has been filled in and will alert a message when that is not the case.

jsFiddle示例

jsFiddle example

注意选项3

选项3没有属性重quired 。这是为了告诉你什么时候输入元素没有所需的属性它可能是空白的。

Note option 3
Option 3 does not have the attribute required. This is to show you when a input element doesn't have the attribute required it may be blank.

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

Now all is good when nothing happens :)

这篇关于忽略其他<选项>在验证时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！