Develop Reference

using 2 inputs or change type of input to show password

I want to add a show password checkbox to my form.
When a user checks that checkbox password is shown.
Most of the examples that I found are using 2 inputs, one with type="text" and the other with type="password". And switch between these inputs according to the status of the checkbox.
it is simpler to change type of input to type="text", so why people use 2 inputs?

Be careful with using type="text" as a way of showing the password, as it exposes the user to saving the password in plain text in their autocomplete settings. I think the two input box approach is probably safer as you can stop the text one from being picked up by autocomplete by using autocomplete="off"
See this artcile describing the vulnerability: https://www.foxtonforensics.com/blog/post/uncovering-plain-text-passwords-in-internet-history

probably to make it work on old versions of IE, since IE 9 and below, do not allow dynamic change of type="password" to type="text". it throws an error "Could not get the type property"

I hope ur trying to ask that u want single password input field and show password button...Below is my answer
<input type="password" name="passwd" id="txtPassword" placeholder="Password" required="required">
<input type="checkbox" id="showhide"/>
<label for="showhide" id="showhidelabel">Show Password</label>
<script type="text/javascript">
$(document).ready(function () {
$("#showhide").click(function () {
if ($("#txtPassword").attr("type")=="password") {
$("#txtPassword").attr("type", "text");
}
else{
$("#txtPassword").attr("type", "password");
}
});
});

The Validity Popup Won't Go Even After Correct Input

I've used the pattern attribute to check the validity of the input and used setCustomValidity to display a custom invalidity message.
The following code has been used to show the invalidity popup for the invite code field:
<input class = "custom_form_field_input" type="text" name="inviteCode" minlength = "6" required maxlength = "6" value="" required pattern="[0-9a-zA-Z]+" autocomplete="off" oninvalid="setCustomValidity('Please enter your 6 digit Invitation Code')" onchange="try{setCustomValidity('')}catch(e){}"/>
Please find snapshots here:
Invalid Input ||
Valid Input
The problem here is that, the invalidity popup should disappear once the user starts inputting a new value, but this isn't happening.
Please help me out.
P.S. - I'm using Wordpress and I cannot easily use AJAX for validation. I am also not allowed to use plugins. Please answer accordingly.

Use oninput instead of onchange.
<input class = "custom_form_field_input" type="text" name="inviteCode" minlength = "6" required maxlength = "6" value="" required pattern="[0-9a-zA-Z]+" autocomplete="off" oninvalid="setCustomValidity('Please enter your 6 digit Invitation Code')" oninput="try{setCustomValidity('')}catch(e){}"/>
Example:
https://jsfiddle.net/173qpqte/

focus a form field on which the function has run (newbie)

I am trying to focus a form-field after running a validation-function on a form-field which is triggered "onblur" event of that field. What I'm trying to do is get the focus back on that field if it is not valid but it doesn't seem to do it. I've looked for answers on the web but unable to find a solution.
HTML:
<input type="text" id="name" name="name" value="" onblur="validateName();"/>
JavaScript:
function validateName() {
var name = document.getElementById("name");
if (name.value==""||!isNaN(name.value)){
alert("Please enter a valid name. You have left the field blank or entered a number.");
document.getElementById("name").focus();
}
};//END validateName
document.getElementById("name").focus(); is not working as expected.

The code works for me, but to make it a bit more "clean", I did some changes for you:
HTML:
You can "pass" the element with the function call (this), that way, we don't have to look for it anymore in the function itself.
<input type="text" id="name" name="name" value="" onblur="validateName(this)"/>
JavaScript:
The element that is blurred, is passed and stored in element, we call the "focus()" function directly on that.
function validateName(element) {
if (element.value==""||!isNaN(element.value)){
alert("Please enter a valid name. You have left the field blank or entered a number.");
element.focus();
}
};//END validateName

does jQuery Validation plugin not work with input type number? [duplicate]

I'm trying to setup a "digit" field using the jQuery Validation plugin
The problem is I don't want the digit field to be required, I just want to validate it as digits only, if someone does enter anything into it.
Here is my code, if I remove the "required: true," part, the field no longer throws up an error if I enter text into it and the form gets passed.
$('.js-validate-form').validate({
rules: {
phoneNumber: {
digits: true
}
}
});
And my HTML
<input type="number" name="phone" id="phone" placeholder="Phone (include area code)" value=""/>
Thanks in advance for any help!

This only seems to be a problem with input type="number" fields. It also only works as long as your field name matches your rule declaration, in this case, phoneNumber...
<input type="text" name="phoneNumber" id="phone" placeholder="Phone (include area code)" value=""/>
DEMO: http://jsfiddle.net/L4crh/
However, there are various phone number rules you can use that are already included in this plugin as part of the additional-methods.js file
DEMO 2: http://jsfiddle.net/L4crh/1/
EDIT:
The type="number" bug has reportedly been resolved as of jQuery Validate version 1.13.
https://github.com/jzaefferer/jquery-validation/releases/tag/1.13.0

Check if the name field in a form contains a number using javascript and the onchange event

im the definition of a rookie and i hav no idea what im doing. i have to create a function using javascript to perform a validation on the 'name' field in a form. The check will see if there is anything entered or if the name contains a number. On top of this i have to use a onchange event. I tried searching and i got answers put i saw the answers had jquery code in it and i cant use it in this question. Im clueless on what to do, can someone please help? Here is the form im working with
<form method="get">
<label for="name">Name</label>
<input type="text" id="name" placeholder="Name" onChange="" >
<br>
<label for="age">Age</label>
<input type="age" id="age" placeholder="Age">
<br>
<label for="location">Location</label>
<input type="location" id="location" placeholder="Location">
<br>
<button type="submit">Submit</button>
</form>

Here is a javascript function that takes an input parameter. It will check if the input value has any digit characters in it using regular expression. If it does it sends an alert and then removes all the digit characters (again using regular expression). It will then check if the input value is an empty string and send an alert if it is.
function checkName(input) {
// Check if input contains a digit
if (/\d/.test(input.value)) {
alert('Name contains a number');
// Remove all digit characters
input.value = input.value.replace(/\d/gi, '');
}
// Check if input is empty
if (input.value === '') {
alert('Name is empty');
}
return true;
}​
Add your function call to the onChange property of the input, passing in this object for the function's variable reference:
<input type="text" id="name" placeholder="Name" onChange="checkName(this)" >
Here is a demo showing this working:
http://jsfiddle.net/PMKsS/1/
Something to note. This function will only call when the name input value is changed, as that is what the onChange call will do. Therefore the name input will not be checked for being empty when the form submits.
Also, this is worth a read: Why is using onClick() in HTML a bad practice?. It explains about adding javascript event listeners through javascript rather than through an attribute and why doing the other way isn't great. Although it doesn't offer a way to do this in pure javascript.