Simple Form Validation - On Submits

no ".innerHTML" used, avoids injection

by guyluchenbill

HTML

<h4>Your Name</h4>
<span id="nameError" class="e"></span>       
<input type="text" name="name" value="" id="name" />         
<h4>Email Address</h4>
<span id="emailError" class="e"></span>       
<input type="text" name="email" value="" id="email" />         
<h4 style="margin-bottom: 5px;">Message</h4>
<span id="messageError" class="e"></span>       
<textarea name="message" id="message"></textarea>         
<input type="submit" name="submit" value="Submit" class="submit" id="submit" />

CSS

.e { 
    color: red; 
}
span,textarea { 
    display: block; 
}

JavaScript

(function() { 

var $ = function(id) { 
    return document.getElementById(id);         
}
var submit = document.getElementById('submit');
submit.addEventListener('click', validate, false);

function validate(e) {

    var name = $('name').value,
        nameError = $('nameError'),
        email = $('email').value,
        emailError = $('emailError'),        
        message = $('message').value,
        messageError = $('messageError'),
        nameRegex = /^[-\sa-zA-Z]+$/,
        emailRegex = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/; 
        var messageRegex = /^[a-zA-Z0-9 ]*$/;
    
    if (name === '' || !name.match(nameRegex)) {
        e.preventDefault();
        nameError.textContent = 'Please enter a valid name.';
    } else {
        nameError.textContent = '';
    }
    
    if (email === '' || !email.match(emailRegex)) {
        e.preventDefault();
        emailError.textContent = 'Please enter a valid email address.';
    } else {
        emailError.textContent = '';
    }
    
    if (message === '' || !message.match(messageRegex)) {
        e.preventDefault();
        messageError.textContent = 'Please enter a valid message.';
    } else {
        messageError.textContent = '';
    }
    
    return true; 
}

}());