Clever Geek Handbook

How can I get the HTML5 input attribute to behave with .NET?

I am using ASP.NET 4.

My interface depends on using the refresh panel. Updating some UI elements requires PostBack, which is handled by the ScripManager. Basic things. These steps are performed before the fields are submitted.

The problem has to do with the HTML5 markup you have to deal with.

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

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

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

The HTML5 behavior is that every time PostBack occurs, the input field thinks it should warn the user because there is no value present in the field, even if the user has disabled other actions in the UI.

Is there a way to control this HTML5 behavior so that the INPUT field is ignored by PostBack?

+3


source to share


1 answer


ASP.NET Web Forms are a little odd in that the entire page is a "form" and that callbacks occur to fire server-side events rather than just submit form data. As the submit form runs, the HTML Form Validation API will attempt to validate the entire content of the form. In this case, you are triggering a submit event, which is not actually a form submission, so the validation behavior is wrong.

There are several ways to handle this.



  • You can add the "formnovalidate" attribute to all buttons and inject type input elements that trigger postbacks, but don't actually submit the form. This can be changed using JavaScript using the inputElement.formNoValidate property, as well as using jQuery and JavaScript attribute methods.

  • You can add a "novalidate" attribute to a form element to avoid client-side validation altogether, while still meaningfully meaning the attribute on the input elements - perhaps using something like jQuery validation to validate the form yourself on submission, or use the validityState API to do fully custom validation in JavaScript.

  • You can conditionally add and remove the "required" attribute and change the "aria-required" value using jQuery or native JavaScript so that they are only present during the form submission process.

  • You can conditionally add and remove the "novalidate" attribute on a form element, or set the formElement.noValidate property to determine if client-side validation is performed.

+3


source






More articles:


All Articles