I have a form as shown below in which I placing an alt text which will display on the webpage.
<form action="/action_page.php">
Alt <input type="text" name="e1_alt" required>
<input type="submit">
</form>
The form here will not save because I have used the required field in it. What I want to achieve is that a warning sign should be displayed if it is empty but it should not stop the user from saving it.
Problem Statement: I am wondering what changes I should make in the HTML code above or JavaScript code I need to add so that a warning sign should be displayed if it is empty
but it should not stop the user from saving it.
You can't really do it purely in HTML. Javascript would need to handle the validation. HTML5 forms will not submit if you have a required field empty, since that's how the browsers handle them. You could add novalidate to the form as an attribute, but you'd still need to have some javascript to handle showing the 'warning sign
Here is a working fiddle to show you how you might go about using JS to show the warning:
$('[name="e1_alt"]').blur(function(e) {
var value = $(e.currentTarget).val();
if (value.length === 0) {
$('.error').show();
}
});
Is it possible after processing any login Form to prevent the browser from offering the option to remember the password?
I know it's been asked and answered here but none of the answers have worked so far, even one of them suggested using:
autocomplete="off"
But that also didn't worked.
I'm using AngularJS and Jade as templating engine (not sure if relevant or not anyhow), is there any way to do this?
if a site sets autocomplete="off" for a form, and the form includes username and password input fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits this page.
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
You should also set autocomplete="off" on your input as well as your form.
Google Chrome release notes:
The Google Chrome UI for auto-complete request varies, depending on whether autocomplete is set to off on input elements as well as their form. Specifically, when a form has autocomplete set to off and its input element's autocomplete field is not set, then if the user asks for autofill suggestions for the input element, Chrome might display a message saying "autocomplete has been disabled for this form." On the other hand, if both the form and the input element have autocomplete set to off, the browser will not display that message. For this reason, you should set autocomplete to off for each input that has custom auto-completion.
I would suggest using Javascript to create a random number. Pass that random number to your Server Action using a hidden field, then incorporate that random number into the names of the "login" and "password" fields.
E.g. (psuedo code, the exact syntax depends on whether you use PHP, jQuery, pure Javascript, etc.)
<script>
var number = Math.random();
var login_name = 'name_'+number;
var pass_word = 'pass_'+number;
</script>
<input name='number' value="number" type='hidden'>
<input name="login_name" type='text'>
<input name="pass_word" type='password'>
Your server reads the "number" field, then uses that to read "name_"number value and "pass_"number value.
It won't matter whether or not the user saves their password in the browser, since every time the user logs in, the name and password fields will be different.
Since you're using AngularJS, you can leave the field unnamed, and access the data it contains through the model :
Login: <input ng-model="login" type="text" />
Password: <input ng-model="password" type="password" autocomplete="off" />
and in your javascript file :
$scope.doLogin = function() {
var dataObj = {
login: $scope.login,
password: $scope.password
};
var res = $http.post('/login', dataObj);
}
Tested in IE10 and Chrome 54
This post is little bit old now, but sincce I found a solution that works for me (at least with Chrome version 56), I'll share it here.
If you remove name and password attributes on your input, then Chrome won't ask to save the password. Then you just have to add the missing attributes by code just before submitting the form:
<!-- Do not set "id" and "name" attributes -->
Login: <input type="text">
Password: <input type="password">
<!-- Handle submit action -->
<input type="submit" onclick="login(this)">
Then in Javascript:
function login(submitButton) {
var form = submitButton.form;
// fill input names by code before submitting
var inputs = $(form).find('input');
$(inputs[0]).attr('name', 'userName');
$(inputs[1]).attr('name', 'password');
form.submit();
}
I hope this will help. Tested on Chrome 56 only.
The problem I have is that while I understand the 'annoyance' to a user in not being able to have their browser remember their password and I don't want to 'disable' that feature completely, there are times when I want to disable it for just a certain password field. Example for me being a 'reset your password' dialogue box.
I want to force them to have to re-enter their old password and then of course type the new one twice.
It's been my experience that no matter what I name that 'old' password input, it is auto-filled with the 'remembered' password (in Firefox 49.0.1 anyway). Maybe this is where I'm getting this wrong, but it just fills it no matter the fact that this input's name is different from saying the login input field.
The behavior I see is basically that the browser seems to say "This user has remembered a password for this site, so now just fill every input type='password' box with that password no matter the name. It seems to me that this should be based on the name attribute, but for me (on multiple sites I've worked on) this just does not seem to be the case.
My solution:
Color this password field to the same color as the background of your input so the 'password dots' is essentially invisible on page load.
onload, onblur, after a timeout, or however you want to do it, use JQuery or JS to set the value of that password field to nothing (blank), then set the color of the field to whatever it is supposed to be.
$("#old_password").val('').css('color','black);
I've discovered that Firefox 52.0.2 is incredibly determined to remember the autocompletion values. I tried almost everything suggested above, including changing the name attributes to random values. The only thing that is working for me is setting the values to "" with Javascript after the browser has had its way with the form.
My use case is lucky in that I do not have to resort to CSS tricks to prevent a confusing and/or annoying flash of autocompleted form values (as proposed by #MinnesotaSlim above) because my form is hidden until they click a button; then it's displayed via a Bootstrap modal. Hence (with jQuery),
$('#my-button').on("click",function(){
$('#form-login input').val("");
});
// this also works nicely
$('#my-modal').on("show.bs.modal",function(){
$('#form-login input').val("");
})
And I imagine you might be able to get the same effect by having your form initially hidden, and in your document load event, manually override the browser and then display the form.
For me, the only solution that reliably worked was to empty username and password input element just before submitting form combined with replacing submit button for the regular button with onclick handler.
NOTE: We use Microsoft MVC so we needed to populate ViewModel with entered credentials. Therefore we created hidden input elements bound to model and copied credential values to them before emptying visible inputs.
<form>
<input id="UserName" name="UserName" type="hidden" value="">
<input id="Password" name="Password" type="hidden" value="">
</form>
<input id="boxUsr" name="boxUsr" type="text" value="" autocomplete="off">
<input id="boxPsw" name="boxPsw" type="password" autocomplete="off">
<input type="submit" value="Login" onclick="javascript:submitformforlogin()">
function submitformforlogin() {
$("[name='boxPsw'],[name='boxUsr']").attr('readonly','true');
var psw = document.getElementsByName('boxPsw')[0];
var usr = document.getElementsByName('boxUsr')[0];
if (psw.value != "false") {
$('#Password').val(psw.value);
$('#UserName').val(usr.value);
psw.value = "";
usr.value = "";
$("form").submit();
} else
window.alert("Error!");
}
Here is a page with:
<form action="action.php" method="get" autocomplete="on">
First name:<input type="text" name="fname"><br>
E-mail: <input type="email" name="email"><br>
<input type="submit">
</form>
Let's enter the 2 fields, and submit. Then when reloading the page, the fields are not autocompleted, why?
Should I use local-storage? cookies? to be sure that a user that comes back a few days after will still have its fields autocompleted?
(I'm using Firefox with default options about autocompletion, i.e. not disabled).
Firstly you need to realise that an attribute on the element without any coding on your part is entirely browser implemented.
Browsers implement these things differently.
You should check the spec. There you will notice that, actually,
By default, the autocomplete attribute of form elements is in the on state.
The only solution to the problem you are having is to say that, if you want a more reliable and consistent, user experience; don't rely on browser implementation.
The short answer: Use Javascript
There are hundreds of plugins that will do this for you. I will point you to one that has been popular on github recently but will need you to actually need to tell this plugin what you expect it to do: https://leaverou.github.io/awesomplete/
Updated Answer:
I see that you just want to prefill the field. This can be accomplished with something like this (untested):
var form = document.forms["name_of_your_form"];
form.onsubmit = function(){
localStorage.setItem("fname", form.elements["fname"].value);
localStorage.setItem("email", form.elements["email"].value);
}
window.onload = function() {
form.elements["fname"].value = localStorage.getItem("fname");
form.elements["email"].value = localStorage.getItem("email");
}
I have this error but I can't see how to fix it. I've used JSLint with some results (it just tells me document isn't a global value, or the 'else clause' was not needed, etc) but no solution.
I have a form to be submitted and I need to compare that both email fields are equal. So I want a nice simple email1 == email2 script, jQuery isn't my strongest point, but I came up with this:
My form ID is "regIn", my email fields are type="email" (HTML5) and id="MailA" and id="MailB" respectively.
I have preloaded jquery 1.11.1.min.js
My jQuery code (see below why the #forgotten is still in there):
$(document).ready(function() {
$('#forgotten').click(function() {
$('#passbox').toggle(360);
return false;
});
$('#regIn').submit(function() {
// * referenced; but this isn't in the code: alert('alert1');
if ($('#MailA').val() === $('#MailB').val()) {
return true;
}
$('#errorMsg').innerHTML("Emails need to be the same!");
alert('Hello');
return false;
});
});
So - I use Alerts to see how far the script gets (i know, tacky debugging). firebug doesn't report page errors or script errors that I can see. The "alert 1" always fires on form submission, and successfully shows me the values of #MailA.val() and #MailB.val(),
But the if statement doesn't seem to fire at all. I have tried making the values variables (var d1 = $('#MailA').val() etc. ) but that doesn't change anything, the form always submits and neither the if or the else (which did surround the text below the if statement clause but JSLint said it wasn't needed so I removed it).
I have also used variations of syntax, using != and == but was also reading from JSLint that === and !== are preferred.
My HTML:
<form enctype="multipart/form-data" name="regIn" id="regIn" autocomplete="off" accept-charset="utf-8" action="#" method="post">
<div class="inputContainer">
<input type="email" value="" tabindex="31" id="MailA" name="regMailA" required>
</div>
<div id="errorMsg"></div>
<div class="inputContainer">
<input type="email" value="" id="MailB" tabindex="32" name="regMailB" required>
</div>
<div class="registerRow">
<input type="submit" class="regButton" value="Register" tabindex="34">
</div>
</form>
As I said, I've looked around for the last hour or so and I just can't see what it is.
Obviously the code is stripped down for the question, the only other aspect is that there is another piece of jQuery in the document ready function - as shown the #forgotten appears for showing / hiding an info. box, this works fine.
please note that you are using:
$('#errorMsg').innerHTML("Emails need to be the same!");
if you try to alert $('#errorMsg').innerHTML it will be undefined.
When you using JQuery selectors $('#errorMsg') JQuery will wrap the dom object with JQuery dom object that own JQuery special methods(val, html, etc), so you don't have access to the core method innerHTML, instead you should use:
$('#errorMsg').html("Emails need to be the same!");
Enjoy!
I am working on a project which requires a login using Mechanize in python.
It is having trouble accessing the login in the form by its name. I am not too familiar with HTML, but it appears to have something to do with the label that is referencing the login entry field.
For those who are not familiar with Mechanize, you can pretty much ignore that. Just know that br.form['xzy'] = '123' sets the field with a name of 'xyz' to '123' in whatever current form is selected. So in short the problem is finding either the correct name for the username entry field or a workaround.
This is what the python mechanize code looks like...
br.select_form(nr=0)
br.form['username'] = 'dave'
br.form['password'] = 'cats123'
session = br.submit()
This is what the input looks like in the HTML of the page I'm working on...
<label for="username" class="fl-label"><span class="accesskey">A</span>ccount:</label>
<input id="username" name="username" class="required" tabindex="1" accesskey="n" type="text" value="" size="32" autocomplete="false"/>
And here is the error I am running into...
File "vcl.py", line 12, in maristLogin
br.form['username'] = 'steh'
mechanize._form.ControlNotFoundError: no control matching name 'username'
are there any other forms on the page or is the entire page on that pastebin?
you could always give the following code a go to make sure you're getting the form you want.
for form in br.forms():
if form.attrs['id'] == 'fm1':
br.form = form