如何使用JavaScript使用相同的功能对多个输入字段进行数据验证？

Question

I have a form that the user can use to enter 5 numbers. I have given all five input boxes the same id and a different name. I want to perform a validation of each input box. I want to be able to change background color of the input boxes based on the number they enter. For example, every input box with number in range 0-5 should change its background color to red and those between 6-10 should be green.

I have been able to write a code that would cause the color to change for one input box, however I cannot think of a way to optimize my code and avoid having to write the same code five times. Here is what I have got so far:

Form:

<form id="numbers">
    Number1: <input  id ="color" name="num1" type="number"  onchange="check();">
    <br><br>
    Number2: <input   id ="color" name="num2" type="number" onchange="check();">
    <br><br>
    Number3: <input   id ="color" name="num3" type="number" onchange="check();">
    <br><br>
</form>

Function:

function check() {
    var inputVal = document.getElementById("color").value;

    if (inputVal=="" || inputVal ==null) {
        document.getElementById("color").style.backgroundColor = "white";
    }
    else if (inputVal >= 0 && inputVal <= 5) {
        document.getElementById("color").style.backgroundColor = "red";
    }
    else if (inputVal >= 6 && inputVal <= 10) {
        document.getElementById("color").style.backgroundColor = "green";
    }
}

If I change inputVal to an array and use a for loop to save values of document.getElementById("color").value, it will save the first number entered by the user five times and will only update the color of the first box.

Here is what I tried:

var inputVal = new Array();
for(var i=0; i<5; i++) {
    inputVal[i]= document.getElementById("color").value;
}

Answer 1

You can have the clicked element as a parameter

function check(element) {
    var inputVal = element.value;

    if (inputVal=="" || inputVal ==null) {
        element.style.backgroundColor = "white";
    }

    else if (inputVal >= 0 && inputVal <= 5) {
     element.style.backgroundColor = "red";
    }

    else if (inputVal >= 6 && inputVal <= 10) {
     element.style.backgroundColor = "green";
    }
}

and pass the argument for each input

<form id="numbers">
    Number1: <input  id ="color1" name="num1" type="number"  onchange="check(this);" />
    <br/><br/>
    Number2: <input   id ="color2" name="num2" type="number" onchange="check(this);" />
    <br/><br/>
    Number3: <input   id ="color3" name="num3" type="number" onchange="check(this);" />
    <br/><br/>
</form>

But ID's must be unique. Here is a FIDDLE

Answer 2

You can use jquery to achieve this. First remove all the id value, they should not be same. Then use $('input').on('change', function (){ $(this).css("background-color","red")})... This way you can change colors based on values.

Answer 3

First, you can simplify your JavaScript by designating it to target this , since you're executing the function onchange .

Second, you should never leave an open-ended IF...THEN...ELSE, just bad habit for when they can result in BIG changes.

Third, as noted by others, id must be unique across the page.

Give this a try:

 function check(tar) { var inputVal = tar.value; if(inputVal == '' || inputVal == null) { tar.style.backgroundColor = 'white'; } else if(inputVal >= 0 && inputVal <= 5) { tar.style.backgroundColor = 'red'; } else if(inputVal >= 6 && inputVal <= 10) { tar.style.backgroundColor = 'green'; } else { tar.style.backgroundColor = 'yellow'; } } 

 <form id="numbers"> Number1: <input class ="color" name="num1" type="number" onchange="check(this);" /> <br><br> Number2: <input class ="color" name="num2" type="number" onchange="check(this);" /> <br><br> Number3: <input class ="color" name="num3" type="number" onchange="check(this);" /> </form> 

Here's a JSFiddle: http://jsfiddle.net/v1daq6sx/

I hope this helps. ^^

Answer 4

When the user changes their value it fires the function giveInputColor . You can use this one function to check infinitely many inputs with the class hello .

Working Example: http://codepen.io/anon/pen/bNqraN

HTML

<input class="hello"/>
<input class="hello"/>
<input class="hello"/>
<input class="hello"/>
<input class="hello"/>

jQuery

$('input.hello').keyup(function(event) {
    /* Act on the event */
    var value = $(this).val();
    $(this).css('backgroundColor', giveInputColor(value));
});

function giveInputColor(value) {
    // Give Input a color based on value parameter
    if (value >= 0 && value <= 5) return 'Red';
    else if (value >= 6 && value <= 10) return 'Green';
    else return 'White';
}

Answer 5

Without going into any major redesign of your logic (you could make it more efficient, but I focused on just getting the behavior that you are looking for), you can simply add the function to each element with an event listner, and then use e.target to determine which element is the one that changed and triggered the function call. Note - the aproach is a little more streamlined in jQuery, but I will stick with native JS here.

First off, lets give all of these inputs a common class ("number-field"), to make them easier to find:

<form id="numbers">
    Number1: <input id="num1" name="num1" type="number" class="number-field">
    <br><br>
    Number2: <input id="num2" name="num2" type="number" class="number-field">
    <br><br>
    Number3: <input id="num3" name="num3" type="number" class="number-field">
    <br><br>
</form>

I also made the id attributes unique and remover the onchange attributes, since we whill add the event listener dynamically.

Then we needed updated the check() function to accept the change event as a parameter ( e ) which is used in the first line of the function to determine the element that triggered the change event, using e.target (note - e.srcElement is to support older versions of IE).

function check(e) {
    var inputEl = e.target || e.srcElement;
    var inputVal = inputEl.value;

    if (inputVal == "" || inputVal == null) {
        this.style.backgroundColor = "white";
    }
    else if (inputVal >= 0 && inputVal <= 5) {
        this.style.backgroundColor = "red";
    }
    else if (inputVal >= 6 && inputVal <= 10) {
        this.style.backgroundColor = "green";
    }
}

The rest of the code is simply updated to point to the variable that was determined in the first line.

Finally, the function needed to be bound to the number inputs, so, using the class attribute that I added earlier, you can find all of those inputs, cycle through them, and add event listeners to each one.

var numInputs = document.getElementsByClassName("number-field");
for (i = 0; i < numInputs.length; i++) {
    numInputs[i].addEventListener('change', check);
}

I checked it out locally and it is behaving the way that I believe that you were wanting it to.