mercredi 5 août 2015

Why I need to click twice on the submit button to submit my form?


I have a form which is validated with jquery and once it's submitted I want to call a function (track_forms function to track it with Mixpanel).

It's working alright except one thing: I have to click twice to the button to submit the form. The first click doesn't do anything. I guess there's a problem using submitHandler since the issue came after implementing that.

Does anybody has an idea what's the issue?

Thanks

  $.validator.addMethod(
    'ContainsAtLeastOneNumber',
    function (value) { 
        return /[0-9]/.test(value); 
    },  
    'Please enter at least 8 characters containing numbers and letters.'
);

$.validator.addMethod(
    'ContainsAtLeastOneLetter',
    function (value) { 
        return /[a-z]/.test(value); 
    },  
    'Please enter at least 8 characters containing numbers and letters.'
);


$('#signupForm').validate({    
rules: {
    email: {
        required: true,
        email: true
    },
    password: {
        minlength: 8,
        ContainsAtLeastOneNumber: true,
        ContainsAtLeastOneLetter: true,
        required: true
    },
    confirmPassword: {
        required: true,
        equalTo: "#password"
    },
    terms: {
        required: true,
    }
},
messages: {
    email: "Please enter a valid email address.",
    password: {
      required: "Please enter at least 8 characters containing numbers and letters.",
      minlength: "Please enter at least 8 characters containing numbers and letters.",
    },
    confirmPassword: {
      required: "Please enter at least 8 characters containing numbers and letters.",
      equalTo: "The passwords are not matching.",
    },
    terms: {
        required: "You must agree with our Terms of Service.",
    },
},
highlight: function(element) {
    var id_attr = "#" + $( element ).attr("id") + "1";
    $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    $(id_attr).removeClass('glyphicon-ok').addClass('glyphicon-remove');         
},
unhighlight: function(element) {
    var id_attr = "#" + $( element ).attr("id") + "1";
    $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    $(id_attr).removeClass('glyphicon-remove').addClass('glyphicon-ok');         
},
errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if (element.attr('name') == 'terms' ) {
        error.insertAfter(".some-class");
        } else {
        error.insertAfter(element);
        }
    },
submitHandler: function(form) {
 mixpanel.track_forms("#signupForm", "Created Account");
    } 
 });



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire