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.
Related
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.
I am using the jquery validation plugin in my .Net application and have many number of groups that has to be validated inside my pages. I am validating the groups using
$("#aspnetForm").validate().element("#elementname");
Now the problem is, i have many server side buttons that are mandatory in application, some of them are ajax enabled and others are normal. When i click any button in the page it is validating all the elements in the page, i want to overcome this. I know, by adding class "cancel", we can skip validation, still that is not enough in my case. For example, i have a captcha refresh button which can be refreshed number of times, in this case, validation is skipped only one time and in sub-sequent click, it is triggering validation again.
Please help me in removing all the validation trigger from buttons or to trigger validation only on particular buttons which have some classes , instead of adding cancel class to unrequired buttons.
The jQuery Validate plugin will automatically capture the click event of any button with type="submit" contained within the <form> tags. The only way to stop this is to not use buttons with type="submit".
<form>
....
<button type="submit">button</button>
<input type="submit" />
</form>
DEMO of default behavior: http://jsfiddle.net/EhGQ5/
Alternatively, you can change your buttons to type="button" and then manually capture the click of a specific button(s). You can then trigger the validation manually with the .valid() method. In this example, only the second button will trigger validation.
<form>
....
<button type="button">button</button>
<input type="button" value="button" id="submit" />
</form>
jQuery:
$(document).ready(function() {
// this initialization may happen automatically within your framework
$('#myform').validation({ // normal initialization
// rules & options
});
// manually trigger a validation test using a specific button
$('#submit').on('click', function() {
$('#myform').valid(); // trigger form validation test
});
});
DEMO of manually triggered validation: http://jsfiddle.net/EhGQ5/2/
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 have a text box in my page which the user will type something to submit. However, I do not want to have a submit button but instead I want to listen for the Enter key press in order to submit.
The thing is, there will be couple of textboxes in this one page and I only want to submit the textbox that has just been typed into.
I know how to find out which key was pressed using jquery but I think in my scenario, I need to see if the cursor was inside a specific textbox. is this right? if so, how is this achieved using jquery? In general is my approach ok? or should I definitely have a submit button?
kem...
Please be aware this is considered bad practice; not only are you going to restrict the submission only to people with JS enabled, people expect to have a submit button to their forms. It's how the web works. The proper way of doing this is to have a form for each of your textboxes.
That being said, if you had a set of text fields:
<input type='text' name='x1' class='onenter'>
<input type='text' name='x2' class='onenter'>
<input type='text' name='x3' class='onenter'>
You could do this with jQuery:
$(function() {
$('input.onenter').keyup(function(e) {
if(e.keyCode == 13) {
// enter was pressed, do whatever
// $(this) is the current textbox
}
});
});
"whatever" could be an asynchronous request or an actual form submission, depending on your needs.
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.