5
\$\begingroup\$

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>
\$\endgroup\$
  • 1
    \$\begingroup\$ You need a cross browser solution. jQuery is one of them. \$\endgroup\$ – Raynos Nov 9 '11 at 19:39
  • 2
    \$\begingroup\$ This should be asked on stackoverflow as its a "how do I" question, not a code review. \$\endgroup\$ – Justin808 Nov 9 '11 at 20:41
  • 2
    \$\begingroup\$ @Justin808 Since the code is working in working condition, I figured code review would be better suited. \$\endgroup\$ – kht Nov 9 '11 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\$ – Winston Ewert Nov 10 '11 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\$ – Konrad Rudolph Jun 16 '12 at 9:25
11
\$\begingroup\$

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');
});
\$\endgroup\$
3
\$\begingroup\$

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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