Validating Form Using Custom Function

Question

I am trying to validate a form to check if the inputs are empty or not at THIS JSFIDDLE I was able to validate the form successfully when I used the whole body of the validateEmpty() function directly inside the .submit() function but just to keep everthing organized I tried to put everything inside a function (validateEmpty()) and just call it through the .submit() function but for what ever reason the validation process is not working!

Here is the Code I have:

$(document).ready(function() {  
function validateEmpty(){
        var abort = false;
        $("div.err").remove();
        $(':input[required]').each(function() {
            if ($(this).val()==='') {
                $(this).parent().after('<div class="err">This is a Requierd Field</div>');
                abort = true;
            }
        }) 
        if (abort) { return false; } else { return true; }
}
$('#myform').submit(function() {
validateEmpty();
    })
});

can you please let me know what I am doing wrong? Thanks

Renato Zannon · Accepted Answer · 2013-11-09 05:17:22Z

3

The validateEmpty function returns true or false at its end, but on your event handler you never return it, so jQuery never gets that value. All you need is to add a return call to your handler:

$('#myform').submit(function() {
  return validateEmpty();
});

Also, note that you can pass the function directly if you don't need to do anything extra:

$('#myform').submit(validateEmpty);

As requested in the comments, here goes two a way to parameterize the validateEmpty function:

function validateEmpty($inputs) {
  var abort = false;
  $("div.err").remove();

  $inputs.each(function() {
    if ($(this).val()==='') {
        $(this).parent().after('<div class="err">This is a Requierd Field</div>');
        abort = true;
    }
  });

  if (abort) { return false; } else { return true; }
}

$("#myform").submit(function() {
  // Take the 'required' inputs inside #myform only
  var $inputs = $(this, "input[required]");
  return validateEmpty($inputs);
});

edited Nov 9, 2013 at 5:17

answered Nov 9, 2013 at 4:34

Renato Zannon

30.2k7 gold badges42 silver badges47 bronze badges

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

4 Comments

Behseini Over a year ago

Ok it woks now thanks but honestly I didnt really understand what do you mean by "but you are not relaying it to jQuery"!

Renato Zannon Over a year ago

Sorry, I guess I was too terse. I just edited the answer, is it more clear now?

Behseini Over a year ago

Great thanks for perfect explenation just a quick question, is there any way to pass parameter through the validateEmpty(); in a way that to not have the '$(':input[required]')' hard coded and select the targets on submit function something like this: ' return validateEmpty(':input[required]');' once again thanks for your perfect hints

Renato Zannon Over a year ago

Done! See if this helps

Talha · Accepted Answer · 2013-11-09 04:48:42Z

1

Please add jquery framework in your jsfiddle example and try out

$('#myform').submit(function() {
  return validateEmpty();
});

answered Nov 9, 2013 at 4:48

Talha

6992 gold badges13 silver badges33 bronze badges

Collectives™ on Stack Overflow

Validating Form Using Custom Function

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related