Why do these alerts multiply?

Question

OK, i have a couple of inputs. I have this code to validate them.

$("#form1").submit(function(){
    var isFormValid = true;

    $("#first_name").each(function(){
        if ($.trim($(this).val()).length == 0){
            isFormValid = false;
        }
    });

    if (!isFormValid) alert("Please Enter Your First Name");
    return isFormValid;
});

$("#form1").submit(function(){
    var isFormValid = true;

    $("#last_name").each(function(){
        if ($.trim($(this).val()).length == 0){
            isFormValid = false;
        }
    });

    if (!isFormValid) alert("Please Enter Your Last Name");
    return isFormValid;
});    

    $("#form1").submit(function(){
    var isFormValid = true;

    $("#dropdown").each(function(){
        if ($.trim($(this).val()).length == 0){
            isFormValid = false;
        }
    });

    if (!isFormValid) alert("Please Select Your Volunteer Choice");
    return isFormValid;
});

For some reason, i get a message after a message. What i was aiming for is that it only show me the next field that has not been field out, not all of them at the same time. If you have a question, please comment, it is hard to explain....do not down vote until you give me a chance to better explain.

Well, all three functions are attached to the `submit` handler, so all three functions will be executed every time you submit the form... — deceze, May 01 '12 at 00:19
i am sorry, i am young, and really do not know the difference... — Hunter Mitchell, May 01 '12 at 00:19
Let me just say this. Is there an easier, nicer, less complex way of doing this? I am really confused. — Hunter Mitchell, May 01 '12 at 00:21
Can someone help me find a solution...like a better way of validating a form...and easier...please... — Hunter Mitchell, May 01 '12 at 00:25

score 2 · Answer 1 · answered May 01 '12 at 00:25

2

I'm not familiar with JQuery but I think what is happening is your are binding 3 functions to your form, which means they all get called

when you want to do is create 1 function validate that calls your sub validations functions.

also I would recommend you change your sub validation methods to return the message instead of a boolean, this way you can display all the errors in 1 alert.

answered May 01 '12 at 00:25

Jason Rogers

19,194
27
79
112

Ok, is there any way you can show me this in a jsfiddle or something...i would greatly appreciate it! – Hunter Mitchell May 01 '12 at 00:26

score 2 · Answer 2 · answered May 01 '12 at 00:26

You have multiple alerts because you bind different functions to the submit event of the form: each one checks a different field and fires an alert if the field is empty.

You need to move the three validation steps in only one function and bind that function to the submit event.

Something like:

$("#form1").submit(check);


function check() {
    var isFormValid = true;
    var errors = array();

    $("#first_name").each(function(){
        if ($.trim($(this).val()).length == 0){
            isFormValid = false;
            errors.push("Please Enter Your First Name");
        }
    });

    $("#last_name").each(function(){
        if ($.trim($(this).val()).length == 0){
            isFormValid = false;
            errors.push("Please Enter Your Last Name");
        }
    });

    $("#dropdown").each(function(){
        if ($.trim($(this).val()).length == 0){
            isFormValid = false;
            errors.push("Please Select Your Volunteer Choice");
        }
    });

    if (!isFormValid) {
        var errorMsg = "";
        for (var i = 0; i < errors.length; i++) {
            errorMsg += errors[i] +  "\n";  
        }
        alert(errorMsg);    
    }

}

bfavaretto · Accepted Answer · 2012-05-01T00:38:50.277

2

Here is how to simplify your code, and make it work like intended.

First, since you use the same method to validate all the fields, wrap that in a function instead of repeating the code:

function isFieldEmpty(jQuerySelector) {
    return $.trim($(jQuerySelector).val()).length == 0
}

Second, use a single submit handler to check everything, and return false if any field does not pass validation:

$("#form1").submit(function(){

    if(isFieldEmpty('#first_name')) {
        alert("Please Enter Your First Name");
        return false;
    }

    if(isFieldEmpty('#last_name')) {
        alert("Please Enter Your Last Name");
        return false;
    }

    if(isFieldEmpty('#dropdown')) {
        alert("Please Select Your Volunteer Choice");
        return false;
    }

    // Will return true only if all fields passed
    return true;
});

edited May 01 '12 at 00:38

answered May 01 '12 at 00:29

bfavaretto

71,580
16
111
150

Is there any way you can show me on a jsfiddle....I am having trouble implementing it in my code.... – Hunter Mitchell May 01 '12 at 00:32
Here it goes. Also, my second alert was wrong (said First instead of Last), fixing it now. http://jsfiddle.net/2mAu7/2/ – bfavaretto May 01 '12 at 00:38
Hey! is there a way you could put an email verification together for me...please...i can not find one that is not complex...I would greatly appreciate it...the id="email" Oh! and thank you for the awesome answer! :) – Hunter Mitchell May 01 '12 at 00:41
Here is an answer on how to validate an email with JavaScript: http://stackoverflow.com/a/46181/825789 – bfavaretto May 01 '12 at 00:59

Starx · Answer 4 · 2012-05-01T00:46:00.740

This is because of the redundancy on your code, same function, same identifier, same logic, same event handler, useless each with an id selector.

The only thing different are the subjects. Here is my suggestion.

$("#form1").submit(function(){
    var errors = [];
    if($("#first_name").val().length == 0){
       errors.push("Please Enter Your First Name");
    }

    if($("#last_name").val().length == 0){
       errors.push("Please Enter Your Last Name");
    }
    // and so on

    if(var isFormValid = errors.length > 0) { 
         alert('you have errors'); 
         //errors contains all the error message if you need them
    }
    return isFormValid;
});

Why do these alerts multiply?

4 Answers4