I am dealing with html5 forms and I have a field with a required attribute set. When the user wants to submit the form, chrome displays the validation message, that the field must not be empty. Strangely, this message seems to slip under the other html markup. I dont think I have any css set that could cause this.
Is this a bug or am I missing something?
http://www.abload.de/img/errorogbcv.png
the html5 validation message was cut off/ under the dom due to overflow:hidden.
Related
For some reason I'm getting two different kinds of error messages on the same SS 3 form as shown in the referenced screenshot. How do I get rid of the text bubble style error message on the email field and have them all look like the error box on the name field?
Screenshot: http://d.pr/i/ThmL
Bob
In SilverStripe 3.0/1 it enabled the use of the HTML5 required attributes which web browsers pick up and do their own validation for (which you've seen).
If you want to stop the browser behaviour remove the required attribute from the markup SilverStripe provides
TextField::create('MyTextField')->setAttribute('required', false)
This will still make the form field required in the PHP validation but disable the browser popup.
I was just validating some of my html5 pages on W3C with forms (PHP) on them and I get the following validation error:
Error: Bad value for attribute action on element form: Must be non-empty.
I thought that when the form submits to itself, it is good practice to leave the action attribute empty. Is this not the case? How can I fix this?
Thank you!
Simply put in "#".
<form action="#" method=post>
While browsers currently support the empty action since the spec says it's needed browsers in the future may not support it. In my opinion this is unlikely but you never know.
The reason I would add the action attribute is so if there is JavaScript somewhere that is actually posting the form the next developer in line is certain that this is were the form posts to and doesn't have to look though the relevant JavaScript files to see if this is intended or left out on mistake.
It can be fixed my putting the current page in the action attribute.
Hope that helps.
I have a very simple form with a single autocomplete widget. No submit button. I would like the form to act in such a way that it submits the form when the user selects a suggestion from the autocomplete, but does not submit otherwise. The problem is, the form automatically submits, filled in or not, whenever I press enter. However, if I add a hidden text input box, it resolves the issue, and I can only submit the form by selecting a suggestion from the autocomplete (submission via this mechanism is handled by some jQuery). Is there a more 'graceful' way of turning off the submit-on-return feature? Adding a hidden text input that I don't actually need definitely does not seem like the 'proper' way to do this and is probably a browser-dependent fix anyways (I'm using Chrome).
The "submit on enter" is a browser specific implementation. So I don't think there is anything we can do from JS to turn it off.
You might be able to force the issue by listening to "keypress" event in jQuery, but that seems heavy handed.
Another way you could possibly approach this (in theory, never done this) is using HTML5 Data attributes. i.e. on your form, have
<form data-ready="false">
</form>
Then set that attribute to "true" when you've selected your suggestion item.
In your Form submit handler, check for that attribute before deciding to allow form submission, or use .preventDefault() to stop it from submitting to server.
Is there any event raised before the validation of fields in an HTML5 form and before the submit of this form?
AFAIK, the submit event is raised just before the submit of the form, but after the validation step, so this one fires too late for me.
Update: I have a textarea with the "required" property, and if the user has JS I want to substitute it by an HTML editor. The HTML editor syncs its contents with the textarea on submit (after the validation step), so for the browser the textarea is always empty. That's why I'm asking for an event fired before the validation. Any other way answer that solves this problem will be accepted.
No, there is no event which fires before validation happens. There is only the invalid event, which is fired after validation of an invalid field, but before the validation UI is shown (preventing the default prevents showing the browser validation UI).
In case you want to sync two fields, you have to use two events. The first is DOMContentReady and the second is the change event.
Additional info: if you hide the invalid field element, the browser can not show the validation message to the user. You can workaround this with the following code (note this assumes that you are using jQuery 1.6x and a special structure):
$('textarea.wysiwyg').bind('invalid', function(e){
//remove validation bubble
e.preventDefault();
//implement your own validation UI
$(this).next('div.wysiwyg').after('<p class="error">'+ $.prop(this, 'validationMessage') +'</p>');
});
I've been using buttons for quite some time that are structured as follows:
<button type='submit'><em class='ui-icon ui-icon-disk'/><span>Save</span></button>
The tag then uses the jquery-ui icons to show a disk image for the button. PROBLEM: As soon as users started using IE9, they were getting the server error:
A potentially dangerous Request.QueryString value was detected from the client (<em class=ui-icon)
I can only assume that IE9 is posting the form values differently - does anyone know how to stop the browser submitting certain form elements or how to resolve this issue?
PROBLEM SOLVED
If you remove the name attribute from the button element then the form will not submit its value or the value of any element within it.
Use <input type="image"> instead.