39726

Jquery validator plugin ajax submition not triggering

Question:

I have a problem with my the Jquery validator (<a href="http://bassistance.de/jquery-plugins/" rel="nofollow">http://bassistance.de/jquery-plugins/</a>) plugins submitHandler function. The form is validated correctly and the invalid handler message triggers correctly, but the submitHandler functions will not trigger correctly and the ajaxSubmit function does not trigger corectly. Any one see what I have done wrong? Any help would be most wellcome.

<script type="text/javascript"> $(document).ready(function() { var submitMessage = $('#submit-message'), messageContainer = submitMessage.find('span'), loading = $('#loading'); function showSuccess(message) { messageContainer.text(message) messageContainer.attr('class', 'success'); } function showFailure(message) { messageContainer.text(message) messageContainer.attr('class', 'failure'); } $("#contact-form-info").validate({ rules: { contact_Name: { minlength: 2, maxlength: 50, required: true }, contact_Foretag: { minlength: 1, maxlength: 50 }, contact_Email: { required: true, email: true }, contact_Subject: { required: true, minlength: 5, maxlength: 50 }, contact_Message: { required: true, minlength: 10, maxlength: 5000 } }, submitHandler: function(form) { var options = { beforeSubmit: function() { loading.show(); }, success: function() { showSuccess('Thank you! Your email has been submitted.'); form.reset(); loading.hide(); }, error: function() { showFailure("We're sorry, your email could not be sent. Please try again later."); loading.hide(); } }; $(form).ajaxSubmit(options); return false; }, invalidHandler: function() { showFailure('There were some problems with your submission.'); } }); }); </script>

Here is my code in jsFiddle. <a href="http://jsfiddle.net/JwNmK/" rel="nofollow">http://jsfiddle.net/JwNmK/</a>

Answer1:

<strong>OP's comment</strong>:

<blockquote>

"when I submit a valid form it is submited as a 'normal' form, I am redirected to the process.php page"

</blockquote>

You definitely need a return false at the end of your submitHandler callback function when using ajax.

submitHandler: function (form) { // your ajax return false; },

Recommend

  • What is the use of a session store?
  • Uncaught TypeError: $(…).select2 is not a function
  • Button click event not firing in jQuery
  • How do I get HTML corresponding to current DOM tree?
  • chrome.tabs.executeScript only fires when the Developer Console is open
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • Lost migrations and Azure database is now out of sync
  • Deselecting radio buttons while keeping the View Model in synch
  • Getting last autonumber in access
  • HTML download movie download link
  • JavaScriptCore crash on iOS9
  • Updating server-side rendering client-side
  • Change an a tag attribute in JavaScript based on screen width
  • Importing jscolor library in angular 2
  • Web-crawler for facebook in python
  • QuartzCore.framework for Mono Develop
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Arrays break string types in Julia
  • How to format a variable of double type
  • VB.net deserialize, JSON Conversion from type 'Dictionary(Of String,Object)' to type '
  • A cron job substitute?
  • How to delete a row from a dynamic generate table using jquery?
  • trying to dynamically update Highchart column chart but series undefined
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • using HTMLImports.whenReady not working in chrome
  • How to set the response of a form post action to a iframe source?
  • How do I configure my settings file to work with unit tests?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • How to get Windows thread pool to call class member function?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Authorize attributes not working in MVC 4
  • EntityFramework adding new object to nested object collection
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal