jqueryの条件が機能しません

Question

私は複数ページのフォームを開発中です。これは私が<textarea>に同じ条件を追加しようとしています次にinput type=text と正常に動作します

$('.next').click(function(){ 
    if($('input[required]:visible').each().val() == false) { 
     alert('Not all required fields are filled'); 
    } 
    else{ 
    $('.next').show(); 
    $('form.idealforms').idealforms('nextStep'); 
    } 
}); 

jsfiddle

：

$('.next').click(function(){ 
    if($('input[required]:visible').val() == false && $('textarea[required]:visible').val() == false) { 
     alert('Not all required fields are filled'); 
    } 
    else{ 
    $('.next').show(); 
    $('form.idealforms').idealforms('nextStep'); 
    } 
}); 

jsfiddle for this

は、私は、ifの条件を記述しようとしています

これで、textareaが必要ですORの入力を導いたが、両方で動作するはずですか？私は間違って何をしていますか？

Answer 1

あなたのjsFiddleには、textarea（空白）のコンテンツがあります。私はあなたの最善の策は、それらをチェックして空の文字列''と比較する前に値をトリミングすることだと思う。

if ($('input[required]:visible').val().trim() == '' || $('textarea[required]:visible').val().trim() == '') { 
    ... 
} 

また、私はあなたが必要と考えるものである、あなたのandorに変更しました。

Answer 2

jQuery .val()は、BooleanではなくTextboxまたはTextareaの内容を提供します。したがって、jQuery .trim().lengthを使用することができます。それは最初に空白を削除し、次にTextboxまたはTextareaの長さを数えます。これにより、空白がそこにあることが保証され、動作します。 Working fiddle

$('.next').click(function(){ 

    if($('input[required]:visible').val().trim().length==0 || $('textarea[required]:visible').val().trim().length==0) { 
     alert('Not all required fields are filled'); 
    } 
    else{ 
     alert('All required fields are filled'); 
    } 
}); 

Answer 3

比較する前に値をtrimにする必要があります。

以下は必須の入力を処理するためのコードです（チェックボックスの場合は、ラジオボタンで異なる処理が必要です）。

$('.next').click(function() { 
     var valid = true; 
     $.each($('[required]:visible'), function() { 
     if (!$.trim($(this).val())) { 
      valid = false; 
      return false; 
     } 
    }); 

    if (!valid) { 
     alert('Not all required fields are filled'); 
    } else { 
     alert('All required fields are filled'); 
    } 
});