Question

从这个问题中获取信息。

我有10个isNaN函数将验证的项目，如果发生验证错误，则应突出显示文本框。我的问题是：

是否有代码可以轻松突出显示任何错误的文本框？或者我是否必须为所有10个项目编写代码？接下来的JS代码是isNaN函数，到目前为止，项目numCoke将突出显示。

if (
    isNaN(document.drinkList.numFruit.value)
    || isNaN(document.drinkList.numWater.value)
    || isNaN(document.drinkList.numCoffee.value)
    || isNaN(document.drinkList.numCoke.value)
    || isNaN(document.drinkList.numTea.value)
    || isNaN(document.drinkList.numIce.value)
    || isNaN(document.drinkList.numCream.value)
    || isNaN(document.drinkList.numSugar.value)
    || isNaN(document.drinkList.numPinn.value)
    || isNaN(document.drinkList.numLemon.value)
) {
    window.alert("You must enter a numeric value!");
    document.drinkList.numCoke.style.borderColor = "red";
    document.drinkList.numCoke.style.backgroundColor = "red";

    return false;
}

HTML代码，仅显示前5个项目，其余部分相同。

<p>
    <input type="text" name="numFruit" size="3" value="0" /> Fruit Drink: A delicious mixture of various fruit juices. ($5.00)
    <br />

    <input type="text" name="numWater" size="3" value="0" /> Water: Crystal clear spring water. ($1.00)
    <br />

    <input type="text" name="numCoffee" size="3" value="0" /> Coffee: Freshly made coffee. ($4.00)
    <br />

    <input type="text" name="numCoke" size="3" value="0" /> Coke: Classic Coca-Cola. ($3.00)
    <br />

    <input type="text" name="numTea" size="3" value="0" /> Tea: Freshly made tea. ($2.00)
    <br />
</p>

Answer 1

通过将type属性从文本更改为数字，这会将input元素突出显示为红色。您的代码中的例外是

<input type="number" name="numFruit" size="3" value="0" /> Fruit Drink: A delicious mixture of various fruit juices. ($5.00)

Codepen example

Answer 2

这就是你想要的？

$(document).ready(function() {    
  	$('#form-test').submit(function(e){
  		
  		var error = false;
  		
  		if( $('input[name=field1]').val()==0 ) { 
  			document.getElementsByName("field1")[0].style.backgroundColor = "red";
  			document.getElementsByName("field1")[0].style.borderColor = "red";
  			error = true;
  		}else{
  			document.getElementsByName("field1")[0].style.backgroundColor = "white";
  			document.getElementsByName("field1")[0].style.borderColor = "white";
  			error = false;
  		}
  		if( $('input[name=field2]').val()==0 ) { 
  			document.getElementsByName("field2")[0].style.backgroundColor = "red";
  			document.getElementsByName("field2")[0].style.borderColor = "red";
  			error = true;
  		}else{
  			document.getElementsByName("field2")[0].style.backgroundColor = "white";
  			document.getElementsByName("field2")[0].style.borderColor = "white";
  			error = false;
  		}
  		if( $('input[name=field3]').val()==0 ) { 
  			document.getElementsByName("field3")[0].style.backgroundColor = "red";
  			document.getElementsByName("field3")[0].style.borderColor = "red";
  			error = true;
  		}else{
  			document.getElementsByName("field3")[0].style.backgroundColor = "white";
  			document.getElementsByName("field3")[0].style.borderColor = "white";
  			error = false;
  		}
  		if( $('input[name=field4]').val()==0 ) { 
  			document.getElementsByName("field4")[0].style.backgroundColor = "red";
  			document.getElementsByName("field4")[0].style.borderColor = "red";
  			error = true;
  		}else{
  			document.getElementsByName("field4")[0].style.backgroundColor = "white";
  			document.getElementsByName("field4")[0].style.borderColor = "white";
  			error = false;
  		}
  		if( $('input[name=field5]').val()==0 ) { 
  			document.getElementsByName("field5")[0].style.backgroundColor = "red";
  			document.getElementsByName("field5")[0].style.borderColor = "red";
  			error = true;
  		}else{
  			document.getElementsByName("field5")[0].style.backgroundColor = "white";
  			document.getElementsByName("field5")[0].style.borderColor = "white";
  			error = false;
  		}
  		if( $('input[name=fieldn]').val()==0 ) { 
  			document.getElementsByName("fieldn")[0].style.backgroundColor = "red";
  			document.getElementsByName("fieldn")[0].style.borderColor = "red";
  			error = true;
  		}else{
  			document.getElementsByName("fieldn")[0].style.backgroundColor = "white";
  			document.getElementsByName("fieldn")[0].style.borderColor = "white";
  			error = false;
  		}

  		if(error) { e.preventDefault(); alert('You must enter a numeric value!'); }
  		
  	});
  });

<!doctype html>
<html>
<head>
  <title>Example</title> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head> 
<body>
 <div class="container">
  <form id="form-test">
  	<fieldset>
  		<legend>Just Example</legend>
  		<div class="field">
    	<label>Field 1 : </label>
    		<input type="number" name="field1" value="0" min="0" max="999">
	    </div>
	    <div class="field">
	    	<label>Field 2 : </label>
	    	<input type="number" name="field2" value="0" min="0" max="999">
	    </div>
	    <div class="field">
	    	<label>Field 3 : </label>
	    	<input type="number" name="field3" value="0" min="0" max="999">
	    </div>
	    <div class="field">
	    	<label>Field 4 : </label>
	    	<input type="number" name="field4" value="0" min="0" max="999">
	    </div>
	    <div class="field">
	    	<label>Field 5 : </label>
	    	<input type="number" name="field5" value="0" min="0" max="999">
	    </div>
	    <div class="field">
	    	<label>Field n : </label>
	    	<input type="number" name="fieldn" value="0" min="0" max="999">
	    </div>

	    <button type="submit" id="validate">Validate</button>
  	</fieldset>    
  </form>
  </div>
  
    
</body>
</html>

验证错误后突出显示文本框

2 个答案: