We Keep Coding

JavaScript native form abilities [duplicate]

I want to know if there is any way to programmatically show a HTML validation error, using a JavaScript function.
This is useful for scenarios where email duplication has to be checked. For example, a person enters an email, presses the Submit button, and then has to be notified that this email is already registered or something.
I know there are other ways of showing such an error, but I wanted to display it in the same way as how the validation error messages are shown (e.g. invalid email, empty field, etc.).
JSFiddle: http://jsfiddle.net/ahmadka/tjXG3/
HTML Form:
<form>
<input type="email" id="email" placeholder="Enter your email here..." required>
<button type="submit">Submit</button>
</form>
<button id="triggerMsg" onclick="triggerCustomMsg()">Trigger Custom Message</button>
JavaScript:
function triggerCustomMsg()
{
document.getElementById("email").setCustomValidity("This email is already used");
}
The above code sets the custom message, but its not automatically shown. It's only shown when the person presses the submit button or something.

You can now use the HTMLFormElement.reportValidity() method, at the moment it's implemented in most browsers except Internet Explorer (see Browser compatibility at MDN). It reports validity errors without triggering the submit event and they are shown in the same way.

var applicationForm = document.getElementById("applicationForm");
if (applicationForm.checkValidity()) {
applicationForm.submit();
} else {
applicationForm.reportValidity();
}
reportValidity() method will trigger HTML5 validation message.

This question was asked over a year ago, but it's a good question that I recently encountered as well...
My solution was to use JavaScript to create an attribute (I went with "data-invalid") on the <label> of each <input>, <select> and <textarea> containing the validationMessage.
Then some CSS...
label:after {
content: attr(data-invalid);
...
}
... displays the error message.
Limitations
This only works provided each element has a label. It will not work if you put the attribute on the element itself, because <input> elements cannot have :after pseudo elements.
Demo
http://jsfiddle.net/u4ca6kvm/2/

As mentoned by #Diego you can use form.reportValidity();
To support IE and Safari include this polyfill, it just works:
if (!HTMLFormElement.prototype.reportValidity) {
HTMLFormElement.prototype.reportValidity = function() {
if (this.checkValidity()) return true;
var btn = document.createElement('button');
this.appendChild(btn);
btn.click();
this.removeChild(btn);
return false;
}
}

Chome and IE not offering to save password after input type is changed by script

I have a form containing:
<input type="password" id="password" />
in which I wish to temporarily display some readable text, therefore:
$('#password').prop('type', 'text');
but when the type is subsequently changed back to password say:
$('#password').focus(function () {
$('#password').prop('type', 'password');
});
then when the form is submitted, the '...remember password?' dialog in fails to launch in Chrome and IE (it works in Firefox).
If the initial convert to text type is delayed, e.g.
setTimeout(function () {
$('#password').prop('type', 'text');
}, 1);
everything works as required in all browsers.
What's going on?

I suspect the browsers are not offering to save the password either as a security measure or as a bug.
A more reliable solution (and one that gets around security restrictions in IE8) is to create a text field immediately afterwards in the DOM which is hidden. When you want to toggle the display, toggle the visibility on both as well as the name of the field so that server-side code treats both fields equally.
Below is a simple version of how you could accomplish this:
<input type='text' id="thisPasword" name="hello" />
<input type='text' id="thisText" name="helloTmp" style="display:none"/>
function toggle() {
var both = $("#thisText,#thisPassword"),
hidden = both.filter(":hidden"),
visible = both.filter(":visible");
hidden.attr("name", "hello").val(visible.val()).show();
visible.attr("name", "helloTmp").hide();
}
My organization has successfully implemented a solution like this one, which worked across all browsers.

How to stop a browser storing password values

I am going through an old site adding autocomplete="off" onto passwords fields, ensuring they are hashed and so on to try and increase security.
However how can I stop passwords being stored if chosen by the user in the browser. As if someone left their computer unlocked they could easily get into an admin login due to the username and password being pre-filled even with autocomplete="off" on the input boxes.
I thought I could use JavaScript to check for the existence of a value in the password field (e.g when the browser fills it) and then remove it. But to check for a value you need to change the type of the input box to "text" and once you change it back to "password" the browser fills the boxes up again with values.
Is there anyway to stop this as I would have thought that this could be a security hole for those people who use the same passwords etc as you could just change the DOM element to text, view the value in plain text, then try on other sites the same value.
The code I was trying to use was this where
getEl = an old cross browser function for document.getElement
DOM = my own DOM on load function
function clearPSW()
{
var p=getEl('strPassword');
p.setAttribute("type","text");
console.log("value is " + p.value);
// if I exit here without changing back BOTH username and password fields
// remain blank - although the PSW field is now a text field.
//return;
if(p.value!="")
{
console.log("clear");
p = "";
}
// as soon as I do this the browser re-fills the input boxes!
p.setAttribute("type","password");
}
DOM(function(){
console.log("run DOM");
setTimeout(1000,clearPSW());
});
Is there any method at all or is down to the user to be clever and not store passwords in browsers etc? Obviously I am trying to handle these insecure people and force them to re-enter their password each time.
Thanks!

Browsers such as Chrome now ignore autocomplete=off.
It is really up to the user whether they store passwords. If they do they should really lock the desktop when not at the computer and not share their OS account with others.
You could argue that turning autocomplete off means that the user will either pick a really simple to guess password or they will write it on a post-it note and stick it to the keyboard.

