Question

这是我的代码：

$('form').submit(function(){

            if ( $('#base_agrad').val() === '' && $('#req_agrad').val() === '' && $('#req_agrad1').val() === '' && $('#req_agrad2').val() === ''){
                return true;
            }else if ( $('#base_agrad').val() === '' || $('#req_agrad').val() === '' || $('#req_agrad1').val() === '' || $('#req_agrad2').val() === ''){
                $('#error_agrad').html('*Completa tu agradecimiento!');
                return false;
            }           

    });

我想要的是，如果所有输入都为空，则让用户提交表单，但如果其中一个输入有值，则需要填写所有表单。输入是选择标记，应用程序在RoR中。 jQuery正在运行但如果一切都是空的，它不允许我提交表单。所有选项的默认值都是nul。

这是html表单：

            <%= f.select :base_agradecimiento, options_for_select(@paquete[:base][:tipo].each do |x| [x] end),{}, {:id => 'base'} %>            
            <p>Seleccione el color de la Base:</p>
            <%= f.select :base_agradecimiento_color, options_for_select(@paquete[:base][:color].each do |x| [x] end),{}, {:id => 'req_agrad'} %>
            <p>Seleccione el tamaño de la Base:</p>         
            <%= f.select :base_agradecimiento_tamaño, options_for_select(@paquete[:base][:tamaño].each do |x| [x] end),{}, {:id => 'req_agrad1'} %>
            <p>Seleccione el fondo de la Base:</p>
            <%= f.select :base_agradecimiento_fondo, options_for_select(@paquete[:base][:fondo].each do |x| [x] end),{}, {:id => 'req_agrad2'}%>

我得到选项的哈希是这样的：

@paquete = {
        base: {
            color: [nil,'blue', 'black', 'perl'],
            fondo: [nil,'F/Yute', 'F/Beige', 'F/Negro', 'F/Cristal'],
            tipo: [nil,'Jirafa', 'Petatillo', 'Estrella'],
            tamaño: [nil,'Doble', 'Triple'],
            placa: {
                tipo: [nil,'Normal', 'Con Corte'],
                color: [nil,'Chocolate', 'Marfin']  
                }
            },
        anillo: {
            nombre: [nil,'alianza rectangular', 'rombos dorado'],
            tamaño: [nil,1,2,3,4,5,6,7,8,9,10,11,12]
            }
        }

Answer 1

更简洁的方法是使用filter()返回具有值的元素集合，然后检查该集合的长度

$('form').submit(function(){
   // could simplify selector by using a common class
   var $inputs =  $('#base_agrad, #req_agrad, #req_agrad1, #req_agrad2');

   // filter the inputs that have value and get length of result
   var hasValueCount = $inputs.filter(function(){
          return $(this).val();
       }).length;

   // only valid if none selected or all selected
   var isValid = !hasValueCount || hasValueCount === $inputs.length;

   if(!isValid){
      // display error message    
   } 
   return isValid; 

});

jQuery：只有在一个输入有值时才需要所有字段

1 个答案: