I would like to make my website work identically on every browser.
Unfortunately, the validation mechanism introduced their differences.
Field of type 'e-mail' on Chrome and Opera 'trim';delete blank spaces on input of e-mail field and Firefox no cuts signs and do not accept e-mail in this form.
<input type="email" id="e-mail" class="" name="e-mail" value="" placeholder="" autocomplete="off">
Example:
If you want to get the same behavior between browsers while keeping the email verification, you can trim the field on blur:
document.getElementById("e-mail").addEventListener("blur",function(e){
this.value = this.value.trim();
});
<input type="email" id="e-mail" class="" name="e-mail" value="" placeholder="" autocomplete="off">
Related
I'm trying to add an email input to my form in HTML5, but somehow it still allows me to write anything without # and the other stuff that an email contains.
<input class="form-control" type="email" id="email" name="email" required>
Also tried:
<input type="text" pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" class="form-control" id="email" name="email" required>
and still nothing happens if I write it incorrectly.
If you are not trying to validate while typing, then it will automatically show error after you submit it.
Using Html5 I've a view which contains an email input field.
So to validate the correct email address I am using pattern attribute for validation.
But that is not working correctly, the problem I am facing here is though I enter invalid email address as abc#gmail the validation is not working.
i tested the same regex pattern in fiddler, it is working fine there, but coming to my application it is not working correctly. Please help me out with this.
Here is my view:
<form>
<input type="email"
class="form-control"
data-val="true"
data-val-required="please enter an email address"
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+.[a-z]{2,4}$"
required>
<input type="submit" />
</form>
Regex should be
[a-z0-9._%+-]+#[a-z0-9.-]+.[a-z]{2,}$
instead of
[a-z0-9._%+-]+#[a-z0-9.-]+.[a-z]{2,4}$
So the html input would be:
<input type="email"
class="form-control"
data-val="true"
data-val-required="please enter an email address"
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,}$"
required>
NOTE: difference in regex is {2,} and {2,4}
I'm using the autocorrect "off", etc. in input boxes on my site. However, Safari on Mac OS X still auto corrects text input.
This is what I have:
<input autocomplete="off" autocorrect="off" autocapitalize="off" type="text" name="url" placeholder="Enter a web address">
But when I test it on Safari version 9 (Mac OS X v10.11 (El Capitan)), it is still autocorrecting the text.
Is there a more robust answer? Is the new version of Safari overwriting it?
You need to add spellcheck="false" to your input.
<input autocomplete="off" autocorrect="off" autocapitalize="off" type="text" name="url" placeholder="Enter a web address" spellcheck="false">
Fiddle
If you have to do this with jQuery, you'll need to leave the quotes off of false.
$(this).prop("spellcheck", false); // this works
$(this).prop("spellcheck", "false"); // this does NOT properly set the property
Change input type from text to search
<input type="search">
Or
https://discussions.apple.com/thread/8325873
I am trying to make a login form. But the text and password field of that form is not working properly. I have tested the code in all major browsers but different browser's giving different output. Firefox shows my password field is already filled, chrome shows both of the input fields are filled but IE shows it perfectly. I have already used "autocomplete" attribute. But it didn't change anything. Can anyone help me to get rid of this annoying problem? My html code-
<form method="POST">
User Name : <input class="form" type="text" name="text" id="username" maxlength="100" size="20">
Password : <input class="form" name="password" type="password" id="password" maxlength="16" size="20"><br><br>
<input type="submit" name="submit">
</form>
screen shots:- [firefox,chrome,IE]
In terms of chrome:
You've saved the username and password. It's prepopullated by chrome. That's why its showing that way.
Regarding firefox
I guess you've saved password here again. Because i've tested it in firefox and it's rendering properly. Else you've set the value attribute.
From settings, remove saved password for your page and try.
The HTML you have written is invalid and has unclosed elemens, your input fields should end with \> making your code look as follows:
<form method="POST">
User Name : <input class="form" type="text" name="text" id="username" maxlength="100" size="20"/>
Password : <input class="form" name="password" type="password" id="password" maxlength="16" size="20"/><br><br>
<input type="submit" name="submit"/>
</form>
Since you were not closing the input fields, your browser would automatically close them on your behalf, I would imagine that it has closed them after the <br> tags and therefore rendering them as the value of the input field.
Using autocomplete="off" on a password input is having this effect on the whole form not just the password field.
This wasn't the case in Safari 5.
Even adding autocomplete="on" to other fields in not working.
<form name="login" method="post" action="login.html" >
E-mail<br/>
<input name="email" type="text" ><br/>
Password<br/>
<input name="password" type="password" autocomplete="off" >
</form>
Tried replicating the same on Safari 5.1.7.
I've set form's autocomplete as "on" and didn't make any addition to the password field (not explicitly setting password field's autocomplete "off"). Password field does not show an auto-completed suggestion, while the other fields work fine and shows auto-complete suggestions.
Please let me know in case you need any more explanation.
Following up on my comment:
Have you explicitly set autocomplete="on" at the form level while disabling it for the password? (from w3schools.com: http://www.w3schools.com/tags/att_input_autocomplete.asp )
<form name="login" method="post" action="login.html" autocomplete="on">
E-mail<br/>
<input name="email" type="text" ><br/>
Password<br/>
<input name="password" type="password" autocomplete="off" >
</form>
Also confirm that it is not a browser stored username as password that is being auto-filled? (i.e. "Do you want Safari to remember these credentials?" - Not a big Safari users so not sure how it prompts / manages the credentials store.
try adding a '/' at the end of the password input tags
<input name="password" type="password" autocomplete="off"/>