Question

I have a simple class project where i’m doing some form validation. We have to use some basic regex expressions to validate input. I have this code in an external js file.

I have a function that captures the onsubmit event, and returns the value of the validation function of whether or not to proceed with the postback.

The problem is when i call the RegEx.test() method my validation functions stops and returns, and the postback proceeds inadvertently. Also strangly if i create a regex object using the “new RegEx()” the same thing happens. I’m lost as to why.

Here’s my code:

$(document).ready(function() {

    // onsubmit event    
    $('form').submit(
        function() {
            return validation();
        }
        );

    // form validation
    function validation() {

        resetErrors();

        //variables
        var validates = true;
        var errorString = "";
        //var isEmail = new RegEx('^.+@.+\..+$'); // function stops here if line is uncommented and kicks off the postback?
        //alert("harro new regex?"); // does not run if above line is uncommented


        var isEmail = "/^.+@.+\..+$/"; // this doesn't stop the function
        alert("harro isEmail direct regex string assignment"); // runs

        var isZipCode = "/^(\d{5}$)|(^\d{5}-\d{4}$)/"; // this doesn't stop the function
        alert("harro isZipCode direct regex string assignment"); // runs

        //firstname
        if (!$('#firstName').val().trim()) {
            validates = false;
            $('#firstName').addClass('error');
            errorString += "First Name is blank. <br />";
        }
        //lastname
        if (!$('#lastName').val().trim()) {
            validates = false;
            $('#lastName').addClass('error');
            errorString += "Last Name is blank. <br />";
        }
        //email
        if (!$('#email').val().trim()) {
            validates = false;
            errorString += "Email is blank. <br />";
            $('#email').addClass('error');
        }
        // if this runs the test, the function stops here
        else if (!isEmail.test(email.value)) {
            validates = false;
            errorString += "Please enter a valid email address. <br />";
            $('#email').addClass('error');
        }
        alert("harro rest of function after email test?")// does not run if "else if" is ran

        //address
        if (!$('#address').val().trim()) {
            validates = false;
            $('#address').addClass('error');
            errorString += "Address is blank. <br />";
        }

        //zipcode
        if (!$('#zipCode').val().trim()) {
            validates = false;
            $('#zipCode').addClass('error');
            errorString += "Zipcode is blank. <br />";
        }
        // if this runs the test, the function stops here
        else if (!isZipCode.test(zipCode.value)) {
            validates = false;
            $('#zipCode').addClass('error');
            errorString += "Please enter a valide zip code. <br />";
        }
        alert("harro rest of function after zipcide test?")// does not run if "else if" is ran


        if (validates) {
            return true;
        }

        //output error messages
        $('#pageTitle').after("<p id='errorText'>" + errorString + "</p>");

        return false;
    }

    //reset validation errors
    function resetErrors() {

        $('#errorText').remove();
        $('#firstName').removeClass('error');
        $('#lastName').removeClass('error');
        $('#email').removeClass('error');
        $('#address').removeClass('error');
        $('#zipCode').removeClass('error');

    }

});

Answer 1

you are missing a “p”, it’s RegExp not RegEx

var isEmail = new RegExp('^.+@.+\..+$');

But in general with these problems, just have Firebug or Chrome Developer Tools open (F12 in windows) and then you will see the cause of the error. If you write new Regex() in the console, it will tell you that Regex is not defined, if you start writing RegE…, it will autocomplete it for you to RegExp.