JQuery form validation

Question

well my problem is that, i have a form, which i want to validate the fields using jquery, if the data is correct i let the submit continue, if no i disable the default behav

Answer 1

The proper way of checking a form submission is to check the form's submit event, not the button's click event. Change that around and what you have should work, although as it is right now it is always doing return false; so the form would never be sent. This should do it:

$('#myform').submit(function() {
        var motPasse1 = $('#form_motPasse').val();
        var motPasse2 = $('#form_motPasse2').val();
        if(motPasse1 != motPasse2){
            alert("Les deux mot de passe ne sont pas identiques");
            return false; // cancel form submission if passwords don't match
        }
        return true; // return true if no errors
});

Finally, I hope you are not keeping the alert there for production purposes. :) There are much, much better ways to display user notifications than an alert. Check out this question for some suggestions, although something as simply as having an error <div> and fading it in is nicer than the ugly default browser alert box.

Answer 2

Since you said you are using a form, you could bind to the form's submit event:

$('form#id').submit(function(){
  // your validation code
});

Answer 3

your problem is that you are always returning false it should look as follows:

$('#envoyerButton').click(function()
{
        var motPasse1 = $('#form_motPasse').val();
        var motPasse2 = $('#form_motPasse2').val();
        if( motPasse1 != motPasse2)
        {
                alert("Les deux mot de passe ne sont pas identiques");
                return false;
        }
        return true;
});

Answer 4

You should look at the JQuery Validation Plugin. It's maintained by one of the members of JQuery team and it helps simplify client side form validation.