Easy jQuery Validator Setup

It seems like it always takes me a bit to figure out how to get the super-great jquery validator to work, and I have to go work my way through the documentation on the site — which has a lot of information, but makes it a little harder for me to just set it up and get it running. There is an easy method of implementation, but adding classes to elements, such as ‘required’, or ’email’. Unfortunately, on some versions of chrome, and earlier versions of Internet Explorer, this method didn’t seem to work, so I needed to use the more complex implementation and build out some jquery. The following should get it up and running easily and quickly.

This assumes a form with an id of ‘form-name’, and an text input, named ‘fld-email’ (this references the ‘name’ attribute, not the ‘id’ attribute) that is required, and needs to be checked that it is a valid email address. When the form is submitted, it will validate it, and if it passes, continue the submission process. If it doesn’t pass, it will keep the form visible without a page refresh, and highlight the fields that didn’t pass validation.

<script type="text/javascript" src="jquery-validator.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#form-name').validate({
        rules: {
            fld-email: {
                required: true,
                email: true
            }
        }
    });
    $('#form-name').submit(function () {
        if ($(this).valid() == true) {
            form.submit();
        }
    });
});
</script>