【问题标题】:jQuery: How I can validate simultaneously checkbox and input text?jQuery:如何同时验证复选框和输入文本?
【发布时间】:2012-11-12 23:47:43
【问题描述】:

我有一个 div,其中有 2 个复选框和 2 个输入文本,但我想验证或检查所有输入是否为空以显示警报或错误并填充至少一个输入(复选框或文本),因为我没有'不做两个验证:1 用于复选框和 2 用于输入文本......有什么方法可以做到这一点?

HTML

<div id="t_disp">
    <p>
        <label for="7x24">7x24</label>
        <input id="7x24" name="7x24" type="checkbox"/>
    </p>
    <p>
        <label for="5x8">5x8</label>
        <input id="5x8" name="5x8" type="checkbox"/>
    </p>
    <p>
        <label for="especial">Especial</label>
        <input id="especial" name="especial" type="text"/>
    </p>
    <p>
        <label for="ticket">Ticket</label>
        <input id="ticket" name="ticket" type="text"/>
    </p>
</div>

提前致谢!!

【问题讨论】:

    标签: jquery html validation input checkbox


    【解决方案1】:

    要获得填充/检查了多少输入:

    var filled = $('#t_disp input').filter(function() { 
      return $(this).is('[type=checkbox]') ? this.checked : this.value;
    }).length;
    
    if ( filled ) {
       // at least one input is filled
    } else {
       // all inputs are empty
    }
    

    【讨论】:

      【解决方案2】:

      对于文本输入,您可以检查值。

      $('#especial').val();
      $('#ticket').val();
      

      对于复选框,您可以检查它们是否被选中。

      $('#7x24').attr('checked'); // returns 'checked' if checked
      $('#5x8').attr('checked');
      

      然后您只需将它们全部固定在一个条件下即可。如果它们全部为空或未选中,则显示错误。

      附:根据我的经验,id= 以数字开头并不是那么好用。

      【讨论】:

        【解决方案3】:

        你可以使用下面的函数

        function validate()
        {
        
            var isFormValid = false;
        
                $("#t_disp input:text").each(function()
                {
              if ($.trim($(this).val()).length > 0)
                   {      isFormValid = true;    }
                });
        
             var len =  $("#t_disp input:checked").length;
             if( len > 0 ) { isFormValid = true; }
        
                if (!isFormValid) 
                alert("Please fill atleast on one field.");
        
        }
        

        【讨论】:

          猜你喜欢
          • 2016-10-07
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2010-12-27
          • 2015-08-14
          • 1970-01-01
          相关资源
          最近更新 更多