2016-04-09 8 views
1

jQueryで入力ボックスが空であるかどうかを確認する簡単な検証が必要なのが望ましいです。しかし、これらは入力ボックスの動的配列です。コードは、より多くの意味を支援する必要があります入力ボックスの配列が空でないことを確認する

<input type="text" id="qtn" name="question" /> 
<input type="text" name="answer[]" /> 
<button type="button" id="btn"> Save </button> 

私は質問入力するための通常のアイデアは、このような何か伴うだろう理解:

$('#btn').click(function() { 
    var question = $.trim($('#qtn').val()); 

    // Check if empty of not 
    if (question === '') { 
     alert('Text-field is empty.'); 
     return false; 
    } else { 
     $('#form').submit(); 
    } 
}); 

方法answer[]入力タイプについて、この仕事があるだろうと同じようにダイナミックな回答数で、多くのユーザーが選択したことを確認したい場合は、これらすべてのボックスが満たされていることを確認してください。

ありがとうございます!

+0

すべての入力ボックスを検証する必要がありますか? – ameenulla0007

答えて

4

filter()メソッドを使用して、formの空のテキストボックスを見つけることができます。また、ボタンのクリックではなくformの送信時にこのチェックを行う必要があります。誰かがテキストボックスにフォーカスがある間にリターンキーを押してフォームを送信できるためです。これを試してみてください:

$('form').submit(function(e) { 
    var $emptyFields = $(this).find(':text').filter(function() { 
     return this.value.trim() == ''; 
    }); 

    if (!$emptyFields.length) { 
     e.preventDefault(); // stop the form submission 
     alert('Please fill out all fields'); 
    } else { 
     $form.submit(); 
    } 
}); 
+0

良い答え、フィルターの使用が大好きです。また、検証する入力に「必須」クラスを追加することをお勧めします。これにより、後で使用する必要のないフィールドを除外します。空のフィールドに「エラー」クラスを追加して、ユーザーのエラーを強調表示することもできます。 – NOBrien

+0

良い見え、これは今行くよ! – StackMeUp123

+0

フォームエリア内のどこかをクリックすると、実際にフォームが送信されるようです。入力テキストボックス内をクリックしても? – StackMeUp123

1

うん、この

$('#btn').click(function() { 
    var checkValidate = false; 
    $('input[type=text]').each(function() { 
      if(!$.trim($(this).val())){ 
      alert('Some fields are empty'); 
      checkValidate = true; 
      return false; 
      } 
    }); 
    if(!checkValidate) { 
     $('#form').submit(); 
    } 
}); 

Demo

1
$('#btn').click(function() { 
    var getTargetText = $(":text").filter(function() { return this.value==""; }); 
    if($(getTargetText[0]).val()=="") { 
     alert("Please Enter this Field"); 
     $(getTargetText[0]).focus(); 
     return false; 
    } 
}); 

のように試してみてください、ロリーMcCrossanの回答として、フィルタはオプションになります。私はちょうど実際のテキストボックスがnullであることをターゲットに変更しました。

関連する問題