Question

I am trying to do client-side validation using AJAX to check for empty fields on a simple form. If the field is empty, I want to notify the user that this is not valid. The form should not submit if there are any empty fields.

What’s the best way to do this?

Answer 1

Ajax is not required to do client-side validation. I can only assumed you’re interchanging the term with “jQuery”. In that case…

jQuery Validate is, by far, the mostly widely used jQuery validation plugin.

“The plugin is written and maintained by Jörn Zaefferer, a member of
the jQuery team, lead developer on the jQuery UI team and maintainer
of QUnit. It was started back in the early days of jQuery in 2006, and
updated and improved since then.”

Here is a working demo…

http://jsfiddle.net/EggSb/

jQuery:

$(document).ready(function() {

    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true,
                minlength: 5,
                // other rules
            },
            field2: {
                required: true,
                email: true,
                // other rules
            }
        }
    });

});

HTML:

<form id="myform">  
     <input type="text" name="field1" />
     <input type="text" name="field2" />
     <input type="submit" />
</form>