Hello. How do I fix the script so that the form is sent correctly? I just can not understand what is wrong.

$(".form").validate({ rules: { name: { required: true, minlength: 2, maxlength: 32 }, phone: { required: true, minlength: 10 } }, messages: { name: { required: 'Заполните имя' }, phone: { required: 'Заполните телефон' } }, submitHandler: function(form) { $(".form").submit(function() { //Change var th = $(this); $.ajax({ type: "POST", url: "mail.php", //Change data: th.serialize() }).done(function() { $('.form-phone').addClass('form-active-phone'); th.trigger("reset"); setTimeout(function(){ $('.form-phone').removeClass('form-active-phone'); }, 3000); return false; }); return false; }); } });

    2 answers 2

    Remove the line

     $(".form").submit(function() { //Change

    and corresponding to her

     });

    I.e:

     submitHandler: function(form) { var th = $(form); $.ajax({ type: "POST", url: "mail.php", //Change data: th.serialize() }).done(function() { $('.form-phone').addClass('form-active-phone'); th.trigger("reset"); setTimeout(function(){ $('.form-phone').removeClass('form-active-phone'); }, 3000); }); return false; }

    The manipulations with 'form-active-phone' and setTimeout not clear.

    • After that, the form is not sent, and the site goes to the beginning of the document, and a bunch of information from the form is added to the url. - Max Denaro
    • This does not affect the operation of the script, but only adds external changes to the user upon successful sending. - Max Denaro
    • For a long time I was stupid, somewhere there was still a mistake, but your script helped. Thank you - Max Denaro

    When you first click, the form validates and binds to the form of the onsubmit event, and the second click sends the message.

    See: Validation works only the second time JS

    • I looked and still did not realize. Does submit generally need to be taken out of validate? not using submitHandler. - Max Denaro