Include a hidden password field before your "real" password field:
<input type="password" style="display:none"/>
<input type="text" name="username"/>
<input type="password" name="password"/>
This works!

My solution is:
Change type of that input inside HTML from type="password" to type="text"
Write script that changes type of that input from type="text" to type="password"
suppose that input has id="pwd". Then:
document.getElementById('pwd').setAttribute('type', 'password')
Make a delay for calling this function (because if you would not, most browsers would still insert their cached password. My browser stops doing that when delay is > 1400):
setTimeout(
() => document.getElementById('pwd').setAttribute('type' 'password')
, 1500)

Serverside validation of AngularJS forms, use $setValidity in the view controller?

Or put in tl;dr code:
form.email.$setValidity('conflict', false);
is too sticky for my simple serverside validation flow.
I'm trying to get the form to show good feedback in the event that the user enters an email address already in use by another customer. I'm running AngularJS v1.2 and have this template:
<form name="form">
<input name="email" type="email" ng-model="..." required>
</form>
<div ng-messages="form.email.$error">
<div ng-message="conflict">Email address already in use.</div>
</div>
In my controller, I'll handle the submit event and trigger the validation in my $http.post().error handler like this:
$http.post('api/form/submit/path/here').error(function(resp) {
if (resp.details === 'conflict')
$scope.form.email.$setValidity('conflict', false);
});
The problem is that when the user goes back and changes the value in the input field, the error message doesn't go away. It sticks around until I manually call $scope.form.setValidity();.
The docs say implement a custom directive with an ng-model dependency, but that seems super overkill for my purposes. I've also tried setting $scope.form.email.$valid = false; and $scope.form.email.$invalid = true; but those don't change the appearance of the textbox.

Nothing in your code modifies the conflict validation key, except for when $setValidity('conflict', false) is explicitly called. Since that is the only code setting the state of the conflict validation key and there is nothing else resetting it to true, it's expected behaviour that editing the textbox wouldn't reset its conflict validation state.
To get the behaviour that you want, you need to code for it. One way is to use ng-change.
<input name="email" type="email" ng-model="..." required ng-change="resetConflictState()">
$scope.resetConflictState = function() {
$scope.form.email.$setValidity('conflict', true);
}

Clear default values using onsubmit

I need to clear the default values from input fields using js, but all of my attempts so far have failed to target and clear the fields. I was hoping to use onSubmit to excute a function to clear all default values (if the user has not changed them) before the form is submitted.
<form method='get' class='custom_search widget custom_search_custom_fields__search' onSubmit='clearDefaults' action='http://www.example.com' >
<input name='cs-Price-2' id='cs-Price-2' class='short_form' value='Min. Price' />
<input name='cs-Price-3' id='cs-Price-3' class='short_form' value='Max Price' />
<input type='submit' name='search' class='formbutton' value=''/>
</form>
How would you accomplish this?

Read the ids+values of all your fields when the page first loads (using something like jquery to get all "textarea", "input" and "select" tags for example)
On submit, compare the now contained values to what you stored on loading the page
Replace the ones that have not changed with empty values
If it's still unclear, describe where you're getting stuck and I'll describe more in depth.
Edit: Adding some code, using jQuery. It's only for the textarea-tag and it doesn't respond to the actual events, but hopefully it explains the idea further:
// Keep default values here
var defaults = {};
// Run something like this on load
$('textarea').each(function(i, e) {
defaults[$(e).attr('id')] = $(e).text();
});
// Run something like this before submit
$('textarea').each(function(i, e){
if (defaults[$(e).attr('id')] === $(e).text())
$(e).text('');
})
Edit: Adding some more code for more detailed help. This should be somewhat complete code (with a quality disclaimer since I'm by no means a jQuery expert) and just requires to be included on your page. Nothing else has to be done, except giving all your input tags unique ids and type="text" (but they should have that anyway):
$(document).ready(function(){
// Default values will live here
var defaults = {};
// This reads and stores all text input defaults for later use
$('input[type=text]').each(function(){
defaults[$(this).attr('id')] = $(this).text();
});
// For each of your submit buttons,
// add an event handler for the submit event
// that finds all text inputs and clears the ones not changed
$('input[type=submit]').each(function(){
$(this).submit(function(){
$('input[type=text]').each(function(){
if (defaults[$(this).attr('id')] === $(this).text())
$(this).text('');
});
});
});
});
If this still doesn't make any sense, you should read some tutorials about jQuery and/or javascript.

Note: This is currently only supported in Google Chrome and Safari. I do not expect this to be a satisfactory answer to your problem, but I think it should be noted how this problem can be tackled in HTML 5.
HTML 5 introduced the placeholder attribute, which does not get submitted unless it was replaced:
<form>
<input name="q" placeholder="Search Bookmarks and History">
<input type="submit" value="Search">
</form>
Further reading:
DiveintoHTML5.ep.io: Live Example... And checking if the placeholder tag is supported
DiveintoHTML5.ep.io: Placeholder text

1) Instead of checking for changes on the client side you can check for the changes on the client side.
In the Page_Init function you will have values stored in the viewstate & the values in the text fields or whichever controls you are using.
You can compare the values and if they are not equal then set the Text to blank.
2) May I ask, what functionality are you trying to achieve ?

U can achieve it by using this in your submit function
function clearDefaults()
{
if(document.getElementById('cs-Price-2').value=="Min. Price")
{
document.getElementById('cs-Price-2').value='';
}
}