Simple form

Step through with versions

by jazahn

HTML

<!-- a4UkW/4 -->

<label for="email">Email</label><input type="email" id="email"/>
<label for="phone">Phone</label><input type="tel" id="phone"/>
<div><button id="submit">submit</button></div>
<div id="error"></div>

JavaScript

// form validation
var email = $("#email");
var phone = $("#phone");
var submit = $("#submit");
var error = $("#error");

var validate = function(){
    // check to see if email is there
    var errarr = [];
    if(email.val() == ''){
        errarr.push("no email!");
    }
    if(!email.val().match(/[a-zA-Z\!\#\$\._\-0-9]+\@[a-zA-Z\!\#\$_\-0-9]+\.[a-zA-Z\!\#\$_\-0-9]+/)){
        errarr.push("email invalid!");    
    }
    if(phone.val() == ''){
        errarr.push("no phone!");    
    }
    if(errarr.length > 0){
        var output = '';
        errarr.forEach(function(item){
            output += item + "<br>";
        });
        error.html(output);
    } else {
        error.html('');
    }
}

var keyHandler = function(evt){
    if(evt.keyCode === 13){
        validate();
    }
}

submit.on('click', validate);
email.on('keypress', keyHandler);
phone.on('keypress', keyHandler);