A little help please with a contact form validator script

Question

I have this email form validation script:

    <script type="text/javascript" language="javascript">  
function validateForm(thisform){  
 if(thisform.Name.value=="") {  
   alert("Ooouuupppsss... You did not enter your Name.");  
   thisform.Name.focus();  
   return false;  
 }  
 if(thisform.Email.value=="") {  
   alert("Ooouuupppsss... You did not enter a valid Email Address.");  
   thisform.Email.focus();  
   return false;  
 }  
 if(thisform.Subject.value=="") {  
   alert("Ooouuupppsss... You did not enter your Subject.");  
   thisform.Subject.focus();  
   return false;  
 }  
 if(thisform.Message.value=="") {  
   alert("Ooouuupppsss... You did not enter your Message.");  
   thisform.Message.focus();  
   return false;  
 }  
}</script>  

Can someone please tell me what do I have to add in this script in order to make the users enter a valid email address. Also I would like in the rest of the fields to make users to enter text (not links).

I've tried to add different pieces of code which I found on different websites but they did not work and this is because I am not sure if I am adding them right.

Thank you for reading my request.

All the best, Andi

Answer 1

See this post for regex urls: regular expression for url

See this post for email validation: Validate email address in JavaScript?

See this for X browser event listening, if would use jQuery, ie8 uses attach see this: Javascript add events cross-browser function implementation: use attachEvent/addEventListener vs inline events

I would recommend looping through the form inputs, and checking if its email and if its not run the regex against the link.

(function(){ 
var validateForm = function(form){
    var errors = [], inputs = form.getElementsByTagName('input');
    for(var input = 0; input<inputs.length; input++){
        var currentInput = inputs[input];
        if(currentInput.value === ''){
            // handle attributes here for error message, push error message
            if(currentInput.attribute('name') === 'email'){
                // handle email
                // push error message
            }
        }
    }
    return errors; 
}

var contactForm = document.getElementById('contact');
contactForm.addEventListener('submit', function(e){ 
    var errorMessages = validateForm(contactForm);
    if(errorMessages.length === 0){

    } else {
        e.preventDefault() // stop the form from submitting
        // handle your messages 
    }
}
}());

Answer 2

For e-mail checking you can use following code in else part after checking if e-mail is empty

function validateForm(){
    var email = document.getElementById("email").value;
    var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
    if (email.search(emailRegEx) == -1) {
        alert("e-mail is not valid");
        return false;
    }
}

and for url with same logic you can use following regular expression

var urlRegEx = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/;

following is a working example based on your work, you can improve this code it is only for showing you how it should be.

    function validateForm(thisform){  
        if(thisform.Name.value=="") {  
            alert("Ooouuupppsss... You did not enter your Name.");  
            thisform.Name.focus();  
            return false;  
        }  
        else{
            var name = thisform.Name.value;
            if (!checkURL(name)) {
                alert("name cannot be a url");
                return false;
            }
        }
        if(thisform.Email.value=="") {  
           alert("Ooouuupppsss... You did not enter a valid Email Address.");  
           thisform.Email.focus();  
           return false;  
        }  
         else{
            var email = thisform.Email.value;
            var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
            if (email.search(emailRegEx) == -1) {
                alert("e-mail is not valid");
                return false;
            }
        }
         if(thisform.Subject.value=="") {  
           alert("Ooouuupppsss... You did not enter your Subject.");  
           thisform.Subject.focus();  
           return false;  
        }
            else{
                if (!checkURL(thisform.Subject.value)) {
                    alert("subject cannot contain a url");
                    return false;
                }
            }
         if(thisform.Message.value=="") {  
           alert("Ooouuupppsss... You did not enter your Message.");  
           thisform.Message.focus();  
           return false;  
        }  
        else{
            if (!checkURL(thisform.Message.value)) {
                alert("message cannot contain a url");
                return false;
            }
        }
    }
    function checkURL(url){
        var urlRegEx = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/;
        if (url.search(urlRegEx) == -1) {
            return true;
        }
        return false;
    }