jQuery form validation before ajax submit

I am trying to add a simple form valadation to my jquery mobile webapp using the jQuery Validation Plugin.

The problem I have is the ajax runs straight away and doesnt wait for the validation.

I have included the html and js script below.

Could someone give me some pointers.



<!DOCTYPE html> 
    <?php require_once 'includes/config.php'; ?>
    <?php require_once 'includes/header.php'; ?>
    <title><?php echo "Type - " . $pageTitle; ?></title>


<div data-role="page" data-theme="engagea" id="words" class='words'>
	<div data-role="header" data-theme="engagea">
        <a href="#" data-icon="home" data-role="button" data-transition="reverse slide" data-theme="engagea" style="font-size:18px" id="quitWords">Home</a>
	<!-- /header -->
    <div data-role="content">
        <!-- Words JS --> 
        <script src="words/wordsjs.js"></script>
        <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }

        <form action="" id="form" name="form" method="post">
            <div data-role="fieldcontain">    
                <label for="nname" style="font-size:16pt;padding:9px;"><strong>Enter Name:</strong> </label>
                <input id="nname" name="name" type="text"  value="" maxlength="32" style="background-color:White;font-size:16pt;"/>
                <label for="ssubject" style="font-size:16pt;padding:9px;"><strong>Subject:</strong> </label>
                <input id="ssubject" name="subject" type="text" value="" maxlength="32" style="background-color:White;font-size:16pt;"/>
                <input type="hidden" name="messageType" id="text" value="" />
            <label for="mmessage" style="font-size:16pt;"><strong>Text Entry:</strong></label>
            <textarea id="mmessage" name="message"  style="background-color:White;height:350px;font-size:16pt;" class="required"></textarea> 
            <font size="+2"><button id="button" onclick="return submitWords(this.form);" data-theme="e" data-icon="check">Save</button></font>
    <!-- /content -->

	<?php require_once 'includes/footer.php'; ?>
<!-- /page -->


Open in new window

