May 1, 2012

Why do these alerts multiply?

Question by Elite Gamer

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.

Answer by bfavaretto

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

Answer by Starx

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

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!