Simple form validation script

Question

This is a simple form validation script.

I'd like to:

• improve the jQuery validation
• simplify the jQuery code

Questions:

1. Should I be exporting pure JS validation to avoid potential conflicts with other libraries that users might have installed?
2. Is it worth the effort or should I stick with my jQuery code?
3. Is there a way to reduce the chances for conflict with the jQuery code without having to reworking it to JS?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
$(document).ready(function() {

// when submit button is pressed
$("#form_name").submit(function() {

    var pass = true;

    var errors = {
        required    : 'this field is required',
        email       : 'enter a valid email address',
        numeric     : 'enter a number without spaces, dots or commas',
        alpha       : 'this field accepts only letters &amp; spaces'
    };

    var tests = {
        email       : /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
        numeric     : /^[0-9]+$/,
        alpha       : /^[a-zA-Z ]+$/
    };

    // clear error messages
    $(".error").removeClass();
    $(".error-message").remove();

    function displayError(el, type) {
        $(el).parent().addClass("error").find('label').append('<span class=\"error-message\"> &#8211; ' + errors[type] + '</span>');
    }

    $('.required, .email, .numeric, .alpha').each(function(){
        var value       = $(this).val();
        var valueExists = value.length === 0 ? false : true;

        var required    = $(this).hasClass('required');
        var email       = $(this).hasClass('email');
        var numeric     = $(this).hasClass('numeric');
        var alpha       = $(this).hasClass('alpha');

        if (required && value.length===0) {
            displayError(this,'required');
            pass=false;
        }

        else if (email && valueExists && !tests.email.test(value)) {
            displayError(this,'email');
            pass=false;
        }

        else if (numeric && valueExists && !tests.numeric.test(value)) {
            displayError(this,'numeric');
            pass=false;
        }

        else if (alpha && valueExists && !tests.alpha.test(value)) {
            displayError(this,'alpha');
            pass=false;
        }
    });

    return pass;
});
});
/*]]>*/
</script>

Answer 1

To avoid conflict with any other libraries, wrap your code using the jQuery function, and additionally call jQuery.noConflict();

The only conflict you may have is if somebody else imported an object named jQuery into the global namespace.

Reference: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Example:

jQuery.noConflict();
jQuery(document).ready(function($){
 //This is a jQuery function
 $('.myClass');
});

Answer 2

To protect from conflicting libraries wrap your code in an immediately invoked function expression

(function ($, undefined) {
    $(document).ready(function() {
        // ...
    });
} (jQuery.noConflict()));