How to return from a function completely in JQuery

Question

I have a form, in which contains a number of input fields. When the user click the submit button, I would like to validate the user input. Because this form (suppose it's alike a resume) could contains a few similar field, such as year, school, diploma, etc. So I use JQuery attribute selector to choose these similar fields and use JQuery each function to iterate them for validation. My code is like below.

$("#submit_btn").click(function () {
            $('input[name="education_year[]"]').each(function(){
                if (!$(this).val()) {
                    alert("education year is empty !");
                    return;
                }
            });

            $('input[name="diploma[]"]').each(function(){
                if (!$(this).val()) {
                    alert("diploma field is empty");
                    return;
                }
            });
        });

because the user may leave several fields empty, so i want my code gives out only one alert. However, in the code above, the return keyword doesn't help. It seems to me that it is more like a break statement to exit the each function. Can anyone tell me how to end the click function ?

I'd highly recommend taking a look at jQuery validate to help with this - bassistance.de/jquery-plugins/jquery-plugin-validation — Russ Cam
– Russ Cam, Commented May 9, 2013 at 12:42
@RussCam I was trying to use that plugin, but found some difficulties. So finally I gave it up for the moment..... — Ensom Hodder
– Ensom Hodder, Commented May 9, 2013 at 12:46
@EnsomHodder I would also recommend using the valiation plugin it is very is to use — Arun P Johny
– Arun P Johny, Commented May 9, 2013 at 12:58

Arun P Johny · Accepted Answer · 2013-05-09 12:40:59Z

2

Try

$("#submit_btn").click(function () {
    var valid = true;
    $('input[name="education_year[]"]').each(function(){
        if (!$(this).val()) {
            alert("education year is empty !");
            valid = false;
            return false;
        }
    });

    if(!valid){
        return;
    }

    $('input[name="diploma[]"]').each(function(){
        if (!$(this).val()) {
            alert("diploma field is empty");
            valid = false;
            return false;
        }
    });
});

answered May 9, 2013 at 12:40

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

2 Comments

Ensom Hodder Over a year ago

yep, I also thought of using a flag variable, but I am wondering doesn't Jquery provide a more elegant way to do it ? If not, I will use this solution. :)

Arun P Johny Over a year ago

@EnsomHodder because when you use a each callback and return you are returning from the anonymous function not from the click callback method

Rory McCrossan · Accepted Answer · 2013-05-09 12:43:29Z

1

return in your code will simply stop execution of the current iteration in the loop and move to the next. You need to store a variable containing the state of your validation and check that. Try this:

$("#submit_btn").click(function () {
    var isValid = true;

    $('input[name="education_year[]"]').each(function(){
        if (!$(this).val() && isValid) {
            alert("education year is empty !");
            isValid = false;
        }
    });

    $('input[name="diploma[]"]').each(function(){
        if (!$(this).val() && isValid) {
            alert("diploma field is empty");
            isValid = false;
        }
    });
});

answered May 9, 2013 at 12:43

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Comments

Malkin · Accepted Answer · 2013-05-09 12:41:41Z

0

You can return true; or return false; on a submit to choose whether or not the submit continues after your logic.

answered May 9, 2013 at 12:41

Malkin

1592 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to return from a function completely in JQuery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related