JavaScript - how to make form validations?
There are many different ways of validating forms. This is how I decided to do it.
I'm using the input text box for First Name as an example. Since it is a required field, I'll be checking that it is not blank. It also needs to have only letters and there's a minimum and a maximum of characters allowed.
1st of all: Insert a link in your html to your external JavaScript file (similar to the link to your external CSS file). You can add it right after the CSS link, inside <head>:
<script type="text/javascript" src="external_javascript.js"></script>
2nd: create the javaScript functions :
//function to check BLANK, ONLY LETTERS & length restriction on first name: function checkForBlankAllLetters() { var firstNameTextBox = document.getElementById('firstName'); var textBoxValue = firstNameTextBox.value;//var used on All Letters condition var firstNameTextBoxError = document.getElementById('firstNameAllLettersError'); //vars used to check all letters //test regex pattern var pattern= /^[a-zA-Z ]+$/; var isMatch = pattern.test(textBoxValue); //function check for blank if(firstNameTextBox.value==="") { //alert ('please enter your first name'); firstNameTextBox.style.borderColor = "red"; firstNameTextBoxError.innerHTML="adicionar Nombre"; return false; }//end of function to check for Blank //function to check for all letters if(isMatch) { return true; } else{ //alert('solo letras'); firstNameTextBox.style.borderColor = "red"; firstNameTextBoxError.innerHTML="solo letras"; return false; }//end of function to check all letters } //Check LENGTH - min.2 max. 15 characters function checkLength (){ var len = {min:2,max:15}; var input = document.getElementById('firstName'); var firstNameTextBoxError = document.getElementById('firstNameAllLettersError'); if(input.value.length>=len.min && input.value.length<=len.max){ return true; }else{ //alert("Please enter between " +len.min+ " and " +len.max+ " characters"); input.style.borderColor = "red"; firstNameTextBoxError.innerHTML="2 a 15 letras"; input.focus(); return false; }; } //Hides the red border and error message when adding valid name function firstNameGreenBorder() { var firstNameTextBox = document.getElementById('firstName'); firstNameTextBox.style.borderColor = "green"; document.getElementById('firstNameAllLettersError').innerHTML=""; }
3rd: Organise the functions:
// re-organised the function above into the following:
function ValidateForm(){ //Check for blank var isCheckForBlankValid = checkForBlankAllLetters(); //if its true call check lenght . if its return; var isValidLenght; if(isCheckForBlankValid){ isValidLenght = checkLength(); if(isValidLenght){ firstNameGreenBorder(); return; } } }
4th: on your HTML you should have:
<form id="formBoxes" name="formBoxes" method="post" action="#"/> <!-- beginning of the FORM -->
<div class="formRow"> <label for="firstName"> Nombre*</label> <input type="text" name="firstName" id="firstName" onkeyup="ValidateForm();"/> <span id="firstNameAllLettersError" class="validationError"></span> <br/> </div>