Forms are used on webpages for the user to enter their required details that further send to the server for processing. A form is also known as a web form or HTML form. Examples of form use are prevalent in e-commerce websites, online banking, and online surveys to name a few.
Prerequisites:
- HTML is used to create the form.
- CSS to design the layout of the form.
- JavaScript to validate the form.
Validating a form: The data entered into a form needs to be in the right format and certain fields need to be filled in order to effectively use the submitted form. Username, password, and contact information are some details that are mandatory in forms and thus need to be provided by the user.
Below is a code in HTML, CSS, and JavaScript to validate a form.
Validations used in below code snippet :
// Javascript reGex for Email Validation.
var regEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g;
var regPhone=/^\d{10}$/; // Javascript reGex for Phone Number validation.
var regName = /\d+$/g; // Javascript reGex for Name validation
HTML
<!DOCTYPE html><html lang="en"><head> <title> Form validation using HTML and JavaScript </title></head><body> <h1 style="text-align: center;"> REGISTRATION FORM </h1> <form name="RegForm" onsubmit="return GEEKFORGEEKS()" method="post"> <p> Name: <input type="text" size="65" name="Name" /> </p> <br /> <p> Address: <input type="text" size="65" name="Address" /> </p> <br /> <p> E-mail Address: <input type="text" size="65" name="EMail" /> </p> <br /> <p> Password: <input type="text" size="65" name="Password" /> </p> <br /> <p> Telephone: <input type="text" size="65" name="Telephone" /> </p> <br /> <p> SELECT YOUR COURSE <select type="text" value="" name="Subject"> <option>BTECH</option> <option>BBA</option> <option>BCA</option> <option>B.COM</option> <option>GEEKFORGEEKS</option> </select> </p> <br /> <br /> <p> Comments: <textarea cols="55" name="Comment"> </textarea> </p> <p> <input type="submit" value="send" name="Submit" /> <input type="reset" value="Reset" name="Reset" /> </p> </form></body></html> |
CSS
div { box-sizing: border-box; width: 100%; border: 100px solid black; float: left; align-content: center; align-items: center;}form { margin: 0 auto; width: 600px;} |
Javascript
function GEEKFORGEEKS(){ var name = document.forms.RegForm.Name.value; var email = document.forms.RegForm.EMail.value; var phone = document.forms.RegForm.Telephone.value; var what = document.forms.RegForm.Subject.value; var password = document.forms.RegForm.Password.value; var address = document.forms.RegForm.Address.value; //Javascript reGex for Email Validation. var regEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g; // Javascript reGex for Phone Number validation. var regPhone=/^\d{10}$/; // Javascript reGex for Name validation var regName = /\d+$/g; if (name == "" || regName.test(name)) { window.alert("Please enter your name properly."); name.focus(); return false; } if (address == "") { window.alert("Please enter your address."); address.focus(); return false; } if (email == "" || !regEmail.test(email)) { window.alert("Please enter a valid e-mail address."); email.focus(); return false; } if (password == "") { alert("Please enter your password"); password.focus(); return false; } if(password.length <6){ alert("Password should be atleast 6 character long"); password.focus(); return false; } if (phone == "" || !regPhone.test(phone)) { alert("Please enter valid phone number."); phone.focus(); return false; } if (what.selectedIndex == -1) { alert("Please enter your course."); what.focus(); return false; } return true;} { var name = document.forms.RegForm.Name.value; var email = document.forms.RegForm.EMail.value; var phone = document.forms.RegForm.Telephone.value; var what = document.forms.RegForm.Subject.value; var password = document.forms.RegForm.Password.value; var address = document.forms.RegForm.Address.value; //Javascript reGex for Email Validation. var regEmail=/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g; // Javascript reGex for Phone Number validation. var regPhone=/^\d{10}$/; // Javascript reGex for Name validation var regName = /\d+$/g; if (name == "" || regName.test(name)) { window.alert("Please enter your name properly."); name.focus(); return false; } if (address == "") { window.alert("Please enter your address."); address.focus(); return false; } if (email == "" || !regEmail.test(email)) { window.alert("Please enter a valid e-mail address."); email.focus(); return false; } if (password == "") { alert("Please enter your password"); password.focus(); return false; } if(password.length <6){ alert("Password should be atleast 6 character long"); password.focus(); return false; } if (phone == "" || !regPhone.test(phone)) { alert("Please enter valid phone number."); phone.focus(); return false; } if (what.selectedIndex == -1) { alert("Please enter your course."); what.focus(); return false; } return true;} |
Output: Click here to check the live code output
Form validation using HTML and JavaScript
