This is a simple form validation script.

I'd like to:

  • improve the jQuery validation
  • simplify the jQuery code


  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">
$(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

    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) {

        else if (email && valueExists && !tests.email.test(value)) {

        else if (numeric && valueExists && !tests.numeric.test(value)) {

        else if (alpha && valueExists && !tests.alpha.test(value)) {

    return pass;
  • 1
    \$\begingroup\$ You need a cross browser solution. jQuery is one of them. \$\endgroup\$
    – Raynos
    Commented Nov 9, 2011 at 19:39
  • 2
    \$\begingroup\$ This should be asked on stackoverflow as its a "how do I" question, not a code review. \$\endgroup\$
    – Justin808
    Commented Nov 9, 2011 at 20:41
  • 2
    \$\begingroup\$ @Justin808 Since the code is working in working condition, I figured code review would be better suited. \$\endgroup\$
    – kht
    Commented Nov 9, 2011 at 20:56
  • 1
    \$\begingroup\$ I have the power to shift the question to StackOverflow, but I'm not sure thats the correct thing to do. The question seems to mostly be about improving the existing code which belongs here. Ideally, the part about how to avoid conflict should have been asked on StackOverflow. \$\endgroup\$ Commented Nov 10, 2011 at 14:45
  • 1
    \$\begingroup\$ Are you really serving the document as XML? Otherwise the CDATA section makes no sense (HTML doesn’t recognise it) – and MSIE doesn’t render XML so I doubt it. For that reason, it’s generally a good idea to have JavaScript in external files, since you technically would need to escape & and < as entities otherwise. \$\endgroup\$ Commented Jun 16, 2012 at 9:25

2 Answers 2


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


 //This is a jQuery function

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.