Form validation is an essential aspect of web development that ensures that users input the correct data and reduces errors. In this tutorial, we will show you how to create a form validation before and upon submission using JavaScript.
Let's start by creating a simple HTML form that we will use for our validation example. We will create a form that contains three input fields, a name field, an email field, and a phone number field.
Next, let's create a JavaScript function that will validate our form before submission. We will create a function called validateForm that will check if the name, email, and phone fields are not empty, and if the email and phone fields contain valid data:
function validateForm() {
var name = document.forms["myForm"]["name"].value;
var email = document.forms["myForm"]["email"].value;
var phone = document.forms["myForm"]["phone"].value;
if (name == "") {
alert("Name must be filled out");
return false;
}
if (email == "") {
alert("Email must be filled out");
return false;
}
if (!validateEmail(email)) {
alert("Invalid email address");
return false;
}
if (phone == "") {
alert("Phone number must be filled out");
return false;
}
if (!validatePhone(phone)) {
alert("Invalid phone number");
return false;
}
}
In this code, we first get the values of the name, email, and phone fields using the document.forms object. We then check if each field is not empty. If any of the fields are empty, we display an alert message and return false, preventing the form from being submitted.
Next, we call two helper functions, validateEmail and validatePhone, to check if the email and phone fields contain valid data. These functions are not built-in JavaScript functions but can be implemented easily:function validateEmail(email) {
var re = /\S+@\S+\.\S+/;
return re.test(email);
}
function validatePhone(phone) {
var re = /^[0-9]{10}$/;
return re.test(phone);
}
In this code, we use regular expressions to check if the email and phone fields contain valid data. The validateEmail function checks if the email field contains a valid email address, while the validatePhone function checks if the phone field contains 10 digits.
Finally, we need to call the validateForm function when the form is submitted. We can do this by adding an onsubmit attribute to the form element:
This will call the validateForm function before the form is submitted, preventing the form from being submitted if any of the fields are invalid. And that's it! You now have a simple form validation before and upon submission using JavaScript. You can expand on this example by adding more fields and more complex validation rules.
Comments