Using .each() method to validate form fields in jquery

Question

I'm trying to build a function using the .each() method in jQuery that scans for empty input fields, highlights them in red, and then provides an alert message to let the user know what needs to change.

Here's my sample html:

<tr>
    <td><input type="number" class="amount required" name="amount" ></td>
    <td><input type="number" class="carrier required" name="carrier" ></td>
    <td><input type="number" class="kilo required" name="kilo" ></td>
</tr>

<button type="submit" class="analyze">Analyze</button>

Here's the function to loop through the table data and add the CSS:

$(".analyze").click(function() {
$(".required").each(function() {
    if ($(this).val() === "") {
        $(this).parents("td").addClass("redClass");
        alert("Looks like some of the fields aren't filled out correctly.  They're highlighted in red.");
    }
});
});

The issue is that the code goes through the array one-by-one and creates an alert message for every single empty cell. Ideally it'd add .redClass to the empty fields all at once and just present one alert message at the end if any are empty.

You can add a counter variable that increases by one each time a field fails validation. Then at the end if the variable is greater than zero, display the alert. — jackel414
– jackel414, Commented Apr 10, 2015 at 0:00
@jackel414 That was my initial thought as well but I ran into the same problem. I created a variable array input_fields = [], pushed the ".required" selector into the array if it was empty and then displayed the alert if input_fields.length > 1, but I got the same result and wasn't sure why. — Jonathan Bechtel
– Jonathan Bechtel, Commented Apr 10, 2015 at 0:03
Please edit your question to add that attempt. It might help troubleshoot the issue. — showdev
– showdev, Commented Apr 10, 2015 at 0:04
I didn't include that code here because it produced the same result as the code above, and since this was simpler thought it was a good idea to go with the more sparse code for the question. — Jonathan Bechtel
– Jonathan Bechtel, Commented Apr 10, 2015 at 0:04

jackel414 · Accepted Answer · 2015-04-10 00:02:48Z

4

Per my comment:

$(".analyze").click(function() {
    var counter = 0;
    $(".required").each(function() {
        if ($(this).val() === "") {
            $(this).parents("td").addClass("redClass");
            counter++;
        }
    });
    if(counter > 0){
        alert("Looks like some of the fields aren't filled out correctly. They're highlighted in red.");
    }
});

answered Apr 10, 2015 at 0:02

jackel414

1,6862 gold badges14 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Miguel · Accepted Answer · 2015-04-10 00:14:03Z

Try this:

$(".analyze").click(function () {
var req = $(".required");
req.each(function (i) {
    if ($(this).val() === "") {
        $(this).parent("td").addClass("redClass");
        req.error = true;
    }
});
if (req.error) {
    alert("Looks like some of the fields aren't filled out correctly.  They're highlighted in red."); }
});

.redClass {
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>
            <input type="number" class="amount required" name="amount">
        </td>
        <td>
            <input type="number" class="carrier required" name="carrier">
        </td>
        <td>
            <input type="number" class="kilo required" name="kilo">
        </td>
    </tr>
</table>
<button type="submit" class="analyze">Analyze</button>

zfrisch · Accepted Answer · 2015-04-10 00:24:35Z

Here's a fiddle http://jsfiddle.net/cga65pLh/1/

$(".analyze").click(function() { 
//on click of element with class "analyze"

$(".required").removeClass("redClass"); //remove redClass from all elements
//remove redClass from all elements with class required

x=true;
//turn x to true so that we know a pop up hasn't occurred yet

$(".required").each(function() {
// loop through each element with the class required

if ($(this).val() === "") {
// if the value is empty

    $(this).addClass("redClass");
    //add redClass to the element, turning the background of the element red.

    (x) ? 
 //check if x is true (this is a ternary statement)

 // if x is true do the following:
(alert("Looks like some of the fields aren't filled out correctly. They're highlighted in red."), 
x=false) 
:
// if x is false simply return false and don't do anything 
false;
}

});

});

What this does is, on click, it removes redClass from any element with class "required" this is so that it starts fresh each time the button is pressed. It then turns the value x to true. This way we can keep track of if there's an alert message or not. a.e if it's true there's been no alert.

For each element with class "required" we check if value is "". If it is, we apply the class "redClass" which turns the current box red and we check if x is true. If x is true we display an alert and turn x to false so that no other pop ups occur.

Collectives™ on Stack Overflow

Using .each() method to validate form fields in jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related