通过 <select> 更改时验证可见输入 JS答案

【问题标题】：On change through <select> validate visible inputs JS通过 <select> 更改时验证可见输入 JS
【发布时间】：2014-01-03 22:34:18
【问题描述】：

我有这个代码，尝试了一些但没有工作，或者我只是放错了代码。

<script type="text/javascript">
    $(document).ready(function(){
    $('#fac').hide();//div fac
    $('#stud').hide();

    $("#thechoices").change(function(){

    $("#all").children().show();

    $("#" + this.value).show().siblings().hide();   


    });

    $("#thechoices").change();
    });

    **if ($('#stud:not(:visible)')){
        $("#myform").validate({
           ignore: ":hidden"**
        });
    }

    </script>

我希望有备用的必需输入。我的表单的目标是隐藏和显示有关位置的输入（教师或学生作为选择选项）并存储到数据库中。为学生和教职员工显示不同的输入字段（出于 db 目的使用相同的名称）。但是，当我选择学生时（现在学生输入字段出现并且教职员工输入字段被隐藏），填写字段，然后单击提交按钮，我无法继续，因为教职员工的隐藏字段（通过 JS 和选择标签）会员也需要填写。

这是我的表格：

<form name = "myform">
<label>Select Position</label>
            <select id="thechoices" name="position">        
                <option value="stud">Student</option>
                <option value="fac">Faculty Member</option>
            </select>
<div id = "all">    
    <div id="stud">
        <input type="text" id="name" name="name" placeholder="Name" pattern="[a-zA-Z]+" required/>
        <input type="text" name="id_num" size="8" placeholder="8-digits only"required />
        <input type="submit"  value='Borrow' class="button radius">
    </div>

    <div id="fac">
        <input type="text" id="name" name="name" placeholder="Name" pattern="[a-zA-Z]+" required/>
        <input type="text" name="id_num" size="8" placeholder="8-digits only"required />
        <input type="submit"  value='Borrow' class="button radius">
    </div>
</div>

应该怎么做？我期待着解决这个问题。非常感谢你。我已经尝试使用资源（Here、Here 等）解决我的问题，但我不知道在哪里可以使用这些代码。

【问题讨论】：

您的 HTML 无效。 ID 必须是唯一的。
好的。我要更改这些 ID。

标签： javascript jquery html forms validation

【解决方案1】：

当您隐藏或显示输入时，您还可以更改它们的“必需”属性：

当你隐藏输入时：

$("#my_input").removeAttr("required");

当你显示输入时：

$("#my_input").attr("required","required");

在你的代码中这样做：

 $("#thechoices").change(function(){

    $("#all").children().show();

    $("#" + this.value).show().siblings().hide();

    var selection = this.value;   

     $("#" + this.value + "input").each(function()
      {
        $(this).attr("required","required");
      })

     $("#thechoices option").each(function()
      {
         if($(this).val()!=selection)
          {
             var id = $(this).val();
             $("#"+id+" input").each(function()
               {
                 $(this).removeAttr("required");   
               })
          }
       })

    });

【讨论】：

我只能说哇。

【解决方案2】：

我同意 cretzzzu3000。我还想在选择时隐藏或显示相关字段。这样用户就不必担心剩余的字段了。以下是我尝试过的。

$(document).ready(function(){
    $('select').on('change',function(){
        var selected = this.value,
            div_all = $(this).next('div'),
            selected_div = div_all.children('div#'+selected);

        div_all.find('input[type=text]').removeAttr('required');
        selected_div.find('input[type=text]').attr('required','required');
        selected_div.fadeIn().siblings('div').fadeOut();
    });
});

希望对您有所帮助。谢谢。

【讨论】：