Can anyone help with my above query. I can not get it to validate befor sending the form. It only does after any empty form is submitted
Jason On Jul 28, 7:33 pm, Jason <jaskelly3...@gmail.com> wrote: > I have created a new site that has a contact page and am trying to use > the Forms plugin and Validation plugin. I can get the validation > plugin to work fine and submit the form when it is valid but I am > trying to use AJAX to update a div when the form has been successfully > sent. All that is happening is it sends the form then validates > meaning I get empty emails.. this is my code > > <script> > // prepare the form when the DOM is ready > $(document).ready(function() { > var options = { > beforeSubmit: function() { > return $('#signupForm').validate().form(); > }, > > target: '#output2', // target element(s) to be > updated with > server response > beforeSubmit: showRequest, // pre-submit callback > success: showResponse // post-submit callback > > // other available options: > //url: url // override for form's 'action' > attribute > //type: type // 'get' or 'post', override for > form's 'method' attribute > //dataType: null // 'xml', 'script', or > 'json' (expected server response type) > //clearForm: true, // clear all form fields after > successful submit > //resetForm: true // reset the form after successful > submit > > // $.ajax options can be used here too, for example: > //timeout: 3000 > }; > > // bind to the form's submit event > $('#signupForm').submit(function() { > // inside event callbacks 'this' is the DOM element so we > first > // wrap it in a jQuery object and then invoke ajaxSubmit > $(this).ajaxSubmit(options); > > // !!! Important !!! > // always return false to prevent standard browser submit and > page navigation > return false; > }); > > $("#signupForm").validate({ > rules: { > sendto: { > required: true > }, > fullname: "required", > lastname: "required", > email: { > required: true, > email: true > }, > enquiry: { > required: true > } > > }, > messages: { > sendto: "Please tell us who you wish to Contact", > fullname: "Please enter your Name", > lastname: "Please enter your lastname", > email: "Please enter a valid email address", > enquiry: "Please leave us a message" > } > }); > > }); > > // pre-submit callback > function showRequest(formData, jqForm, options) { > // formData is an array; here we use $.param to convert it to a > string to display it > // but the form plugin does this for you automatically when it > submits the data > var queryString = $.param(formData); > > // jqForm is a jQuery object encapsulating the form element. To > access the > // DOM element for the form do this: > // var formElement = jqForm[0]; > > alert('About to submit: \n\n' + queryString); > > // here we could return false to prevent the form from being > submitted; > // returning anything other than false will allow the form submit > to continue > return true; > > } > > // post-submit callback > function showResponse(responseText, statusText) { > // for normal html responses, the first argument to the success > callback > // is the XMLHttpRequest object's responseText property > > // if the ajaxSubmit method was passed an Options Object with the > dataType > // property set to 'xml' then the first argument to the success > callback > // is the XMLHttpRequest object's responseXML property > > // if the ajaxSubmit method was passed an Options Object with the > dataType > // property set to 'json' then the first argument to the success > callback > // is the json data object returned by the server > > alert('status: ' + statusText + '\n\nresponseText: \n' + > responseText + > '\n\nThe output div should have already been updated with the > responseText.');} > > </script> > > and the webpage ishttp://blackandmcfadden.com.au/newsite/fiat/contact.html > > Some help please