Geek Answers Handbook

Validating form with jQuery before submitting via Ajax request

I am trying to get my form for validation before using an Ajax request to submit the form to my php script. I looked through stackoverflow and did not find something that worked. I'm still new to jQuery, so naked with me.

I have 3 inputs and a submit button:

<input type="text" name="full-name" id="full-name" value="" placeholder="Full Name" /> <input type="text" name="email" id="email" value="" placeholder="Email" /> <textarea name="message" id="message" value="" rows="8" placeholder="Message"></textarea> <input type="submit" id="contact-submit" class="contact-submit" value="Submit"> <div id="messageResponse" class="center" style="display:none;"></div> $(document).ready(function() { function validator(){ return $('form').validate(); } $('form').on('submit', function(e) { e.preventDefault(); $.ajax({ dataType: 'html', type: 'post', url: 'mail.php', data: $('#contact-form').serialize(), beforeSubmit: validator, success: function(responseData) { $('#contact-submit').remove(); $('#messageResponse').fadeIn(1000); $('#messageResponse').html(responseData); }, error: function(responseData){ console.log('Ajax request not recieved!'); } }); // resets fields $('input#full-name').val(""); $('input#email').val(""); $('textarea#message').val(""); }) });

Should I use a plugin for this? All I want is a name, email address and verification message with a red border. This gives me a big headache, and I will meet with the client tomorrow to complete the site. I do not ask if I can find a working solution.

I also tried using this: jQuery Form Validator Plugin

+4
source share
2 answers

beforeSubmit is a malsup ajaxForm plugin option, not jQuery ajax. Run ajax only if validator () returns true.

 $('form').on('submit', function(e) { e.preventDefault(); if (validator()){ $.ajax({...}); } });

Besides:

Instead of using multiple lines asking jQuery to select the same object more than once, you can use chaining.

 $('#messageResponse').fadeIn(1000).html(responseData);

Similarly, in order to do the same with multiple elements

 $('#full-name, #email, #message').val("");
+3
source

Is your $('form').validate() Validate $('form').validate() reference to the jQuery Validate plugin ?

If so, there is no point in using a submit handler when the jQuery Validate plugin already has a built-in submit event callback callback function , and this is where you should put your ajax.

According to the documentation for the Validate plugin , the submitHandler callback function:

"A callback to handle the actual presentation when the form is valid. The form as the only argument. Replaces the default submission. The right place to submit the form via Ajax after it is validated."

Try using this code if your ajax function is correct:

 $(document).ready(function () { $('#myform').validate({ // initialize the plugin // your rules and options, submitHandler: function (form) { $.ajax({ dataType: 'html', type: 'post', url: 'mail.php', data: $(form).serialize(), success: function (responseData) { $('#contact-submit').remove(); $('#messageResponse').fadeIn(1000); $('#messageResponse').html(responseData); }, error: function (responseData) { console.log('Ajax request not recieved!'); } }); // resets fields $('input#full-name').val(""); $('input#email').val(""); $('textarea#message').val(""); return false; // blocks redirect after submission via ajax } }); });

DEMO: http://jsfiddle.net/kUX2N/

+4
source

More articles:


All Articles