Validating Forms Using JavaScript: Overview & Example

Instructor: Alexis Kypridemos

Alexis is a technical writer for an IT company and has worked in publishing as a writer, editor and web designer. He has a BA in Communication.

In this lesson, the concept of form validation is explored, as well as how to use HTML and JavaScript to validate forms on the client-side. You will learn some useful terms and get see some examples as well!

Form Validation

Form validation is the practice of ensuring that data entered by a user through a form is correct. A very basic example is when a user has been prompted to enter an email address, form validation is used to ensure that this is in the format of ''username@website.com''.

Server-side vs. Client-side Validation

Since we're talking about form validation in the context of web pages and applications, it may be useful to distinguish that there are two stages at which the validation can occur:

  • On the server-side, after the user has submitted the form.
  • On the client-side, before the user submits the form.

You will soon learn different ways to validate the data before the user submits a form to the web server, on the client-side (via a web browser), using HTML and JavaScript.

Validating Forms with HTML

HTML5 has introduced a couple of tools which help to ensure that user-entered data is valid before even using any JavaScript function. These tools are:

  • Constraint validation, which specifies what type of data is acceptable for each form input field, like an email address for example.
  • The required attribute, which ensures the user has filled in an input field before submitting the form.

Please note that while these tools make form validation much easier for the developer, they are not meant to replace client-side or server-side validation. Ideally, a developer will use all three methods to ensure user-entered data is correct.

Below is an HTML form that prompts the user to enter their email address. The form uses both constraint validation and the required attribute to ensure, to the extent possible with these attributes, that the user has in fact entered an email address.

<!DOCTYPE html>
<body>
<form>
Please enter your email address:<br/>
<input type = "email" required><br/>
<input type = "submit">
</form>
</body>
</html>

Both constraint validation and the required attribute are used in this line of the example:

<input type = "email" required>.

Previous versions of HTML used the type attribute to specify more general types of input, like ''text'', ''checkbox'', or ''submit'', which is also used in this example. HTML5 introduced additional, more specific input types like ''email'', ''date'', ''search'', among others.

For instance, in the above example, if the user enters input that does not include the @ sign, and presses ''Submit'', the web browser will display a message prompting them to enter an email address in the correct format. However, please note that a limitation of this tool is that if the user were to enter something like ''name@website'', without a ''.com'' at the end, the web browser would not flag this entry as invalid, like it should. This is why additional validations by developers are necessary.

Additionally, we used the required attribute in the same input element, to check if the user has entered any data at all. If the input element is blank and the user clicks ''Submit'', the web browser will display a message reminding the user to fill in the field before submitting.

Validation Using JavaScript Functions

HTML5 validation tools are a great help, but they're not quite enough. Let's expand on our example, adding a JavaScript function to check that the user has:

  • Entered data to begin with.
  • Entered their input in the correct format.
<!DOCTYPE html>
<body>
<form onsubmit="return checkData()">
Please enter your email address:<br/>
<input type = "email" required><br/>
<input type = "submit">
</form>
<script>
function checkData(){
var email = document.getElementsByTagName("input")[0];
if (email.value == ""){
alert("Please enter your email address before submitting.");
} else if (email.value.indexOf("@", 0) == -1){
alert("Please enter a valid email address.");
} else if (email.value.indexOf(".", 0) == -1){
alert("Please enter a valid email address.");
}
}
</script>
</body>
</html>

In the updated example, we've added our JavaScript code inside the <script> tag. This includes the checkData() function, which performs the actual form validation commands. We call this function using the onsubmit method inside the <form> tag. This means the code will execute when the user presses "Submit".

Inside the function, the first line of code identifies the email input element and assigns it to the creatively titled variable email:

var email = document.getElementsByTagName("input")[0];

Then follow a series of if and else if conditional statements, which check:

  • If the user has filled in the form input
  • If their input includes an @ sign
  • If their input includes the ''.'' character

To unlock this lesson you must be a Study.com Member.
Create your account

Register to view this lesson

Are you a student or a teacher?

Unlock Your Education

See for yourself why 30 million people use Study.com

Become a Study.com member and start learning now.
Become a Member  Back
What teachers are saying about Study.com
Try it risk-free for 30 days

Earning College Credit

Did you know… We have over 160 college courses that prepare you to earn credit by exam that is accepted by over 1,500 colleges and universities. You can test out of the first two years of college and save thousands off your degree. Anyone can earn credit-by-exam regardless of age or education level.

To learn more, visit our Earning Credit Page

Transferring credit to the school of your choice

Not sure what college you want to attend yet? Study.com has thousands of articles about every imaginable degree, area of study and career path that can help you find the school that's right for you.

Create an account to start this course today
Try it risk-free for 30 days!
Create An Account
Support