Input attribute pattern does'nt work on IOS devices - html

The attribute pattern is not working without required and the required attribute is not yet compatible with the IOS devices.
I'm having trouble with minlength because it's not working on my code but maxlength works fine. I can't use oninvalid because I'm using a dynamic form and as well as jquery validate.
Any thoughts or recommendations?
<form method="post">
<input type="text" required pattern=".{3,}">
<input type="submit">
</form>
jsFiddle

Related

Autocomplete off in HTML5

I have tried both autocomplete="off" and autocomplete="false" in HTML5 form but It's not working in chrome version (73.0.3683.103).
Disable HTML Form Input Autocomplete and Autofill
Add autocomplete="off" onto <form> element;
Add hidden <input> with autocomplete="false" as a first children element of the form.
<form autocomplete="off" method="post" action="">
<input autocomplete="false" name="hidden" type="text" style="display:none;">
...
This formation is going to prevent Chrome and Firefox to offer autofill and autocomplete for all input fields inside the form. (as discussed here)
Although it is known that some browsers ignore this; there's a full discussion in the link attached to this thread of possible fixes.
Now works for me in Chrome 72.0.3626.121 having never worked
previously.
I had been using <input type="text" id="something" pattern="[ \S]+" role="presentation" autocomplete="nope"> but that now doesn't work.
You can read more about autocomplete on MDN.
You can also opt to use some sort of library if relevant.
There doesn't seem to be one working solution from the investigation above though.
Read more about this on stackoverflow.

An autocomplete="off" example works, my code autocomplete="off" does not?

I'm trying to resolve a Chrome autocomplete aggravation with my small web based work order form. I have tried to use autocomplete="off" in my html code, it doesn't work. When I 'Inspect' my page code in Chrome it always displays autocomplete="on" with autocomplete="off" or other wrong terms for off.
But this user's autocomplete="off" demo works perfectly for me. What am I missing?
My code:
<input name="contact_first" style="border:1px solid #737373"
class="required" id="contact_first" value="<?php echo
$row_contact['contact_first']; ?>" autocomplete="off" size="25" />
Example working code:
<label for="firstName2">First Name (WITH autocomplete):</label>
<input id="firstName2" name="firstName2" autocomplete="off">
I have actually cut and pasted the jsfiddle example code from the working example to a small test web form of mine, autocomplete does not stop.
This may affect other browsers also, but I use Chrome primarily.
Any advice appreciated.
Try to use autocomplete="new-password" to disable the Chrome auto-fill functionality (different from basic autocomplete).

How to change the language of browser native datePicker?

Hello I was playing around with HTML5 datePicker and I was wondering how I could change the default language of the widget. How to change the lang from english to german? Any idea?
<form action="/action_page.php">
Birthday:
<input type="date" name="bday">
<input type="submit">
</form>
Thanks
the most common way to force to change the language is the next :
<form lang="es">
<input type="text" pattern="\d{1,15}" required />
<input type="submit" />
</form>
if you want more information about declare language, can you learn more in the next links :
http://nimbupani.com/declaring-languages-in-html-5.html
I hope my answer is helpful.
type date for html is browser native control, at least for chrome this stands true. So it will be localised according to the language of the browser. However frameworks like bootstrap has better locale support or even you can set locale settings in jquery manually with some scripting at server side.
This works on safari but not in Chrome or Firefox:
<form action="/action_page.php">
Geburtstag:
<input type="date" name="bday" placeholder="tt/mm/jj">
<input type="submit" value="einreichen">
</form>
However you can use polyfills to make it work on all browsers.
Look at this example of a module to understand it better.

How to prevent browser trying to auto-validate email address field?

My input is as follows:
<input id="AdministratorEmail" type="email" maxlength="255" novalidate="novalidate" name="data[Administrator][email]">
Why is the browser (have tested in Firefox and Chrome) still trying to auto-validate the email field for me when I have the novalidate attribute specified?
How can I prevent this from happening?
I am using CakePHP if it is of any relevance.
The problem was that I was using the novalidate attribute on individual inputs, which is incorrect. As mata pointed out, it is not a recognised attribute of inputs, but an attribute of the HTML form tag itself.
Solution
<form novalidate="novalidate">
<input type="email" name="email" />
</form>
As you can see, you do not need to change the type to type="text", and like any other boolean attribute, novalidate can be added in multiple ways and all are acceptable.
<form novalidate> <!-- Also acceptable -->
Solution for CakePHP
echo $this->Form->create('MyModel', array(
'novalidate' => true
));
echo $this->Form->input('email');
Thanks to mark for this.
Because of type="email".
Set this to type="text". It will work the same but without the validation.
This is thanks to built-in email validation that most major browsers use. I have personally never heard of the novalidate attribute.
EDIT: I've just read up on novalidate, you should type it like so:
<form novalidate>
instead of
<form novalidate="novalidate">

Why doesn't the browser give suggestions for this text field?

I have a basic text input for a login form and I'd like the browser to remember email addresses that the user has entered, but it's not working. I don't think I should need to add a full auto-complete system to get this to work since it's something the browser should be doing. I don't see anything special on sites I've visited where this works.
If I search for this problem all the answers are about disabling autocomplete.
Here's my login form:
<form id="login-form">
<fieldset>
<input id="email" type="email" placeholder="Your email" required="" >
<input id="password" type="password" placeholder="Pick a good password" required="" minlength="6">
<button class="login">Register</button>
</fieldset>
</form>
So the problem here seems to be that I didn't have a "name" attribute on my input. It also seems that I need to have specific values for the name. "email" works and "login" works, but "user_email" and "foo" don't work.
Surprisingly this started working as soon as I added 'name="email"' to the input, so it seems that Chrome was saving the values, but wasn't showing them.
This simple input is all you need for Chrome to do email autocomplete:
<input name="email">
I do not believe that you can force a user's browser to autocomplete.
HTML5 has an autocomplete form attribute.
Here is the W3C spec for autocomplete attribute.
However, even if you set this attribute to "on", the autocomplete of HTML forms is going to depend on the client's browser settings and configuration.
Although you can, as you said, disable autocomplete, there is not a way you can force the user's browser to autocomplete a form if they configure their browser not to remember form history.
For example, here is how to disable autocomplete for Firefox: https://developer.mozilla.org/en-US/docs/Mozilla/How_to_Turn_Off_Form_Autocompletion