Apply Validation Group Similar to .NET in HTML Document

Introduction

 
In this article, I will explain how to apply a Validation Group similar to .NET in an HTML Document.
 
In ASP. NET we mainly use a "ValidationGroup" for doing validation on the click of a specific button, but this property is not available for HTML controls.
 
HTML5 provides a new property for calling the validations on the click of a specific button. This property is known as "formonvalidate".
 
Here I will create a sample application that will help you understand how to apply this property in a very simple and convenient manner.
 
Step 1
 
First, you need to add an HTML page to your .NET application.
 
For this, you can right-click on your application and need to add an HTML page.
 
After adding this page you first need to use a form tag in which all the coding is to be done, if you don't create a form tag then our "formonvalidate" property will not work.
 
In this form tag, I created three textboxes and their types are set to "URL", "number" and "email".
  1. <body>  
  2.    <form>  
  3.       <pre>  
  4.  URL:          <input type="url" name="userid"><br />  
  5.  Phone Number: <input type="number" name="number" /><br />  
  6.  E-Mail Id:    <input type="email" name="email" /><br /></pre>  
  7.    </form>  
  8. </body> 
Here you can see that I took three textboxes and their types are set to "url", "number" and "email".
 
Step 2
 
Now I will add two submit buttons and you will see that the click of both of the buttons is activating the validations.
  1. <input type="submit" value="Validate"><br>  
  2. <input type="submit" value="Submit without validation"> 
Now if I run the application then you will see that both of the buttons are acting the same and none of these are restricted from activating the validation.
 
Output
 
As I run the application three textboxes appeared to me on the output window.
 
I write my name in the URL TextBox and click on the first button, you can see that it's showing the error message on the first TextBox
 
formnovalidate

Now I provide the valid URL but I write some letters in the second TextBox that was made to carry only numbers. This time I click on the second button and again you can see that an error message is displayed for this too.
 
formnovalidate

Step 3
 
Now I will add the property "formnovalidate" to the second submit button.
  1. <input type="submit" value="Validate"><br>  
  2. <input type="submit" formnovalidate="formnovalidate" value="Submit without validation"> 
Now again I am running the application.
 
Output
 
Again on running the code three textboxes will appear.
 
This time I provide my name in the first TextBox, letters in second and numbers in the third TextBox. That means that all the TextBoxes are filled by incorrect values.
 
formnovalidate

Now I clicked on the second button and you can see in the URL that our form is submitted without showing any error message.
 
formnovalidate

The complete code of this application is as follows:
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5. </head>  
  6. <body>  
  7.     <form>  
  8.         <pre>  
  9.  URL:          <input type="url" name="userid"><br />  
  10.  Phone Number: <input type="number" name="number" /><br />  
  11.  E-Mail Id:    <input type="email" name="email" /><br /></pre>  
  12.         <input type="submit" value="Validate"><br>  
  13.         <input type="submit" formnovalidate="formnovalidate" value="Submit without validation">  
  14.     </form>  
  15. </body>  
  16. </html> 


Similar Articles