Is HTML 5 validation useful?

HTML Web Development Front End Technology

In this article we are going to perform the task based on is HTML5 validation useful. As we all are aware this before but we will have a brief look into it.

In order to prevent data with errors from being transferred to the server, HTML form validation involves reviewing the contents of the HTML form page. This procedure is crucial for creating HTML−based web apps since it makes web pages and applications of all kinds better.

Let’s look into the following examples to understand more about HTML5 validation.

Example 1

In the following example we are creating the simple form with input field.

<!DOCTYPE html>
<html>
<body>
   <form action = "#" >
      NAME:<input type = "text" name = "name" required>
      <input type = "submit">
   </form>
</body>
</html>

When the script gets executed, it will display an output consisting of an input field for name along with a button which allows the form to be submitted if it is valid.

If the user tries to submit the form without filling in the input field, the form gets invalidated and displays an alert "please fill out this field".

Example 2: Using JavaScript

In the following example we are running a script to make form validate.

<!DOCTYPE html>
<html>
<body>
   <form name="mytutorial" action="#"
      onsubmit="return validateForm()" method="post">
      Name: <input type="text" name="name">
      <input type="submit" value="Submit">
   </form>
   <script>
      function validateForm() {
         let x = document.forms["mytutorial"]["name"].value;
         if (x == "") {
            alert("Name Can't Be Empty");
            return false;
         }
      }
   </script>
</body>
</html>

When the script gets executed, it will generate the output consisting of an input field for the name along with a submit button.

When the user tries to submit the form without entering the input field,the form fails to submit and displays an alert "name can’t be empty".

Example 3

In the following example we are creating simple email form to get submitted.

<!DOCTYPE html>
<html>
<body>
   <form action = "/cgi-bin/html5.cgi" method = "get">
      Enter email : <input type = "text" name = "newinput" required/>
      <p>Try to submit using Submit button</p>
      <input type = "submit" value = "submit"/>
   </form>
</body>
</html>

On running the above script, it will generate the output consisting of an input field for email with a prompt along with a submit button.

If the user tries to submit the mail without filling the email it gets failed and dislays alert on the webpage.