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?
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.
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.
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.
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.
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.
Related
I have a form like the following:
<form id="form-12" data-length="120" data-height="240">
<!-- different input fields -->
</form>
I can track the formSubmit event but what i need to include into the event are the values inside the data-attributes. How is this possible with Google Tag Manager? Do i need to to this with Javascript or is there another solution?
Open GTM preview, submit the form, select the form submit event in the preview and inspect the state of your variables on the submit event. You can use any of them.
You won't have the data-attributes among them, however.
You will have to use JS to parse out all the attributes on formSubmit if the attributes are still there on it.
It's worse if they're not. Then you would have to make them available for the future submit on pageload, on button click or on a different suitable trigger.
How can we prevent resubmitting the page on refresh..
For Example:
I have an input field and on submitting the page it adds the value of that field to a list and gets reloaded automatically but if intentionaly refresh the page without writing anything to the field it adds the previously added value to the list. How to prevent this problem in webforms asp.net
Try using <input type="button" /> instead of <input type="submit" /> or their corresponding ASP.NET controls. If you have a submit button on the page, it will post the form when you refresh (regardless of whether is accidental or intentional). But you lose the ability to submit the form using the enter button. The user has to click on the input button.
You might still want to keep the submit button, so in that case after adding to the list, redirect to the URL explicitly using Response.Redirect
Response.Redirect(Request.Url.AbsoluteUri);
In addition, to be totally fail-safe on the server side, you can also check if the item already exists in the list or the database (if that's the backing store for the list) before adding it.
I have a form with a <textarea required>, <input type="checkbox">, <input type="text">, and <button type="submit">.
It's all fancified with jQuery, so that if you're in the text-input, or tab to the checkbox, and hit Enter, I catch that and preventDefault so the form doesn't submit.
But I want the form to be equally sensible for people who aren't running Javascript. Surely there is some markup or CSS to indicate that a given form element shouldn't cause form submission?
Only javascript accepts events.
You must validate using server-side when you don't have javascript actived.
I want to validate some asp.net textboxes with the jQuery Validation plugin found at
http://docs.jquery.com/Plugins/Validation, but it appears that the elements must be between a form tag. If I have just a couple elements, I would hardly call that a form, so I would rather not have them wrapped inside a form element. Is there a way around this? Also, if I have two buttons on the form, a cancel and a submit button and I want the form only to validate when the submit button is clicked, but not the cancel button, how is this accomplished?
I have just a couple elements, I would
hardly call that a form, so I would
rather not have them wrapped inside a
form element.
If the elements are not within a form tag, then it is not a valid HTML document, so behavior within script might get wonky depending on how the browser deals with the malformed HTML.
Most browsers will create a form implicitly, but now you have no control over the form's behavior. The defaults are usually be a post action form targeted at the requested page's URL.
The problem is, you probably have no idea what selector to use in the JQuery to get a reference to the form... but I suppose $("form") would do the trick.
validate when the submit button is clicked, but not the cancel button
The plug-in intercepts and runs on the submit event of a form. Generally cancel buttons are html input elements with the type attribute set to "reset":
<input type="reset" value="cancel" />
A reset type button will not cause the form to submit, and this will not trigger the validation.
If you use another button type, make sure the onclick even returns false. This cancels the form's submit action but still allows you to run javasctipt of your own when the button is clicked.
The jquery validate plugin requires a form element to function, so you should have your form fields (no matter how few) contained inside a form.
You can tell the validation plugin not to operate on form submission, then manually validate the form when the correct submit button is clicked.
For example, using a class to identify the correct submit button:
$(document).ready(function() {
var form = $("form");
form.validate({
onsubmit: false,
});
//Validate form only if validation submit button is clicked
//Allows cancel submit buttons to function properly
$('.validate', form).click(function() {
if (form.valid()) {
form.submit();
}
else {
form.validate().form();
}
});
});
I'm using a coda slider like consctuct on one of my pages. Naturally, the anchor ("#currentTab") information is lost after a postback. This is annoying because when you press a button on a certain tab, you always end up on the first tab after the postback.
What is the best way of letting this information survive a postback?
Try this is your page_load event
Me.Form.Attributes("onsubmit") = "this.action+=top.location.hash;"
I'm not doing in ASP, but as a general solution attempt this might work for you too:
create a hidden field within the form that you send
on tab change, fill in the value for this selected tab (if there are no values for identifying the tabs, create them)
when rendering the page after submit, create a piece of javascript on the fly, which switches the tab on DOM:ready.
Either execute your postback as an AJAX request, or add some javascript to the form that will send the anchor value to the server
Rough example
<form onsubmit="this.anchor.value=top.location.hash">
<input name="anchor" type="hidden" value="">
<!-- rest of form -->
</form>
Then you'll need a convention to return it to the client and perform the appropriate action.