js验证多个同名输入字段答案

【问题标题】：Js validate multipe input fields with same namejs验证多个同名输入字段
【发布时间】：2014-09-24 12:45:43
【问题描述】：

好的，我有多个同名字段，我想检查所有字段是否不为空。如果我只有一个输入，我的代码就可以工作，但我不知道如何用更多输入来做到这一点

<input class = "new_input" type=text name="name[]"/>
<input class = "new_input" type=text name="name[]"/>

function validation(){

    var x = document.forms["form"]["name"].value;
    if(x ==='')
    {
       $("#warning").html("Morate uneti vrednost!").css('color','red');
    return false;
    }
    else
    {
        return true;
    }

}

例如，如果只输入一个字段，验证将起作用，我想检查所有字段

【问题讨论】：

对所有输入字段使用相同的类而不是相同的名称。

标签： javascript php jquery forms validation

【解决方案1】：

只使用 JS 你可以做类似的事情

<input class="new_input" type="text" name="name[]">
<input class="new_input" type="text" name="name[]">
<input class="new_input" type="text" name="name[]">
<input class="new_input" type="text" name="name[]">
<button onclick="validate()">Validate</button>

<script type="text/javascript">
  function validate() {
      var inputs = document.getElementsByTagName("input");
      var empty_inputs = 0;
      for(var i = 0; i < inputs.length; i++) {
          if(inputs[i].name.indexOf('name') == 0) { // check all inputs with 'name' in their name
              if (inputs[i].value == '') {
                  empty_inputs++;
                  console.log('Input ' + i + ' is empty!');
              }
          }
      }

      if (empty_inputs == 0) {
          console.log('All inputs have a value');
      }
  }
</script>

【讨论】：

【解决方案2】：

你已经标记了 jquery，所以我给出了一些在 jquery 中有效的东西 http://jsfiddle.net/8uwo6fjz/1/

$("#validate").click(function(){

    var x = $("input[name='name[]']")
    $(x).each(function(key,val){
    if($(val).val().length<=0)
    {
       $("#warning").html("Morate uneti vrednost!").css('color','red');

    }

    });

});

【讨论】：

点击按钮后提交按钮和表单重新加载不起作用

【解决方案3】：

试试这个：

function validate(){
    var error = 0;
    $.each( $("input[name='name[]']"), function(index,value){
        if( value.value.length == 0){
            $("#warning").html("Morate uneti vrednost!").css('color','red');   
            error = 1;
            return;
        }
    });
    if(!error){
        $("#warning").html(""); 
    }
}

在这里查看：jsFiddle

【讨论】：