function submitWords(frm) {

function submitWords1(frm) {

    $.blockUI({ message: '<h1><img src="images/busy.gif" /><br>Submitting...<br>Please Wait...</h1>' }); 
	//setTimeout($.unblockUI, 5000); 	
	var name = encodeURIComponent(frm.name.value)
	var subject = encodeURIComponent(frm.subject.value)
	var message = encodeURIComponent(frm.message.value)

      	type: 'POST',
      	url: 'words/submitwords.php',
	  	dataType : 'json',
	  	data: "name="+name+"&subject="+subject+"&message="+message,
		cache: false,
		async: true,
	success: function(data) {
			if (data.status == "success") {
				//alert("SUCCESS. " + data.id);

				$.blockUI({ message: '<h1><img src="images/big-tick.jpg" width="160" height="140" /><br><font color="#009900">Success!</font><br>Words submitted.</h1><br>' }); 
				window.location.href = "index.php";
				}, 4000);
				//alert("Image Save Successful!");
			} else {
				alert("Oops. " + data.message);
		error: function(jqXHR, exception) {
            if (jqXHR.status === 0) {
                alert('Not connect.\n Verify Network.');
            } else if (jqXHR.status == 404) {
                alert('Requested page not found. [404]');
            } else if (jqXHR.status == 500) {
                alert('Internal Server Error [500].');
            } else if (exception === 'parsererror') {
                alert('Requested JSON parse failed.');
            } else if (exception === 'timeout') {
                alert('Time out error.');
            } else if (exception === 'abort') {
                alert('Ajax request aborted.');
            } else {
                alert('Uncaught Error.\n' + jqXHR.responseText);
	    return false;

Open in new window

Steve TinsleyAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

By default AJAX is asynchronous so your script will not wait for your
AJAX response before it continues. Setting 'async' to false will have
the script wait.

You can check how the change the ajax async here: http://api.jquery.com/jQuery.ajax/
Greetings sjtinsley83,

The easiest way to do this is to wrap your ajax call in functions. For instance:

$(document).ready(function() {

      function validation()
              // your validation code ...
              // return 1 if validation succedded

      function ajaxCall() 
             $.ajax({ ... }) // your  ajax code

      function load() 
            //Validation will be executed as a result, so the ajaxCall will be used only if validation passed.
            if (validation()) ajaxCall();

      load(); // we call the load function


Open in new window

Please, by no means use async to false. Remember what AJAX stands for, async to false WAITS until the server responds, which may BLOCK your website. If you develop a plugin, or code that uses this feature and by some reason it fails, you may hang the client forever.

There are multiple design patterns that can be used to handle AJAX requests without blocking the server. Feel free to investigate more; there are plenty of documentation related on why async to false is a really bad idea.

Hope it helps!
Steve TinsleyAuthor Commented:
Hi JJ,

GOSH... I'm learning by the second which is great.. I'm still a little confused with how I will call the validation then the ajax submit functions.

Currently I have a button <button id="button" onclick="return submitWords(this.form);" data-theme="e" data-icon="check">Save</button> which calls the corrent function with the correct variables.

If I change it to the above function layout, will the button have a onclick for load(this.form)?

Also... why do I need $(document).ready(function() { in the javascript file? Can the functions not just sit there untill they are called? Im sure there is a good reason for this...

Many Thanks

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Oh, the document ready is just an enhancement to make sure all your DOM was loaded before any operation can be performed :) it's just a technique I recommend but of course the functions can be just there.

When you put return in a onclick button what happens is that that default behavior relies on the result of the called function. Buttons don't have a default reaction, but for instance, if you would had that in a <input type="submit"> what would happen is that the form wouldn't be submitted if the validation failed.

In this case, you can just simply do this:

<!-- HTML -->
<button id="button" onclick="load(submitWords(this.form));" data-theme="e" data-icon="check">Save</button>


function load(validation)
 if(validation) ajaxCall();

Open in new window

Does that make sense? I'm trying to make sure you change the less code possible while trying to understand the control flow; you could ready it like this:

* The validation is triggered when the button is pressed. A HTML object <form> is sent to the validation function.
* The validation function returns true or false depending if the <form> object and its content passed the validation.
* The returned value then is passed to other function, this one called load.
* Load receives an argument and checks if it's true or false. If true -which means the validation passed- then performs the ajax call.

Now, remember buttons don't have a default behavior in HTML. If you want to add functionality to a button, you do it through Javascript (which is fine), but you have to make sure the user receives feedback about what's going on when he clicks a button, since the browser won't do anything. I think you understand AJAX enough since you are using a correct aproach, but I just wanted to point that out.

Steve TinsleyAuthor Commented:
Hi JJ,
Thanks so much for the help!
I think im getting there with this but still haven't got it working correctly.
Ive taken what you had said and played around with it for a bit. I have the validation working but it wont submit the ajax request...

I know its my knowledge of javascript but im learning!

Ive just signed up for a jsfiddle account and posted a simplified version of what I want to do: http://jsfiddle.net/stinsley/q2h6Z/2/ 

Can you offer any more advise?

Ive added 2 buttons but only the first does something...
<button id="button" onclick="return submitWords(this.form);" data-theme="e" data-icon="check">Save A</button>

<button id="button" onclick="load(submitWords(this.form));" data-theme="e" data-icon="check">SaveB</button>

Also if i add $(document).ready(function() { nothing works...


Ah no problem my friend, we are all here to learn!

You were ALMOST there! You just forgot to add "return true" in the validation() function!

Jsfiddle allows you to use the DOMReady function (which is pretty much the reason why the .ready does not work); I usually use "onDomReady" instead of "no wrap (head)" so I don't have to use the ready function.

Oh, you can even test ajax posts in jsfiddle! Read the docs and it will be easy enough to actually simulate your whole script instead of with just functions!

Btw, here's the code with the return true in case you got lost ;) http://jsfiddle.net/q2h6Z/7/

Code strong!

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Steve TinsleyAuthor Commented:
Thanks so much for the help!

I wondered if I could ask you another question.....
I have only started looking into this but it could be complex...

I want to be able to display a WAITING screen on a php page whilst the value of ready in a mysql database is 0. When I update the mysql READY field to 1 the waiting screen goes.

The goal eventually will be:
User click to voting.php
User sees waiting box
When I want the user to start voting the first question shows.
User can then complete all questions to the end.

Do you have any thought on this??

I thought perhaps have an ajax call every second until ready =1...

Any other ideas.


Hey! Thanks for the points!

Sure, there are multiple ways to do this! The easiest one is to just ajax your voting page and handle ONE ajax request with the .complete() method of the ajax object (you can read about it here! http://api.jquery.com/jQuery.ajax/); so you know when you request is complete and then perform and action.

For instance, if you request and you get 0, you can trigger an ajax request again until you get 1. How many times you can do this? As many times as you want, use a function within your success callback function:

success: function(data) { if(!data) ajax_load_again() }

Open in new window

There is other technique, which I think it's the best if you have no idea when the value will turn to 1. It's called long polling, and pretty much what you do is set timeouts for your ajax calls and request them every X seconds (you have to decide how many seconds is good, 1 second will hit your server... well, once every second, while 10 seconds may be too much).

It's easy to set a long polling request! Just read about setTimeout() in javascript or just put the code within a loop with a delay()

   updatable_vale = ajax_load();

Open in new window

Steve TinsleyAuthor Commented:
Long polling looks like the job!

When you say put the code within a loop with a delay() do you mean in the php script?
Would that mean the ajax call would be fairly similar?
Steve TinsleyAuthor Commented:
Ive opened another post and just posted an idea of the code.

Would you mind having a look?
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.