Form Validation using JavaScript and jQuery

Question

I'm making a validation form like so:

<form id="registerform" method="post" onsubmit=return checkformdata();>
    <input type="text" name="fname" value=""/>
    <input type="text" name="lname" value=""/>
    <input type="checkbox" name="privacy" value="1"/>
</form>

checkformdata() Validates only the first name and last name for the checkbox field, which is done using jQuery. Here is the code that I tried:

jQuery(document).ready(function() {
  // Handler for .ready() called.
  jQuery('#registerform').submit(function() {
    if (!jQuery("#privacy").is(":checked")) {
      alert("none checked");
      return false;
    }
  });
});

It is also working but the alert field is comes twice for example firstname is empty then alert for first name and alert for checkbox comes up. I want to show the alert for the checkbox after the checkformdata(); function. Is it possible to give the priority first for javascript then the jquery validation.

Thanks in Advance.

You attached two different handlers to the submit event. It will run twice. Why don't you validate everything in the same place? — emerson.marini
– emerson.marini, Commented Aug 22, 2013 at 13:57
I am using some other theme in wordpress. I saw that function checkformdata() is 20 to 25 files are there i didn't find out that validation code in the theme file(hard to find) so i decide this way using the firebug i checked that form id and checkbox id by this i am doing using jquery through plugin.(Not editing theme file) — Vignesh Pichamani
– Vignesh Pichamani, Commented Aug 22, 2013 at 14:07

Martijn · Accepted Answer · 2013-08-22 14:12:08Z

You should only have one functions, which is the second method you are using. Both functions are called now, which is not wat you want. Also, you can use $ instead of jQuery.

Dont use return false! Unless you know what you are doing. Use preventDefault():

$('#registerform').submit(function(event) {
    var errorString = [];
    // START VALIDATION
    if ($("#privacy").is(":checked") ) {
        errorString.push("none checked"); // Save for later
    }
    if ($('[name="fname"]').val).length===0) {
        errorString.push("No firstname"); // Save for later
    }
    if ($('[name="lname"]').val).length===0) {
        errorString.push("No lastname"); // Save for later
    }

    // CHECK IF ERRORS ARE FOUND
    if( errorString.length !==0){
        event.preventDefault(); // stop the submitting
        // Do whatever you like with the string, for example;
        alert( "Something went wrong: \n"+errorString.join("\n") ); // alert with newlines 
    }
    // NO ERRORS FOUND, DO SOMETHING
    else{
        // all good. Do stuff now
    }

});

Collectives™ on Stack Overflow

Form Validation using JavaScript and jQuery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related