CODEWITHSUNDEEP
javascriptjqueryhtml
Jonathan Bechtel
Jonathan Bechtel

Reputation: 3607

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

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.

Upvotes: 0

Views: 4197

Answers (3)

zfrisch
zfrisch

Reputation: 8660

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.

Upvotes: 0

Miguel
Miguel

Reputation: 20633

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>

Upvotes: 1

jackel414
jackel414

Reputation: 1686

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.");
    }
});

Upvotes: 4

Related Questions