jQueryの：すべてのフィールドは、一つの入力が値を持っている場合にのみ必要ください

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

    }); 

私は、すべての入力が空の場合、ユーザーがフォームを送信させて頂いておりたいが、の場合は1それらはすべてのフォームを完了するために必要な価値があります。入力は選択タグで、アプリケーションは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'}%> 

とIMは、オプションを取得し、そこからハッシュはこれです：

@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; 

});