Form Validation Using JavaScript
JavaScript provides a way to validate form’s data on the client’s computer before sending it to the web server. It is important to validate the form submitted by the user because it can have inappropriate values, the data that is entered must be checked for correct form and value. Through JavaScript, we can validate name, password, email, phone numbers and more fields.
In this article, we are going to validate the name, phone number, email, password, and message box. Name that accepts not more than 15 words, phone numbers that accepts only numbers, email that accepts valid email, password that must have at least 1 capital letter, one special character and 1 number, message box that accepts not more than 350 words. A send button that pops out an alert box it was successful.
Here’s the form we are going to validate using JavaScript. But firstly, let’s have a view of the HTML and CSS source code.
Want to read this story later? Save it in Journal.
Take note of the <form> tag at number 11, it has an onsubmit attribute which return a formValidation() function. Here, we are validating the form on form submit. We’re going to be checking the form using a formValidation() function, which will be activated by the form’s submit event — therefore, using the onsubmit handler. On a simpler note, when user click on submit, it will check the form for correctness of values before sending it to the web server.
So i have my inputs for name, phone number, email, password, password confirmation, a text area for the message box, a div that holds the message to be displayed when user did not enter the correct values and lastly a send button. Of which each has its own id. Take note of the id given to each.
The css shows how i styled the body, the section that holds the form, the inputs, the text area, the error message and the button.
Now to the main deal, let’s validate the form. Remember the formValidation () function? It’s time to give it instructions, and remember that the the form will validate onsubmit, that is, when you click the send button. And also time to make use of the id given to each field.
function formValidation(){
All instructions goes here;
}
Here is the entire js script for the validation. But i will like to break the code down step by step for explanation.
Note: When writing the code, the last code (where i have return true just after the alert) should be set to return false until all the conditions have been stated. Otherwise, the form will be submitted. Example;
function formValidation(){
if (name.length == 0 || name.length > 15) {
say = “Please enter name not greater than 15 words”;
error_message.innerHTML = say;
return false;
}
return false;
}
The return false in bold, will prevent the form from being submitted.
Firstly, i declared my variables, and i want it to have the values of the input fields. That is, the values entered by the users. Therefore, i made use of the “document.getElementById().value”. If you noticed, the error_message didn't have “.value”. This is because i want just the reference, not the value. Also, i declared a variable say, without assigning any value to it, this is because its value will change per each condition.
The next thing after declaring the variables is to make use of a conditional (if) statement. “if statement” is used to specify a block of code to be executed, if a specified condition is true. The syntax is;
if (condition) {
block of code to be executed if the condition is true
}
This implies that if the condition in the bracket is true ( i.e length of the name entered by user is 0 (empty) or greater than 15), then the bock of code in the curly bracket should be executed (that is, error_message should write a text that says Please enter name not greater than 15 words). And the “return false” simply means that if the condition isn’t true(i.e false), then the block of code shouldn’t be executed.
The picture above shows that the name field was empty, therefore, it showed an error message ( Please enter name not greater than 15 words) when i clicked on send. Same will happen if the length is greater than 15.
Here, the picture shows that the name entered was less than 15 characters, therefore the condition was false, hence, the block of code wasn’t executed and therefore, checked the next condition(for phone number).
Here’s the phone number conditional statement. The isNaN() method determines whether a value is NaN (Not-A-Number). The code implies that if the user enter a value that is not a number or the digits are less than 11, then the block of code should be executed (that is, error_message should write a text that says Please enter a valid phone number).
The next condition is for the email. The indexOf() method searches a string/array for the specified item, and returns its position. It returns -1 if the item is not found. The code implies that if “@” is not found (i.e -1) or the length of the email is less than 11, then the error_message should write a text that says Please enter a valid email address.
Next is the password. search() Method executes the search for a match between a regular expression and a given string object.The code implies that if the condition is true, i.e, password is empty, or it’s less than 10 characters, or capital letter A-Z isn’t found, or number from 0–9 isn’t found, or any of the special character isn’t found, then it should execute the block of code.
Next is to confirm if password matches when user re-enter password or doesn’t match. As the code simply implies, if confirm is not strictly equal to password, then execute the block of code.
Next is the message box. The code implies that if the length of the message is 0 i.e empty or the length is greater than 350, then execute the block of code.
And finally the alert box that says Form sent successfully when user enter the correct details and click on send. Please remember that the return true will be set to return false until all the conditions have been stated. This prevents the form from being submitted. It’s after all the conditions have been stated we can write return true, then the form can successfully be submitted
Yeah… that will be all.
Here is a link to my pen on form validation using JavaScript. You can check it out. Thanks. https://codepen.io/tybabie/pen/PoZoBPg
📝 Save this story in Journal.
👩💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.
