Form validation using HTML and JavaScript - GeeksforGeeks

28 Jul, 2021
Forms are used in webpages for the user to enter their required details that further send it 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, online surveys to name a few.
Syntax for form in HTML
<body>    <h1 style="text-align: center;">REGISTRATION FORM</h1>    <form name="RegForm" action="/submit.php"           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>
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, 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. HTML is used to create the form.JavaScript to validate the form.
CSS to design the layout of the form.Form validation:
<script>    function GEEKFORGEEKS() {        var name = document.forms["RegForm"]["Name"];        var email = document.forms["RegForm"]["EMail"];        var phone = document.forms["RegForm"]["Telephone"];        var what = document.forms["RegForm"]["Subject"];        var password = document.forms["RegForm"]["Password"];        var address = document.forms["RegForm"]["Address"];          if (name.value == "") {            window.alert("Please enter your name.");            name.focus();            return false;        }          if (address.value == "") {            window.alert("Please enter your address.");            address.focus();            return false;        }          if (email.value == "") {            window.alert(              "Please enter a valid e-mail address.");            email.focus();            return false;        }          if (phone.value == "") {            window.alert(              "Please enter your telephone number.");            phone.focus();            return false;        }          if (password.value == "") {            window.alert("Please enter your password");            password.focus();            return false;        }          if (what.selectedIndex < 1) {            alert("Please enter your course.");            what.focus();            return false;        }          return true;    }</script>
Styling the form:
<style>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;}</style>
COMBINED CODE [ALL OF THE ABOVE SECTIONS CLUBBED)
<html>    <head>        <script>            function GEEKFORGEEKS() {                var name =                     document.forms["RegForm"]["Name"];                var email =                     document.forms["RegForm"]["EMail"];                var phone =                     document.forms["RegForm"]["Telephone"];                var what =                     document.forms["RegForm"]["Subject"];                var password =                     document.forms["RegForm"]["Password"];                var address =                     document.forms["RegForm"]["Address"];                  if (name.value == "") {                    window.alert("Please enter your name.");                    name.focus();                    return false;                }                  if (address.value == "") {                    window.alert("Please enter your address.");                    address.focus();                    return false;                }                  if (email.value == "") {                    window.alert(                      "Please enter a valid e-mail address.");                    email.focus();                    return false;                }                  if (phone.value == "") {                    window.alert(                      "Please enter your telephone number.");                    phone.focus();                    return false;                }                  if (password.value == "") {                    window.alert("Please enter your password");                    password.focus();                    return false;                }                  if (what.selectedIndex < 1) {                    alert("Please enter your course.");                    what.focus();                    return false;                }                  return true;            }        </script>          <style>            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;            }        </style>    </head>      <body>        <h1 style="text-align: center;">REGISTRATION FORM</h1>        <form name="RegForm" action="/submit.php"               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>  // updated by patelshrey115
Resulting Form:
Reference : https://en.wikipedia.org/wiki/Form_(HTML)
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.
xXShreyXx
bunnyram19
HTML-Misc
javascript-form
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
How to calculate the number of days between two dates in javascript?
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?