Question

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

Was it helpful?

Solution

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.

OTHER TIPS

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

  });
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top