Question

I have a form (signup.php) that pops up in a nyroModal window when I click a button:

<input value="Edit" class="nyroModal" type="button" href="signup.php">

I would like to use some form of AJAX validation (to check if the user name has been taken, for example) before submitting the form.

I had the following in mind: When the user clicks the ‘submit’ button. it calls javascript function with onClick that sends the required fields to a PHP script, which returns whether the fields are valid. Then, if the field is invalid, it notifies the user, but when the field is valid, it submits the form via something like $('#formid').submit();. Easy enough in theory.

BUT

Problem is, when the nyroModel gets the new form from a URL, and creates a div in the DOM with the contents in it, Firefox completely ignores any <script> tags. Using Firebug, I can see it actually gets the <script> tags with the response, but Firefox ignores them. Also, I can’t create a jQuery function on the page that the model is called from, because when the document is created, the form doesn’t exist in DOM yet.

Any ideas how to solve this?

Answer 1

Try adding a submit handler to the form:

onClick='return frmSubmit()'

In this handler, you first serialize the form’s data, and submit this to the validation script. Be sure to return false after issuing the request, as it is done asynchronously. In the response callback, you implement the following: if the response indicates that the input is valid, you programatically submit the form with the .submit()-method. If, however, the reponse indicates that something’s wrong (you’ll have to supply the feedback in JSON-format), attach some constructive feedback to the form for the user to read.

Don’t forget to catch the keypress event, and prevent the form from being submitted when Enter is pressed, as it will bypass your validation function.

And, uhm, one suggestion: it might be better to do all the validation on the client-side to start with, which is usually enough. You probably heard that client-side validation can be circumvented, so there is still a need for server-side checking. However, I always feel that if a user decides to mess with the system seriously, then it isn’t necessary to provide constructive feedback. A simple message indicating failure will suffice. So, first check the input with plain Javascript. If something’s wrong, provide feedback. If, however, the server receives invalid input (which means that the client-side validation has been bypassed), just notify the user that he failed.