using jquery vs php to reduce load

Question

Hi

I'm setting up a registration page, and I'm using PHP primarily to verify the data.

I've realized that using a client-driven language for some of the validation will reduce the workload from the server. I don't have much knowledge in jquery, but I'm looking for code that will determine the correct syntax of an email (ex, one '@' and no funny characters).

Additionally, is there a function in jquery where every time, after a certain event (on click, on keyup) it preforms a php script and display the results without reloading? I'm looking for something that will allow me to give the user fast feedback on more complicated functions (like looking up an email's DNS to make sure its' real, checking if the username exists ect.)

Can someone point me to a resource on this?

Answer 1

It should be noted that client side validation should never be relied upon, but should exist to enhance the user experience. You MUST perform validation on the server as client side code is easily circumvented.

Answer 2

There is a very widely used validation plugin for jquery that you can find here:

http://plugins.jquery.com/project/validate

It contains many "common" validation rules built in, and you can add your own. Email is there by default.

But always remember to always validate on the server side. You can add client side validation to increase responsiveness, but remember that a malicious user can easily bypass any javascript validation.

Answer 3

You need to validate with both PHP and js. I seen some places/people who are still using iE5, I won't trust js in those cases.

Answer 4

Go with the answer TM provides - validation plugin and always validate server side.

How to do a click event, ajax to the server and then show a message:

$("a.dnscheck").click(function() {

    $.get('http://blah.com/dnscheck.php', 
           { 'email' : $("input.email").val() }, 
           function(data) {
               //called on ajax response
               if(data == 'valid') {
                   //update dom with ok message
               } else {
                   //update dom with bad email message
               }

           });
});

See http://docs.jquery.com/Ajax if you want anything more complex.