Apply Validation Group Similar to .NET in HTML Document

Anubhav Chaudhary
Mar 20, 2014
16.5k
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