入力配列要素をJQueryで手作業で検証する

Question

<input type="text" name="member_name[]" size="13" value=""> 
<input type="text" name="member_name[]" size="13" value=""> 
<input type="text" name="member_name[]" size="13" value=""> 
<input type="text" name="member_name[]" size="13" value=""> 

jquery validate pluginを使用せずに空白でないようにこれらの4つのフィールドを検証するにはどうすればよいですか？

Answer 1

$('input:submit').click(function() { 
    $('form').submit(function(e) { 
     $("input:text[name^='member_name']").each(function() { 
      if (!$.trim($(this).val()).length) { 
       alert('Name Field should not leave empty'); 
       return false; // or e.preventDefault(); 
      } 
     }); 
    }); 
}); 

Answer 2

あなたのフィールドのいずれかが空の場合は、submitイベントハンドラとprevent the default behaviorを登録することにより、フォームの送信をキャンセルすることができます。

$("form").submit(function(event) { 
    if ($("input:text[name='member_name\\[\\]'][value='']", this).length) { 
     window.alert("No member name should be empty."); 
     event.preventDefault(); 
    } 
}); 

EDIT：のNaveenが正しく指摘するように、上記のコードはまだ提出しますフィールドに空白だけが含まれている場合は、フォームを作成します。

$("form").submit(function(event) { 
    if ($("input:text[name='member_name\\[\\]']", this).filter(function() { 
      return $.trim(this.value) == ""; 
     }).length) { 
     window.alert("No member name should be empty."); 
     event.preventDefault(); 
    } 
}); 

Answer 3

var valid = true; 
$('input').each(function(){ 
    if($(this).val() == "") { 
    valid = false; 
    } 
}); 

// use valid here 

Answer 4

var invalidInputs = $('input').filter(function() { 
    return $(this).val() == ""; 
}); 

var valid = invalidInputs.length == 0 

Answer 5

は、最も進歩、単純な&明確な方法：あなたが問題を解決するためにfilter()で$.trim()を使用することができます。

$("form").submit(function(event) { 

    var inputLength = $('input[type="text"]').val().length; // check for value length 

    if ($('input').val().length > 0) { 
     // submit if input value is length > 0 
     alert('Form submitted.'); 
    } 
    else { 
     // error if input value is NOT length > 0 
     alert('Fill the form.'); 
     event.preventDefault(); 
    } 
});