Question

I am just learning javascript and jquery, and I must be doing my validation wrong. I have tried a few different ways, and each time, the first alert (test1) fires onblur, but a bad email does not bring up the second alert. I thought about using jquery validation plugin, but after playing with in for a while, I realized that I need validation on each blank onblur, not when it is time to process the form, so I think I am stuck with normal js.

In my document ready function:

$("#studentEmail").blur(function() {
    alert ("test1");
    function validateEmail(studentEmail){  
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;  
        if(!emailReg.test(studentEmail)) {
            alert("Please enter valid email id");
        }
    }
});

In my HTML:

<input type="text" class="signUpTextbox" id="studentEmail" name="registerStudentEmail">

Thanks!

Answer 1

Inside of your blur handler you were declaring a function. Declare your function outside of this handler, and call it inside of your handler.

 function validateEmail(studentEmail){  
     var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;  
     if(!emailReg.test(studentEmail)) {  
         alert("Please enter valid email id");
     }       
 }

 $("#studentEmail").blur(function() { 
    alert ("test1");

    validateEmail($(this).val());
});

Or, if this function has zero reuse you could just do this:

 $("#studentEmail").blur(function() { 
    alert ("test1");

    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;  
    if(!emailReg.test($(this).val())) {  
        alert("Please enter valid email id");
    }        
});