CODEWITHSUNDEEP
javascriptform-submit
user3350731
user3350731

Reputation: 972

Why my form does submit even if there's errors?

At first i had this and it worked perfect but it submits even if there's errors : 

 $(document).ready(function(){
      $('input[name=subdomain]').keyup(subdomain_check);
      $('input[name=password]').keyup(password_strenght);
      $('input[name=c_password]').keyup(password_check);
      $('input[name=email]').keyup(email_check);
  });

So i change it to this , and now it doesn't call the function inside !

$(document).submit(function(e){
    $('input[name=subdomain]').keyup(subdomain_check);
    $('input[name=password]').keyup(password_strenght);
    $('input[name=c_password]').keyup(password_check);
    $('input[name=email]').keyup(email_check);
    return false;
});

What's wrong here ?
This is the whole code : http://pastie.org/8812743

Upvotes: 0

Views: 106

Answers (3)

SajithNair
SajithNair

Reputation: 3867

 $(document).ready(function(){
      $('input[name=subdomain]').keyup(subdomain_check);
      $('input[name=password]').keyup(password_strenght);
      $('input[name=c_password]').keyup(password_check);
      $('input[name=email]').keyup(email_check);

      function subdomain_check (e) {
         // these functions should set a global variable to false if validation fails
      }

      function password_strenght (e) {
         // these functions should set a global variable to false if validation fails
      }

      function password_check (e) {
         // these functions should set a global variable to false if validation fails
      }

      function email_check (e) {
         // these functions should set a global variable to false if validation fails
      }

      $(document).submit(function(e){
          return global_var; // where global_var is the variable set by the validating functions
      }

  });

Upvotes: 0

Greg Burghardt
Greg Burghardt

Reputation: 18783

You are not attaching the keyup event handlers until the submit event occurs. At that point the user has finished typing in all the fields.

Move the calls to $(...).keyup(...) back to the dom ready event. You actually need one additional event handler to check user input:

$(document)
    .ready(function(){
        $('input[name=subdomain]').keyup(subdomain_check);
        $('input[name=password]').keyup(password_strenght);
        $('input[name=c_password]').keyup(password_check);
        $('input[name=email]').keyup(email_check);
    })
    .submit(function(e) {
        // validate input
        // if invalid, show error message and call e.preventDefault();
    });

The general user workflow is:

  1. The domready event in jQuery is invoked, attach the keyup event handlers
  2. The user types in the form fields, triggering the keyup handlers
  3. The user submits the form, triggering the submit handler
  4. The submit handler validates the form input, and if invalid, shows the user an error message and prevents the submit event from continuing.

Upvotes: 1

MamaWalter
MamaWalter

Reputation: 2113

dont know exactly what your validation functions return but, if its a boolean you could maybe just do something like this:

$("#formId").submit(function(e){
    if(!subdomain_check() || !password_strenght() || !password_check() || !email_check()) {
        e.preventDefault();
    }
});

Upvotes: 0

Related Questions