CODEWITHSUNDEEP
asp.nethtml
mmcglynn
mmcglynn

Reputation: 7662

How can I make the HTML5 input required attribute behave with .NET?

I am using ASP.NET 4.

My UI depends on using an update panel. Updating certain UI elements requires a PostBack which is handled by the ScripManager. Basic stuff. These action occur before the fields are submitted.

The problem comes in with the HTML5 markup that have to deal with.

<input type="text" id="foo" aria-required="true" required>

Using a .NET TextBox control and adding attributes, I get rendered code as such:

<input name="foo" type="text" id="foo" aria-required="true" required="required" />

The HTML5 behavior is that each time a PostBack occurs, the input field thinks it should alert the user, since no value is present in the field, even though the user if off doing other actions within the UI.

Is there a way to bring this HTML5 behavior under control, such that the the INPUT field ignores PostBack?

Upvotes: 3

Views: 3772

Answers (1)

pwdst
pwdst

Reputation: 13735

ASP.NET web forms is a bit strange in that the entire page is a "form" and that postbacks occur in order to fire server side events, not simply to submit form data. As the form "submit" event is being fired, the HTML form validation API will attempt to validate the entire contents of the form. In this case you are firing a submit event that isn't actually a form submission - so the validation behaviour is incorrect.

There are a few ways you could deal with this.

  1. You could add the "formnovalidate" attribute to all the buttons and input with type submit elements that trigger a postback but do not actually submit the form. It is possible to alter this with JavaScript using the inputElement.formNoValidate property as well as using jQuery and JavaScript attribute methods.

  2. You could add the "novalidate" attribute to the form element to avoid client side validation altogether, whilst having the semantic meaning behind the attribute on the input elements involved - perhaps using something like jQuery validation to validate the form yourself on submission, or use the validityState API to perform totally custom validation in JavaScript.

  3. You could conditionally add and remove the "required" attribute, and change the value of "aria-required" using jQuery or native JavaScript so that these are only present during the form submission phase of the process.

  4. You could conditionally add and remove the "novalidate" attribute to the form element, or set the formElement.noValidate property in order to determine if client side validation occurs.

Upvotes: 3

Related Questions