I'm using Firefox plugin to validate html errors on the page. It displays a warning:
An HTML tag has a mandatory attribute, but this attribute is missing.
Example:
not good: <form>
good: <form action="my_action.jsp">
Actually I put the <form></form> tags to give a name to use it as a parameter for javascript function.
The code looks like:
<form name="items">
<select name="selectitem" onchange="displayfunc(this.form)">
<option value="1">one</option>
...
<option value="8">eight</option>
</select>
</form>
Everything works fine, but that warning.. Should I fix it? If yes, then how?
BTW, FF displays "<form> lacks "action" attribute" warning on the stackoverflow page as well. I've found a similar thread required attribute “action” not specified, but I'm still not sure what to do if there is no action="" for the form.
If you don't want users to be able to submit the form, then you shouldn't be using the form element. Use something like <div id="items"></div> instead to contain your input items.
BTW, just because another website does something that violates standards doesn't mean you should. :)
Since you will not submit your form, you can set action to pretty much everything you want to.
<form action="#"> is the shortest option.
Related
I understand the general semantics of a <fieldset>, along with how the name attribute on a <fieldset> can be used to give meaning to a group of inputs. The W3 wiki has a number of examples with this.
However, I don't understand what the name attribute on <fieldset> elements do when submitting forms. According to MDN, the name is submitted with the form data. W3C also mentions that it's for the element's name, which is used in form submission.
When trying out the name attribute on a <fieldset> though, I don't see it being submitted with the rest of the form data. It's unclear to me if it has any use other than semantics.
Is the name attribute on <fieldset> elements supposed to be submitted with the form data? If so, does it have a value? What does it do?
However, I don't understand what the name attribute on <fieldset> elements do when submitting forms.
Nothing.
You've tested this yourself:
When trying out the name attribute on a <fieldset> though, I don't see it being submitted with the rest of the form data.
It appears to be an error in the summary of the spec (presumably copied from input at some point) which has been copied onto the MDN reference.
The rules for form submission don't mention fieldsets.
W3C also mentions that it's for the element's name, which is used in form submission.
The complete quote is:
name - Name of form control to use for form submission and in the form.elements API
The form.elements API (along with generic DOM APIs like getElementsbyName) is the only place where the attribute has any actual effect.
This is a bit strange to me, but it seems the purpose is so that you can access it via myForm.elements like you can any other form element. Fieldsets do have some relevance to how your form functions (for example, making a fieldset "disabled" will apply to all its child form controls), so I guess this is something some developer might want to do.
I'm pretty sure that's the only use for it. Fieldsets can't have a value (even if you set one, your browser should ignore it and not submit it), so it'll never be included in what is sent to the server.
Here's a little test I made trying to understand this:
var fruitform = document.getElementById("fruitform");
var output = document.getElementById("output");
function log(msg) {
output.innerHTML = output.innerHTML + "\n" + msg;
}
log("*** fruitform.elements ***")
log(JSON.stringify(fruitform.elements));
log("");
<h2>test form</h2>
<!-- the 'action' url' is just a page that outputs any GET parameters you pass to it -->
<form action="http://www.w3schools.com/html/action_page.php" id="fruitform">
<fieldset name="facts">
type:
<input type="text" name="type" value="banana">
<br><br>
color:
<input type="text" name="color" value="yellow">
</fieldset>
<br>
<input type="submit">
</form>
<!-- place to put some output -->
<h2>output</h2>
<pre id="output">
</pre>
(here's the same demo on codepen)
I agree with #Quentin .
The fieldset seems to not even be sent to the server, just the input field:
How do I force md-select in multiple mode to behave just like
<select multiple required ... >
?
Here is the fiddle, to show what I mean. In this example, my browser doesn't let me submit form without selecting at least 1 option from the select tag.
I want md-select to behave similarly, but I don't know how can I do that - neither putting 'required' attribute nor adding 'ng-require' directive helps.
You can rely on Angular to do the validation for this, rather than the browser. Here's my forked example:
http://codepen.io/anon/pen/rVGLZV
Specifically:
<button type="submit" ng-disabled="myForm.$invalid">submit</button>
To keep the submit button disabled until the form is valid and,
<form novalidate name="myForm">
To name the form and tell the browser not to do its own validation on it.
You could even add some CSS class for ng-invalid to show red around the invalid fields.
EDIT: Make sure you put an ng-model on your <select multiple>, otherwise the required attribute won't work.
If you don't want to disable submit button but instead trigger error when submit button is hit, you can set the $touched property to true to trigger required alert
yourFormName.mdseletName.$touched=true;
I have a form with <input type="submit">. In Chrome submit doesn't do anything. On a Network tab in developer tools I see nothing. No errors in developer tools either. Meanwhile, if I do save a page and open a saved page, then after I press submit button, I see something appears in Network tab. This happens in Chrome and Firefox. This works as expected in IE.
Does anybody have a hindsight, what should I look at?
I don't need a direct answer, I only need to know, where should I look at. If someone posts a direction and that'll help me to solve my problem, I'll accept it as a correct answer.
Structure of a page looks like this:
html
head
body
div
div
form
form
form
form
form
input
input
table
table
tbody
tr..td..input type=submit
If you are not using any JavaScript for form validation then a simple layout for your form would look like this:
<form action="formHandler.php" method="post">
<input name="fname" id="fname" type="text" value="example" />
<input type="submit" value="submit" />
</form>
You need to ensure you have the submit button within the form element and an appropriate action attribute on the form element is present.
For a more direct answer, provide the code you are working with.
You may find the following of use: http://www.w3.org/TR/html401/interact/forms.html
Are you using HTML5? If so, check whether you have any <input type="hidden"> in your form with the property required. Remove that required property. Internet Explorer won't take this property, so it works but Chrome will.
I faced this problem today, and the issue was I was preventing event default action in document onclick:
document.onclick = function(e) {
e.preventDefault();
}
Document onclick usually is used for event delegation but it's wrong to prevent default for every event, you must do it only for required elements:
document.onclick = function(e) {
if (e.target instanceof HTMLAnchorElement) e.preventDefault();
}
Hello from the future.
For clarity, I just wanted to add (as this was pretty high up in google) - we can now use
<button type="submit">Upload Stuff</button>
And to reset a form
<button type="reset" value="Reset">Reset</button>
Check out button types
We can also attach buttons to submit forms like this:
<button type="submit" form="myform" value="Submit">Submit</button>
Check if you are using any sort of jquery/javascript validation on the page and try disabling it and see what happens. You can use your browser's developer tools to see if any javascript file with validate or validation is being loaded. You can also look for hidden form elements (ie. style set to display:none; or something like that) and make sure there isn't a hidden validation error on those that's not being rendered.
I ran into this on a friend's HTML code and in his case, he was missing quotes.
For example:
<form action="formHandler.php" name="yourForm" id="theForm" method="post">
<input type="text" name="fname" id="fname" style="width:90;font-size:10>
<input type="submit" value="submit"/>
</form>
In this example, a missing quote on the input text fname will simply render the submit button un-usable and the form will not submit.
Of course, this is a bad example because I should be using CSS in the first place ;) but anyways, check all your single and double quotes to see that they are closing properly.
Also, if you have any tags like center, move them out of the form.
<form action="formHandler.php" name="yourForm" id="theForm" method="post">
<center> <-- bad
As strange it may seems, it can have an impact.
You can't have a form element as a child (directly or indirectly) of another form element.
If the following does not return null then you need to remove the excess form elements:
document.querySelectorAll('form form');//Must return null to be valid.
check your form is outside the table
If I'm using a dropdown using <select> is it ok. I'm asking in terms of Web Accessibility, Web Standards.
<form action="#" class="country-selection">
<select>
<option title="images/india.jpg">India</option>
<option title="images/india.jpg">USA</option>
</select>
</form>
Yes, because the page should work without client-side scripting too. The proper way is to include a real action attribute value, referring to a server-side script, and include a submit button, because that is the only way to ensure submittability when scripting is off. You can wrap it inside a noscript element so that it does not appear when it is not needed, i.e. when client-side scripting is enabled:
<noscript><input type=button value=Change></noscript>
The title attribute values may be displayed or otherwise presented to the user, so they should either contain something sensible (not URLs) or be absent. If you need to include some data for client-side processing, use data- attributes.
No, that is specifically called out as a failure in WCAG 2.0: F37: Failure of Success Criterion 3.2.2 due to launching a new window without prior warning when the status of a radio button, check box or select list is changed.
If you don't have any submit button it is acceptable after all it is an element of form tag and if it is not required you may not add it with in form. This will not broke any web standard.
Sure it's ok, noone is forcing a submit button on you, but you probably won't need an action on the form either.
If you want to submit the form when the user makes a selection, try this
<form action="#" class="country-selection">
<select onChange="javascript:submit()">
<option title="images/india.jpg">India</option>
<option title="images/india.jpg">USA</option>
</select>
</form>
I was contacted by my client saying that users complaint saying that some fields now show a tooltip with a message "Please Fill out This Field". I couldn't believe what I heard... but the client is right - using latest Chrome version some fields show a browser tooltip with this message even side by side with my validators!
What's the problem? What am I missing?
Thanks.
EDIT:
The HTML generated by my user control is as follows:
<input name="tbMontante" type="text" maxlength="8" size="10" tbMontante" class="Montantetextfield"
FieldName="Montante"
Required="True"
AllowDecimalValues="True"
/>
EDIT:
My doctype is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Should my browser use HTML 5 to parse it?
Are you using the HTML5 required attribute?
That will cause Chrome 10 to display a balloon prompting the user to fill out the field.
https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate
You can disable the validation in the form.
Put novalidate="novalidate" on <form> tag.
<form novalidate="novalidate">
...
</form>
In XHTML, attribute minimization is forbidden, and the novalidate
attribute must be defined as <form novalidate="novalidate">.
http://www.w3schools.com/tags/att_form_novalidate.asp
To stop that Html5 popup/balloon in Web-kit browser use following CSS
::-webkit-validation-bubble-message { display: none; }
As I mentioned in your other question:
The problem to do with that fact, that you invented your own non-standard attributes (which you shouldn't have done in the first place), and now new standardized attributes (or attributes in the process of being standardized) are colliding with them.
The proper solution is to completely remove your invented attributes and replace them with
something sensible, for example classes (class="Montantetextfield fieldname-Montante required allow-decimal-values"), or store them in JavaScript:
var validationData = {
"Montante": {fieldname: "Montante", required: true, allowDecimalValues: true}
}
If the proper solution isn't viable, you'll have to rename them. In that case you should use the prefix data-... because that is reserved by HTML5 for such purposes, and it's less likely to collide with something - but it still could, so you should seriously consider the first solution - even it is more work to change.
You need to add the attribute "formnovalidate" to the control that is triggering the browser validation, e.g.:
<input type="image" id="fblogin" formnovalidate src="/images/facebook_connect.png">
If you have an html form containing one or more fields with "required" attributes, Chrome (on last versions) will validate these fields before submitting the form and, if they are not filled, some tooltips will be shown to the users to help them getting the form submitted (I.e. "please fill out this field").
To avoid this browser built-in validation in forms you can use "novalidate" attribute on your form tag.
This form won't be validated by browser:
<form id="form-id" novalidate>
<input id="input-id" type="text" required>
<input id="submit-button" type="submit">
</form>
In Chrome (v.56 is what I'm using but I AFAIK this applies generally) you can set title=" " (a single space) and the automatic title text will be overridden and nothing displayed. (If you try to make it just an empty string, though, it will treat it as if it isn't set and add that automatic tooltip text you've been getting).
I haven't tested this in other browsers, because I found it whilst making a Google Chrome Extension. I'm sure once I port things to other browsers, though, I'll see if it works in them (if even necessary), too.
Hey, we just did a global find-replace, changing Required=" to jRequired=". Then you just change it in the jquery code as well (jquery_helper.js -> Function ValidateControls). Now our validation continues as before and Chrome leaves us alone! :)