JQuery connection validation

Question

There is an Ajax form in the modal window (appears with the help of magnific-popup). The form is working (we send a request, we receive a response, we clear the fields, we hide the form, we show a successful message). I hung up the validation (jquery validation plugin) and now when clicking on the submit button, the form is sent with empty fields and a window appears with information about the successful submission.

You can see it here (a small scroll down, a slick-header will appear and the button "Send a request for Mars", click on the form that pops up. If you do not fill out the fields, click "Send a request", then everything will go, although it should not.

On lokalka validation works, on the server there. If you again click on the form button (at the very top of the screen), then validation will work.

Please help me identify the problem.

$("#form-1").validate({ rules: { name: { required: true, minlength: 2 }, code: { required: true, digits: true, minlength: 3, maxlength: 3 }, tel: { required: true, digits: true, minlength: 10 } }, messages: { name: { required: "Неверно заполнено поле :(", minlength: "Минимальное кол-во символов 2" }, code: { required: "Неверно заполнено поле :(", digits: "Обязательно цифры", minlength: "Минимальное кол-во символов 3" }, tel: { required: "Некоректный номер телефона :(", digits: "Обязательно цифры", minlength: "Минимальное кол-во символов 10" } } }); $("#form-1").submit(function() { var th = $(this); $.ajax({ type: "POST", url: "mail.php", data: th.serialize() }).done(function() { $(".success").addClass("visible"); setTimeout(function() { // Done Functions th.trigger("reset"); $(".success").removeClass("visible"); }, 400); $("#form-1").hide(); $('.mfp-bg.mfp-ready').css({ 'display': 'none' }); $('#popUpMessage').removeClass('hiddenDiv'); setTimeout(function() { $('#popUpMessage').addClass('hiddenDiv'); }, 4000); }); return false; });

 .form-1 { margin: auto; position: relative; width: 514px; height: auto; background-color: white; box-shadow: 2.5px 4.3px 38px rgba(0, 0, 1, 0.42); font-family: $MuseoSansCyrl; padding: 15px; } .border__frame { border: 1px solid rgb(225, 225, 225); padding: 40px 65px; } .heading { font-size: 24px; color: rgb(24, 24, 24); font-weight: 900; margin-bottom: 15px; } span { color: rgb(226, 67, 62); } .description { color: black; font-size: 17px; font-weight: 100; margin-bottom: 25px; } input { background-color: white; border: 1px solid rgba(70, 70, 70, 0.2); border-radius: 30px; padding: 20px 30px; display: block; width: 100%; max-width: 340px; color: rgb(42, 42, 42); font-family: $MuseoSansCyrl; font-weight: 300; font-size: 16px; margin-bottom: 15px; @include placeholder(rgb(42, 42, 42)); } .index__phone { background-color: white; border: 1px solid rgba(70, 70, 70, 0.2); border-radius: 30px; padding: 20px; display: inline-block; text-align: center; width: 100%; max-width: 85px; color: rgb(42, 42, 42); font-family: $MuseoSansCyrl; font-weight: 300; font-size: 16px; margin-bottom: 15px; margin-right: 10px; @include placeholder(rgb(42, 42, 42)); } .number__phone { background-color: white; border: 1px solid rgba(70, 70, 70, 0.2); border-radius: 30px; padding: 20px; display: inline-block; text-align: left; width: 100%; max-width: 240px; color: rgb(42, 42, 42); font-family: $MuseoSansCyrl; font-weight: 300; font-size: 16px; margin-bottom: 15px; @include placeholder(rgb(42, 42, 42)); } #popUpMessage { margin: auto; position: absolute; top: 50%; left: 30%; height: 466px; background-color: rgb(226, 67, 62); box-shadow: 2.5px 4.3px 38px rgba(0, 0, 1, 0.42); z-index: 1045; color: white; text-align: center; padding: 15px; } .border__frame { border: 1px solid rgb(225, 225, 225); padding: 40px 65px; } .title { color: white; font-size: 24px; margin-bottom: 50px; } figure { margin: 0 auto 40px; } span { color: white; font-size: 17px; display: block; margin-bottom: 20px; } .hiddenDiv { display: none; } //validation label#name-error { color: white; position: absolute; top: 178px; right: -120px; border: 1px solid red; border-radius: 30px; padding: 20px 10px; width: 300px; text-align: center; background-color: rgb(53, 53, 53); box-shadow: 2.5px 4.3px 21px rgba(226, 67, 62, 0.75); } label#tel-error { color: white; position: absolute; top: 257px; right: -120px; border: 1px solid red; border-radius: 30px; padding: 20px 10px; width: 300px; text-align: center; background-color: rgb(53, 53, 53); box-shadow: 2.5px 4.3px 21px rgba(226, 67, 62, 0.75); } label#code-error { display: none!important; } input.error { border: 1px solid red!important; } input.valid { border: 1px solid rgb(62, 189, 168)!important; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="form-1" id="form-1"> <div class="border__frame"> <div class="heading">Отправьте <span>заявку на марс!</span> </div> <div class="description">И наш марсианский менеджер перезвонит вам в ближйшее время.</div> <input type="text" name="name" maxlength="30" placeholder="Ваше имя" required> <input class="index__phone" name="code" type="tel" maxlength="3" placeholder="123" required> <input class="number__phone" name="tel" type="tel" maxlength="10" placeholder="325-54-94" required> <button class="btn-submit-mars" type="submit">Отправить заявку на марс</button> </div> </form> <div id="popUpMessage" class="hiddenDiv"> <div class="border__frame"> <div class="title">Наши поздравления!</div> <figure> <img src="img/shape-rocket.png" alt="pic"> </figure> <span>Заявка успешно отправлена на Марсоход. В ближайшее время наш менеджер свяжется с Вами </span> </div> </div>

Failed to parse SourceMap: http://martynuk.esy.es/css/bootstrap.css.map Failed to parse SourceMap: http://martynuk.esy.es/js/jquery.min.map
Well, this does not affect the process itself, I poured it onto another server, there is no console on it, but the result is the same

Andrew B Andrew B 1.605 four sixteen · Accepted Answer · 2016-10-07T23:41:26

You forgot to check the validity of the form before sending the request.

Use $("#form-1").valid() to check.

 $("#form-1").validate({ rules: { name: { required: true, minlength: 2 }, code: { required: true, digits: true, minlength: 3, maxlength: 3 }, tel: { required: true, digits: true, minlength: 10 } }, messages: { name: { required: "Неверно заполнено поле 'Имя'", minlength: "Минимальное кол-во символов 2" }, code: { required: "Неверно заполнено поле 'Код'", digits: "Обязательно цифры", minlength: "Минимальное кол-во символов 3" }, tel: { required: "Некоректный номер телефона", digits: "Обязательно цифры", minlength: "Минимальное кол-во символов 10" } } }); $("#form-1").submit(function() { if ($("#form-1").valid()) { var th = $(this); $.ajax({ type: "POST", url: "mail.php", data: th.serialize() }).done(function() { console.log('form submitting is done!'); }); } else { console.warn('your form is invalid!'); } return false; });

 input, button { display: block; margin-bottom: 10px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script> <form id="form-1"> <div> <p>Отправьте заявку на марс!</p> <p>И наш марсианский менеджер перезвонит вам в ближйшее время.</p> <input type="text" name="name" maxlength="30" placeholder="Ваше имя" required> <input name="code" type="tel" maxlength="3" placeholder="123" required> <input name="tel" type="tel" maxlength="10" placeholder="325-54-94" required> <button type="submit">Отправить заявку на марс</button> </div> </form>

Jqueryvalidation.org plugin documentation

If you again click on the form button (at the very top of the screen), then validation will work.

This is the result of validation validation after the first form submission.

Thank you, I really forgot, they helped out, but such a question, now for some reason, after checking for validation and sending, the mail falls, but the form is not cleared.

JQuery connection validation

1 answer 1

More articles: