检查至少5个输入字段中的2个不为空

时间:2018-02-01 07:28:30

标签: javascript jquery

如何检查五个输入字段中的两个并获取值?我使用的是jQuery,我不确定这段代码的正确定位是什么。也许你们可以帮助我。

这是我的代码:



$(document).ready(function() {
  $("#btnSubmit").on('click', function() {
    var val = $(".validate");
    var res = "";
    for (var i = 0; i < val.length; i++) {
      if (val[i].value) {
        if (i >= 2) {
          res = "Code Execution here";
        }
      }
    }
    alert(res);
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="validate" id="req1" name="req1">
<input type="text" class="validate" id="req2" name="req2">
<input type="text" class="validate" id="req3" name="req3">
<input type="text" class="validate" id="req4" name="req4">
<input type="text" class="validate" id="req5" name="req5">
<button type="button" class="btn" id="btnSubmit" name="submit">Submit</button>
&#13;
&#13;
&#13;

我得到的结果是,如果执行到达上面的2,它只触发res变量。

我想仅在输入至少两个字段时才提交表单。

谢谢!

5 个答案:

答案 0 :(得分:0)

将您的逻辑更改为计算for循环中具有值的字段数 比基数不计数更改警报消息

$(document).ready(function() {

  $("#btnSubmit").on('click', function() {
    var val = $(".validate");
    var res = ""; let count=0;
    for (var i = 0; i < val.length; i++) {
      if (val[i].value) {
        count++;
      }
    }
    if (count >= 2) {
          res = "Code Execution here";
        }
    alert(res);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="validate" id="req1" name="req1">
<input type="text" class="validate" id="req2" name="req2">
<input type="text" class="validate" id="req3" name="req3">
<input type="text" class="validate" id="req4" name="req4">
<input type="text" class="validate" id="req5" name="req5">
<button type="button" class="btn" id="btnSubmit" name="submit">Submit</button>

答案 1 :(得分:0)

您正在检查前两个以外的值是否具有值

实施支票的正确方法是:

    $(document).ready(function(){

    $("#btnSubmit").on('click', function(){
       var val = $(".validate");
       var res = "";
       var reqCount=0
       for(var i = 0; i < val.length; i++){
          if(val[i].value){
             reqCount++;
          }  
          if(reqCount >= 2){
              res = "Code Execution here";
            }

       }
      alert(res);
    });      
});

我不知道为什么在这个问题上有一个C#标签,如果你想在服务器端这样做,这将是一个完全不同的问题

答案 2 :(得分:0)

如果您要做的只是确保在用户提交表单之前至少填写了2个字段,您可以执行以下操作:

function isEmpty(validateElem) {
    return (validateElem === "" || typeof validateElem === 'undefined') ? true : false;
}

$(function(){
    var InputValidateCount = 0;
    $('form').submit(function(){
        $('input').each(function(e , i){
            if(!isEmpty($(this).val())) {
                InputValidateCount++;
            }
        });
        if(InputValidateCount < 2) {
            return false; // Stop from from submitting;
        }
    });
});

答案 3 :(得分:0)

您应该在提交前计算经过验证的字段。

如果这对您有所回应,请提前投票。 :P

&#13;
&#13;
$(document).ready(function() {

	  $("#btnSubmit").on('click', function() {
	  
		var val = $(".validate");
		var minimumNonEmptyFields = 2;
		var validatedNonEmptyFieldsCount = 0;
		
		for (var i = 0; i < val.length; i++) {
		  if (val[i].value) {
			validatedNonEmptyFieldsCount++;
		  }
		}
		
		if(validatedNonEmptyFieldsCount >= minimumNonEmptyFields) {
			alert( validatedNonEmptyFieldsCount + " fields are non-empty");
		} else {
			alert("Please fill " + (minimumNonEmptyFields - validatedNonEmptyFieldsCount) + " more fields");
		}
	  });
	});
&#13;
<!DOCTYPE html>
<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<title>
		Validate any 2 input
	</title>
</head>
<body>
	
	<input type="text" class="validate" id="req1" name="req1">
	<input type="text" class="validate" id="req2" name="req2">
	<input type="text" class="validate" id="req3" name="req3">
	<input type="text" class="validate" id="req4" name="req4">
	<input type="text" class="validate" id="req5" name="req5">
	<input type="text" class="validate" id="req6" name="req6">
	<button type="button" class="btn" id="btnSubmit" name="submit">Submit</button>

	<script></script>
</body>
</html>
&#13;
&#13;
&#13;

答案 4 :(得分:0)

如果至少两个输入不为空,则返回true,否则返回false。

如果返回是真的,则提交其他形式,否则不会。

&#13;
&#13;
$(document).ready(function() {
  $("#btnSubmit").on('click', function() {
    var val = $(".validate");
    var res = "";
    for (var i = 0; i < val.length; i++) {
      if (val[i].value) {
        if (i >= 2) {
          res = "Code Execution here";
          console.log("success");
          return true;
        }
      }
    }
    console.log("fail");
    return false;
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="validate" id="req1" name="req1">
<input type="text" class="validate" id="req2" name="req2">
<input type="text" class="validate" id="req3" name="req3">
<input type="text" class="validate" id="req4" name="req4">
<input type="text" class="validate" id="req5" name="req5">
<button type="button" class="btn" id="btnSubmit" name="submit">Submit</button>
&#13;
&#13;
&#13;