Introduction
In this article I will explain how to apply a Validation Group similar to .NET in a 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 provide 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 doesn'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".
<body>
<form>
<pre>
URL: <input type="url" name="userid"><br />
Phone Number: <input type="number" name="number" /><br />
E-Mail Id: <input type="email" name="email" /><br /></pre>
</form>
</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 are activating the validations.
<input type="submit" value="Validate"><br>
<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.
<input type="submit" value="Validate"><br>
<input type="submit" formnovalidate="formnovalidate" value="Submit without validation">
Now again I am running the application.
Output
Again on running the code three textboxes wil 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:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form>
<pre>
URL: <input type="url" name="userid"><br />
Phone Number: <input type="number" name="number" /><br />
E-Mail Id: <input type="email" name="email" /><br /></pre>
<input type="submit" value="Validate"><br>
<input type="submit" formnovalidate="formnovalidate" value="Submit without validation">
</form>
</body>
</html>