How do I make a custom validation javascript form?

Question

I want to make the submit button on my form so that when the user clicks on it, it comes up with an alert box telling them what they haven't filled in (which would be done with JavaScript) how do I go about making this?

I want to use the "Flip in & scale" from http://tympanus.net/Development/ModalWindowEffects/ as the custom alert box (which then will pop up what the user hasn't filled in)

Also I want it so it checks that the user have put in a correct email in the right format and also that they have put their name (which shouldn't include numbers)

Thanks.

Answer 1

<form id="myForm" method="post" action="/home"> // change the 'action' attribute to the link you want to post the form
    <input type="text" id="inputArea" onfocus="myFunc()">
    <span id="error" class="hide">Please enter a value</span>
    <button type="submit" id="myButton">Submit</button>
</form>

<script>
function myFunc(){
   var input = document.getElementById('inputArea');
   var button = document.getElementById('myButton');
   var span = document.getElementById('error');
   if(input.value == ''){
       span.className = errorMessage;
   } else if(input.value != ''){
        span.className = hide;
   }
}
</script>


    css:


.hide {display:none;}
.errorMessage {color:red;}

You could even be more specific for the input by using regular expressions but that's a different story!