Develop Reference

Is there any plugin to add to every input of a form an autocomplete attribute

I recently found out that Google is keen about users autofilling their forms. So keen that with the last update its browser Chrome fires a warning if the autocomplete attribute is missing or wrongly coded:
[DOM] Input elements should have autocomplete attributes (suggested: "current-password"): (More info: https://www.chromium.org/developers/design-documents/create-amazing-password-forms) <input class=​"input-text" type=​"password" name=​"password" id=​"password">​
I have searched around but i could only find how to "turn it off".
Since I find it very useful (agreeing with Google), I would like to know if there are libraries out there to automatically add the attributes accordingly.
so that:
<form>
<input name="name" type="text" id="name">
</form>
becomes
<form>
<input name="name" type="text" id="name" autocomplete="name">
</form>
taking the value from its 'name' attribute or 'id'.
More info on this: https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont/

Prefill Formfield using Javascript/Jquery and Labels from URL

I'm having difficulties prefilling a form using it's Labels in front of the formfields.
The ID's of my formfiels are randomly generated, so also the for="fieldID" for the labels.
An example:
<td>
<label class="required" for="ebc2566ad1c3793b">
name:
<font class="error">*</font>
</label>
<span>
<input id="_ebc2566ad1c3793b" class="form-control" type="text" value="" name="ebc2566ad1c3793b" placeholder="" maxlength="30" size="16">
</span>
</td>
I'm able to use javascript to fill the fields using the ID from the URL, but not using the identifier "name:" which is between the label.
As I'm also using jQuery in soem scripts I'm also not sure which DOM to use.
Examples are very welcome.

I'm not sure I understand the problem 100%, you want to access form labels based on its content yes? If so:
Using the :contains() selector you can grab the form labels like this:
var nameLabel = $("label:contains('name:')");
From there you could use the .next() method to grab the sibling element which in this case will be the span containing the input field. So to access the input you would do something like this:
var nameInput = nameLabel.next().find('input');
From there use .val() to set its content like so:
nameInput.val('John doe')

Copy input field from one to another?

UPDATE: I got in contact with the developer and he said to use this code as a foundation:
(function($) {
$('.jr-page').on('keyup','.jrAutoSuggest',function(){
$(".customfield").val($(this).val());
});
})(jQuery);
It doesn't work at the moment and I'm not sure why but you can also see my original post below this text for more details and I appreciate all of your help:
I am trying to copy one input field to another when a user types. I would like to accomplish something like this: http://jsfiddle.net/bxHQ5/ Notice that when you type into the input box on the left, it duplicates the text on the right.
To be more specific, on my website, I am using this form
I want what the user types in the "Car Manufacturer" input box to directly be copied to the "Testfield" input box as they type. Also, the "Testfield" input box text cannot be deleted or altered by the user once text is inputted in the car manufacturer field. They both have to be exactly the same.
Please note that the car manufacturer input field shows a hidden input which the user cannot see and should be ignored in this case. If you look at the HTML, the car manufacturer input looks like this:
<input id="myrelatedfield" class="jrAutoSuggest ui-autocomplete-input acInstructions" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"></input>
You'll notice I put my own customer ID in there called "myrelatedfield" The field it needs to copy text to looks like this which has a custom class "jr_testfield"...
<input class="jr_testfield jrText" type="text" data-click2add="0" name="data[Field][Listing][jr_testfield]"></input>
Thanks!

I ave updated the code
have a look at it
http://jsfiddle.net/vishalgupta358/bxHQ5/383/
$("#EmailAddress").keyup(function(){
$("#Username").val($(this).val());
});

Use readonly="true" property to prevent write access.Input value will also be available when u submit the form
HTML:
<input type="text"id="EmailAddress" name="EmailAddress" value="" >
<input type="text" id="Username" readonly="true" name="Username" value="">
Script:
$("#EmailAddress").keyup(function(){
$("#Username").val($(this).val());
});
DEMO

Show/Hide previous form field entries

I was wondering if someone knows what controls the showing of previous form field entries in a form.
So for example, if in the name field, I go to type 'John' it appears below the field. Is that a feature of the browser or is it javascript or something?
Also, if it is the browser, is there a way I can turn this off for a given form?

You might be looking at autocomplete, if so turn it off with autocomplete="off" within the HTML of the relevant field:
<input type="text" name="firstname" autocomplete="off" />
References:
input element.

It's made by the browser, if you're working with HTML5 you can set a attribute to the input-element to remove it.
<input type="text" autocomplete="off" />

Highlight text between form inputs?

I have a form that is validated by js when the user submits it. My code detects empty and invalid fields (ex 1 number in phone number is obviously an invalid phone number).
I am asked if i could highlight fields missing or in error. I think this would be cool IF i can do it automatically. With HTML like the below how can i make name, phone or whatever else turn red? i cant think of any solution. Maybe i can pull the html body from form find the target input and insert a div on the left side of the input to the prev tag and use that div to make the font red. But i HATE that idea because that requires poking the HTML instead of DOM and i am pretty sure some nastiness will occur. Any ideas?
Name: <input type=text name="Name"/>
Phone: <input type=text name="PhoneNo"/>

Change your HTML to have the <label> surrounding the 'Name' and 'Phone', which will make it more accessible and provide the functionality you're looking for.
HTML
<label for='Name'>Name:</label> <input type=text name="Name"/>
<label for='PhoneNo'>Phone:</label> <input type=text name="PhoneNo"/>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
jQuery
​$('input').blur(function() {
$('label[for="'+$(this).attr('name')+'"]').css('color','red');
});​​​​
Live Example
http://jsfiddle.net/tve8J/
You'll of course have to add your validation, I don't know what you consider and 'invalid field'

You should rather write your HTML to have an element around the labels in the first place. The correct HTML would be
<label for="Name">Name:</label> <input type="text" name="Name" id="Name" />
Then just add a class to the label to turn it red when it should.
By the way, this even makes the input receive focus when the label is clicked! Yay!

such as:
//some javascript validation here
name.style.color = 'red';
phoneNo.style.color = 'red';
?

How about labels with the for attribute? - Check out its documentation here