I'm receiving this error after auditing my product page in Chrome:
Form elements do not have associated labels
Failing Elements
input#quantity_5ce535030e171.input-text.qty.text
input#woocommerce-product-search-field-0.search-field
Labels clearly indicate input tags with for attribute.
Element #1:
<div class="quantity">
<label class="screen-reader-text" for="quantity_5ce535030e171">My product name</label>
<input type="number" id="quantity_5ce535030e171" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Qty" size="4" inputmode="numeric">
</div>
Element #2:
<form role="search" method="get" class="woocommerce-product-search" action="https://example.com/example-product/">
<label class="screen-reader-text" for="woocommerce-product-search-field-0">Search for:</label>
<input type="search" id="woocommerce-product-search-field-0" class="search-field" placeholder="Search products…" value="" name="s">
<button type="submit" value="Search">Search</button>
<input type="hidden" name="post_type" value="product">
</form>
Is there anything incorrect in html or Chrome gives false errors?
Looks like this was a bug fixed in axe-core 3.2.0 according to this GitHub issue, but the fix is still not incorporated into Lighthouse as of Chrome version 75.0.3770.142.
Lighthouse uses Axe for the accessibility portion of its audit, but you can run Axe as a stand-alone Chrome extension. I ran the stand-alone extension (version 3.8.0 with axe-core 3.2.2) on a site I'm working on that uses visually hidden form labels and it passed; whereas Lighthouse still failed with the error you mentioned. From what I can tell, based on the learn more links from audit results, Lighthouse is using version 3.1 of axe-core.
As long as styles for .screen-reader-text don't use display:none;, visibility: hidden;, or zero out the width or height, it should pass the stand-alone Axe extension audit.
Related
I have a form with HTML5 validation throughout - like this:
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<label>Name: <input type="text" name="Name" required></label>
<label>Address: <input type="text" name="Address" required></label>
<label>Zip: <input type="text" name="Zip" required></label>
<label>Message: <input type="text" name="Message"></label>
<input type="submit" name="Submit" value="Submit">
</form>
But I've noticed that some forms are coming in partially filled out. I checked server logs and it looks like these are coming from IE11 on Windows 10.
I've been trying to reproduce the behavior but so far the only way I've been able to bypass the HTML5 validation in IE11 is to use the Developer Tools to manually add the novalidate property directly to the form before clicking Submit. Are people really going to this length or is there some other browser setting that would be more commonplace?
The users in question are unlikely to be very advanced, but I could possibly imagine a corporate security policy setting somewhere disabling form validation.
I can find a lot of references even on StackOverflow that Chrome Auto-fill functionality should work if autocomplete="on".
However that does not seem to be the case with the latest Chrome I have here (60.0.3112.90). To be precise - default browser autocomplete works fine , but Auto-fill will ignore the field completely.
The code below won't work with Chrome Auto-fill:
<form method="post" name="checkout" url="/">
<input type="text" name="given-name" autocomplete="on" />
<input type="text" name="email" autocomplete="on" />
</form>
However, this will work without issues:
<form method="post" name="checkout" url="/">
<input type="text" name="given-name" autocomplete="given-name" />
<input type="text" name="email" autocomplete="email" />
</form>
You can easily test it here: https://jsfiddle.net/kw4yjpz4/
Screenshots:
Does it mean that all input fields now have to have autocomplete="[NAME]" for auto-fill to work? Is this a bug in the newest Chrome or intended behaviour?
I stumbled across this same issue and searching led me here... I moved on not finding an answer and finally stumbled across the answer to my cause of the issue, so I came back in case someone like me wanders through with the same issue (likely myself in 2 years when I've forgotten about it - hi, me!).
Turns out if the site does not have a valid SSL cert, Chrome Autofill does not work.
Try the following:
<!DOCTYPE html>
<html>
<body>
<h2>The autocomplete Attribute</h2>
<form action="/action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
<p>Fill in and submit the form, then reload the page to see how autocomplete works.</p>
<p>Notice that autocomplete is "on" for the form, but "off" for the e-mail field.</p>
</body>
</html>
The above works as I want in Chrome when the site has a valid SSL cert. Saving locally and opening the .html results in Autofill not working.
Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
The autocomplete attribute works with the following types: text, search, url, tel, email, password, datepickers, range, and color.
And It contains only on|off Value for 'autocomplete' attribute.
In some browsers you may need to activate an autocomplete function for this to work (Look under "Preferences" in the browser's menu)
autocomplete works once you submit the data see
https://jsfiddle.net/0x31Loo1/#&togetherjs=CtJMLzM7AP
<form method="post" name="checkout" url="/" autocomplete="on">
<input type="text" name="given-name" />
<input type="text" name="email" />
<input type="submit">
</form>
I'm implementing your average SSL secured payment form, and I've been able to get Chrome to consistently autofill stored credit card entries from a logged-in Google account. However, I haven't been able to find the magical series of bits and config to coerce it into prompting me to save new credit card entries.
Lets take a stripped down set of payment fields:
<form action="/someroute" method="post" id="pmntForm" autocomplete="on">
<h2>Auto Fill Test</h2>
<label for="nameoncard">Name on Card</label>
<input type="text" id="nameoncard" name="nameoncard" autocomplete="cc-name">
<label for="ccnumber">Credit Card Number</label>
<input type="text" id="ccnumber" name="ccnumber" autocomplete="cc-number" />
<label for="cc-exp-month">Expiration Month</label>
<input type="number" id="cc-exp-month" name="cc-exp-month" autocomplete="cc-exp-month">
<label for="cc-exp-year">Expiration Year</label>
<input type="number" id="cc-exp-year" name="cc-exp-year" autocomplete="cc-exp-year">
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv" autocomplete="cc-csc">
<input type="submit" value="Submit" name="submit">
</form>
This does exactly what I want for autofilling existing cards in my Chrome account:
However if I enter a full set of new payment data; I expect that by the time the user clicks submit - Chrome should prompt to save the data as a new credit card entry (ironically this image is from a post of someone wanting to disable this):
Here's a jsfiddle in react, but it should answer your question.
Jsfiddle
<form name="ccform" action="">
<input name="cc-number" placeholder="Card Number" autocomplete="cc-number" />
<input name="cc-csc" placeholder="Security Code (CVC)" autocomplete="cc-csc" />
<input name="cc-exp-month" placeholder="MM" autocomplete="cc-exp-month" />
<input name="cc-exp-year" placeholder="YYYY" autocomplete="cc-exp-year" />
</form>
Resources:
How to trigger Autofill in Google Chrome?
How does Chrome detect Credit Card fields?
Chrome credit card autofill not being triggered
html5rocks: requestAutocomplete - take my money, not my time
You could also use the chrome dev tools to checkout other websites who have a working autocomplete form such as these:
Airbnb
creditcard.js
I'll add more when I find some
Not the perfect answer, but hope it helps! I will update when I find the completely correct solution. :)
I am building a Bootstrap form and the email and password form elements show with pre-populated data from some other or some earlier form login on a different site. The Chrome browser is auto-populating the form elements.
Is there an HTML attribute of method in Bootstrap to force these form elements to null or empty on page load?
2015-10-29 -- here's the markup:
<form autocomplete="off" method="post" role="form">
<div class="form-group">
<input name="formSubmitted" type="hidden" value="1">
</div>
<div class="form-group">
<label for="username">Username</label>
<input autocomplete="off" autofocus="autofocus" class="form-control" id="username" name="username" required type="text">
</div>
<div class="form-group">
<label for="password">Password</label>
<input autocomplete="off" class="form-control" id="password" name="password" required type="password">
</div>
<button class="btn btn-default" type="submit">Login</button>
</form>
Use autocomplete="new-password"
Works a charm!
Use the autocomplete="off" attribute on the <form> or <input>.
from MDN:
autocomplete
This attribute indicates whether the value of the control can be
automatically completed by the browser.
off The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method;
the browser does not automatically complete the entry.
on The browser is allowed to automatically complete the value based on values that the user has entered during previous uses...
Also from MDN, see: How to Turn Off Form Autocompletion
Also see:
Chrome Browser Ignoring AutoComplete=Off
"AutoComplete=Off" not working on Google Chrome Browser
autocomplete ='off' is not working when the input type is password and make the input field above it to enable autocomplete
The Submit button on this form does nothing unless I remove style="display:none" from the template=row div. Why??
(The name of each form control is populated dynamically by javascript, however, to simplify troubleshooting, I ran the form without the javascript and the problem boils down to whether or not that display tag is there).
This is what Chrome console says:
bundleAn invalid form control with name='' is not focusable.
bundleAn invalid form control with name='label' is not focusable.
bundleAn invalid form control with name='unique' is not focusable
HTML:
<form method="POST" action="/add/bundle">
<p>
<input type="text" name="singular" placeholder="Singular Name" required>
<input type="text" name="plural" placeholder="Plural Name" required>
</p>
<h4>Asset Fields</h4>
<div class="template-view" id="template_row" style="display:none">
<input type="text" data-keyname="name" placeholder="Field Name">
<input type="text" data-keyname="hint" placeholder="Hint">
<select data-keyname="fieldtype" required>
<option value="">Field Type...</option>
</select>
<input type="checkbox" data-keyname="required" value="true"> Required
<input type="checkbox" data-keyname="search" value="true"> Searchable
<input type="checkbox" data-keyname="readonly" value="true"> ReadOnly
<input type="checkbox" data-keyname="autocomplete" value="true"> AutoComplete
<input type="radio" data-keyname="label" value="label" name="label" required> Label
<input type="radio" data-keyname="unique" value="unique" name="unique" required> Unique
<button class="add" type="button">+</button>
<button class="remove" type="button">-</button>
</div>
<div id="target_list"></div>
<p><input type="submit" name="form.submitted" value="Submit" autofocus></p>
</form>
The cause seems to be HTML 5 constraint validation - it's the require attribute. Chrome has started supporting this with it's recent versions.
Apparently it seems like this is a backward compatibility issue, but you can fix it with setting the formnovalidate attribute for your submit button.
I assume that this is actually a security feature that prevents submitting supposed user data by submitting manipulated, hidden content, this quote points in that direction:
If one of the controls is not being rendered (e.g. it has the hidden attribute set) then user agents may report a script error.
Your inputs are of type text, so their purpose is to let users enter data, submitting their content while hidden is something that a user probably wouldn't want.
If you still want to submit hidden inputs while using client validation, I would suggest using <input type="hidden"> instead - I could imagine that there is no error on validation there because they are intended to be invisible.
I made a JSFiddle to explore your problem here, and I managed to fix it by adding checked to your radiobutton inputs like so: <input type="radio" data-keyname="label" value="label" name="label" required checked>. In your code above, the radio buttons are not checked, but since they are marked as required the form is failing validation and Chrome refuses to submit the form.