Apply Validation Group Similar to .NET in HTML Document

Anubhav Chaudhary
11y
16.6k
0
1

Article

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.

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.

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>

<head>

</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>

</form>

</body>

</html>