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
