We Keep Coding

Return a boolean value if forms fails validation

I have a task:
Write a JS function that validates the content of the form - the form should have at least one mandatory numeric field and one field that simply cannot be empty. If the validation is not passed through the field, display the appropriate information to inform the user. If validation fails, the function should return false, otherwise true
So, I'm trying to return a boolean value if the from fails validation and subsequently hide the forms. I've put the boolean value into the error and success functions but it doesn't seem to work. I've tried to make the check inputs function return the boolean value but it didn't work also.
I'm just trying to learn so any help regarding the best approach to this problem logically would be appreciated. I also understand that there might have been simple syntax issues, but this is also something I'm trying to get better at right now.
const form = document.getElementById('form');
const username = document.getElementById('username');
const num = document.getElementById('num');
const phone = document.getElementById('phone');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
let isValid;
form.addEventListener('submit', e => {
e.preventDefault();
checkInputs();
if (isValid = true){
form.remove;
}
});
function checkInputs() {
const usernameValue = username.value.trim();
const numValue = num.value.trim();
const phoneValue = phone.value.trim();
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
const password2Value = password2.value.trim();
if(usernameValue === '') {
setErrorFor(username, 'Username cannot be blank');
} else {
setSuccessFor(username);
}
if(numValue === ''){
setErrorFor(num, 'You must have a favorite number');
}else if(isNaN(numValue)){
setErrorFor(num, 'Not a number');
}else{
setSuccessFor(num);
}
if(phoneValue === '+48' || phoneValue === ''){
setErrorFor(phone, 'Phone cannot be blank');
}else{
setSuccessFor(phone);
}
if(emailValue === '') {
setErrorFor(email, 'Email cannot be blank');
} else if (!isEmail(emailValue)) {
setErrorFor(email, 'Not a valid email');
} else {
setSuccessFor(email);
}
if(passwordValue === '') {
setErrorFor(password, 'Password cannot be blank');
}else if (passwordValue.length < 8){
setErrorFor(password, 'Password cannot be less than 8 characters');
} else {
setSuccessFor(password);
}
if(password2Value === '') {
setErrorFor(password2, 'Password cannot be blank');
} else if(passwordValue !== password2Value) {
setErrorFor(password2, 'Passwords does not match');
} else{
setSuccessFor(password2);
}
}
function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.querySelector('small');
formControl.className = 'form-control error';
small.innerText = message;
isValid = false;
}
function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
isValid = true;
}
function isEmail(email) {
return /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}
function test(){
if (isValid = true){
console.log('hi')
} else{
console.log('HEXYU')
}
}
<div class="container">
<div class="header">
<h2>Create Account</h2>
</div>
<form id="form" class="form">
<div class="form-control">
<label for="username">Username</label>
<input type="text" placeholder="Your username" id="username" />
<small>Error message</small>
</div>
<div class="form-control">
<label for="num">Your favorite number</label>
<input type="number" placeholder="Your favorite number" id="num"/>
<small>Error message</small>
</div>
<div class="form-control">
<label for="phone">Phone number</label>
<input type="tel" placeholder="Your phone numbe" id="phone" value="+48"/>
<small>Error message</small>
</div>
<div class="form-control">
<label for="email">Email</label>
<input type="email" placeholder="email#youremail.com" id="email" />
<small>Error message</small>
</div>
<div class="form-control">
<label for="password">Password</label>
<input type="password" placeholder="Password" id="password"/>
<small>Error message</small>
</div>
<div class="form-control">
<label for="passsword2">Password check</label>
<input type="password" placeholder="Repeat your password" id="password2"/>
<small>Error message</small>
</div>
<button class="form-button" >Submit</button>
</form>
</div>

Two errors in your code:
Use remove() instead of remove
Use == / === instead of =
Also, you could use required to let user unable to submit.
num input type will only accept number input and email type input will check if there is # in the input. This will save a lot of if unnecessary if statement.
const form = document.getElementById('form');
const username = document.getElementById('username');
const num = document.getElementById('num');
const phone = document.getElementById('phone');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
let isValid;
form.addEventListener('submit', e => {
e.preventDefault();
checkInputs();
if (isValid = true){
form.remove();
}
});
function checkInputs() {
const phoneValue = phone.value.trim();
const passwordValue = password.value.trim();
const password2Value = password2.value.trim();
setSuccessFor(username);
setSuccessFor(num);
setSuccessFor(email);
}
if(phoneValue === '+48' ){
setErrorFor(phone, 'Phone cannot be blank');
}else{
setSuccessFor(phone);
}
if (passwordValue.length < 8){
setErrorFor(password, 'Password cannot be less than 8 characters');
} else {
setSuccessFor(password);
}
if(passwordValue !== password2Value) {
setErrorFor(password2, 'Passwords does not match');
} else{
setSuccessFor(password2);
}
}
function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.querySelector('small');
formControl.className = 'form-control error';
small.innerText = message;
isValid = false;
}
function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
isValid = true;
}
function isEmail(email) {
return /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}
function test(){
if (isValid == true){
console.log('hi')
} else{
console.log('HEXYU')
}
}
<form id="form" class="form">
<div class="form-control">
<label for="username">Username</label>
<input type="text" placeholder="Your username" id="username" />
<small>Error message</small>
</div>
<div class="form-control">
<label for="num">Your favorite number</label>
<input type="number" placeholder="Your favorite number" id="num" required />
<small>Error message</small>
</div>
<div class="form-control">
<label for="phone">Phone number</label>
<input type="tel" required placeholder="Your phone numbe" id="phone" value="+48"/>
<small>Error message</small>
</div>
<div class="form-control">
<label for="email">Email</label>
<input type="email" required placeholder="email#youremail.com" id="email" />
<small>Error message</small>
</div>
<div class="form-control">
<label for="password">Password</label>
<input type="password" required placeholder="Password" id="password"/>
<small>Error message</small>
</div>
<div class="form-control">
<label for="passsword2">Password check</label>
<input type="password" required typeplaceholder="Repeat your password" id="password2"/>
<small>Error message</small>
</div>
<button class="form-button" >Submit</button>
</form>
</div>

My signup button disappears while filling out my password on a form

This is a two-part question.
Part 1. The passConfirm function that I currently have is there to make sure that the password and confirming password values match. Right now, when I type in my password the button disappears. The purpose of this function is to display a message while the user is creating a password and confirming it, that the password does or does not match. Does anyone know why that is happening based on the code I have?
Part 2. Is there a way to refactor my passConfirm function? I tried doing it by adding it to the validateForm function (Please see commented code for my example). It wasn't working tho.
function printError(elemId, message) {
document.getElementById(elemId).innerHTML = message;
}
function validateForm() {
event.preventDefault();
var name = document.regForm.FullName.value;
var email = document.regForm.email.value;
var phone = document.regForm.phone.value;
var password = document.regForm.Password.value;
var confirmPassword = document.regForm.ConfirmPassword.value;
const phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
var nameError = emailError = phoneError = passwordError = true;
//Empty name input error message
if (name == "") {
printError("nameError", "Please enter your name")
}
//Empty email input error message
if (email == "") {
printError("emailError", "Please enter a valid email")
}
//Empty phone input error message
if (phone == "") {
printError("phoneError", "Please enter your phone numnber")
}
//Non valid phone number error messsage
if (phone.match(phoneno)) {
return true;
} else {
printError("phoneError", "Please enter a valid phone number")
}
//Empty Password input
if (password == "") {
printError("passwordError", "Please enter a password")
}
//Empty Cofirm Password input
if (confirmPassword == "") {
printError("confirmpassError", "Please confirm your password")
}
//I tried refactoring the passConfirm function and additing it here.
//if (password.match(confirmPassword)) {
// printPass("matchingPassword", "Passwords match")
// document.getElementById("matchingPassword").style.color = "green";
//} else {
// printPass("matchingPassword", "Passwords do no match")
// document.getElementById("matchingPassword").style.color = "red";
//}
};
var passConfirm = function() {  
if (document.getElementById("Password").value ==    document.getElementById("ConfirmPassword").value) {   
document.getElementById("matchingPassword").style.color = "green";   
document.getElementById("matchingPassword").style.fontWeight = "Heavy";   
document.getElementById("matchingPassword").innerHTML = "Passwords match!"  
} else {   
document.getElementById("matchingPassword").style.color = "red";   
document.getElementById("matchingPassword").style.fontWeight = "Heavy";   
document.getElementById("matchingPassword").innerHTML = "Passwords do NOT match!"  
} 
}
fieldset {
width: 420px;
height: 950px;
}
<h1>Hello, please register!</h1>
<div class="container">
<form name="regForm" class="form" onsubmit="return validateForm(event)">
<fieldset>
<div class="row">
<label>Full Name</label></br>
<input name="FullName" type="text" placeholder="John Doe" id="FullName" />
<span class="error" id="nameError"></span>
</div>
<div class="row">
<label>Email</label></br>
<input name="email" type="email" placeholder="johndoe#email.com" id="Email" />
<span class="error" id="emailError"></span>
</div>
<div class="row">
<label>Phone Number</label></br>
<input name="phone" type="tel" placeholder="(123) 456-7890" id="PhoneNumber" />
<span class="error" id="phoneError"></span>
</div>
<div class="row">
<label>Password</label></br>
<input name="Password" id="Password" type="Password" placeholder="Password" onchange='passConfirm();' />
<span class="error" id="passwordError"></span>
</div>
<div class="row">
<label>Confirm Password</label></br>
<input name="ConfirmPassword" id="ConfirmPassword" type="Password" placeholder="Confirm Password" onchange='passConfirm();' />
<span class="error" id="confirmpassError"></span>
</div>
<span id="matchingPassword">
<button type="submit" value="submit">Sign Me Up!</button>
</fieldset>
</form>
</div>

Your button disappears because you use InnerHTML method to display the message, which overrides it. Though your logic works after passwords match when you press enter, you lose your button element. It is better to use a separate div or paragraph tag to display your message and keep your button as it is since it's part of the form.
Here is the change you can try
<span id="matchingPassword">
<button type="submit" value="submit">Sign Me Up!</button></span>
<p id="message"></p>
</fieldset>
var passConfirm = function() {
if (document.getElementById("Password").value == document.getElementById("ConfirmPassword").value) {
document.getElementById("message").style.color = "green";
document.getElementById("message").style.fontWeight = "Heavy";
document.getElementById("message").innerHTML = "Passwords match!"
} else {
document.getElementById("message").style.color = "red";
document.getElementById("message").style.fontWeight = "Heavy";
document.getElementById("message").innerHTML = "Passwords match!"
}
}

Input password show and hide

I hope I don't bother you with a question :) .
I have little knowledge about writing code, so I encountered an error there are two inputs I added an eye icon with bootstrap when clicked, the password appears the first input works, but the second input does not show the password What do you think is the problem.
sorry about my bad English.
<form method="post" id="your_form_id" enctype="index.php">
<div class="input-container">
<input type="password" name="password" placeholder="Password" required="on"><br><br>
<i class="material-icons visibility">visibility_off</i>
</div>
<script>
const visibilityToggle = document.querySelector('.visibility');
const input = document.querySelector('.input-container input');
var password = true;
visibilityToggle.addEventListener('click', function() {
if (password) {
input.setAttribute('type', 'text');
visibilityToggle.innerHTML = 'visibility';
} else {
input.setAttribute('type', 'password');
visibilityToggle.innerHTML = 'visibility_off';
}
password = !password;
});
</script>
<input type="email" name="mail" id="mail" placeholder="Mail Address" required="on"><br><br>
<div class="input-container">
<input type="password" name="mailspword" placeholder="Mail Password" required="on"><br><br>
<i class="material-icons visibility">visibility_off</i>
</div>
<script>
const visibilityToggle = document.querySelector('.visibility');
const input = document.querySelector('.input-container input');
var password = true;
visibilityToggle.addEventListener('click', function() {
if (password) {
input.setAttribute('type', 'text');
visibilityToggle.innerHTML = 'visibility';
} else {
input.setAttribute('type', 'password');
visibilityToggle.innerHTML = 'visibility_off';
}
password = !password;
});
</script>

document.querySelector is going to return the first element in your page. So, your logic works fine with the first input but not in the second input as document.querySelector is still going to return the first element.
You can use document.querySelectorAll and then use indexing to access you input as below-
const visibilityToggle1 = document.querySelectorAll('.visibility')[0];
const input1 = document.querySelectorAll('.input-container input')[0];
var password1 = true;
visibilityToggle1.addEventListener('click', function() {
if (password1) {
input1.setAttribute('type', 'text');
visibilityToggle1.innerHTML = 'visibility';
} else {
input1.setAttribute('type', 'password');
visibilityToggle1.innerHTML = 'visibility_off';
}
password1 = !password1;
});
const visibilityToggle2 = document.querySelectorAll('.visibility')[1];
const input2 = document.querySelectorAll('.input-container input')[1];
var password2 = true;
visibilityToggle2.addEventListener('click', function() {
if (password2) {
input2.setAttribute('type', 'text');
visibilityToggle2.innerHTML = 'visibility';
} else {
input2.setAttribute('type', 'password');
visibilityToggle2.innerHTML = 'visibility_off';
}
password2 = !password2;
});
<form method="post" id="your_form_id" enctype="index.php">
<div class="input-container">
<input type="password" name="password" placeholder="Password" required="on"><br><br>
<i class="material-icons visibility">visibility_off</i>
</div>
<input type="email" name="mail" id="mail" placeholder="Mail Address" required="on"><br><br>
<div class="input-container">
<input type="password" name="mailspword" placeholder="Mail Password" required="on"><br><br>
<i class="material-icons visibility">visibility_off</i>
</div>
</form>
I have edited your code because of multiple variables with same name. I have appended 1 to the variables for first input and 2 to variables for second input.
As mentioned in one of the comments, I have duplicated the event listeners here for both inputs just for demonstration purpose, but you can attach the same event listener to both inputs with looping and providing a custom argument to the event listener.

Js style password working or password not working

I have this js styling but it seems to not work. I don't know what is wrong
<div id="SignUp-Password">
<div id="SignUp-LG-Password">Password:</div>
<input
size="42"
type="Password"
maxlength="42"
name="SignUp-Input-Password"
id="SignUp-Input-Password">
<input id="SignUp-CheckBox-Password"
type="checkbox"
name="SignUp-CheckBox-Password">
<div id="SignUp-Password-Show">Show</div>
<span id="SignUp-Password-Match/Notmatch"/>
</div>
<div id="SignUp-Password-Repeat">
<div id="SignUp-LG-Password-Repeat">Password Repeat:</div>
<input
size="42"
type="text"
maxlength="42"
name="SignUp-Input-Password-Repeat"
id="SignUp-Input-Password-Repeat">
<div id="SignUp-Password-Strong"></div>
<div class="registrationFormAlert" id="divCheckPasswordMatch"></div>
</div>
java
function checkPasswordMatch() {
var password = $("#SignUp-Input-Password").val();
var confirmPassword = $("#SignUp-Input-Password-Repeat").val();
if (password != confirmPassword)
$("#divCheckPasswordMatch").html("Passwords do not match!").style.color = "red";
else
$("#divCheckPasswordMatch").html("Passwords match.").style.color = "green";
}
$(document).ready(function () {
$("#SignUp-Input-Password-Repeat").keyup(checkPasswordMatch);
});
I would think this is easy for you but I need some help with javascript.
you can also see this http://jsfiddle.net/fLqujmp3/

Your syntaxt to set style incorrect, change to
$("#divCheckPasswordMatch").css("color","red");
If you want to use javascript, change it to
document.getElementById("divCheckPasswordMatch").style.color = "red";
function checkPasswordMatch() {
var password = $("#SignUp-Input-Password").val();
var confirmPassword = $("#SignUp-Input-Password-Repeat").val();
if (password != confirmPassword){
$("#divCheckPasswordMatch").html("Passwords do not match!");
document.getElementById("divCheckPasswordMatch").style.color = "red";
//$("#divCheckPasswordMatch").css("color","red");
}
else{
$("#divCheckPasswordMatch").html("Passwords match.")
$("#divCheckPasswordMatch").css("color","green");
}
}
$(document).ready(function () {
$("#SignUp-Input-Password-Repeat").keyup(checkPasswordMatch);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="SignUp-Password">
<div id="SignUp-LG-Password">Password:</div>
<input
size="42"
type="Password"
maxlength="42"
name="SignUp-Input-Password"
id="SignUp-Input-Password">
<input id="SignUp-CheckBox-Password"
type="checkbox"
name="SignUp-CheckBox-Password">
<div id="SignUp-Password-Show">Show</div>
<span id="SignUp-Password-Match/Notmatch"/>
</div>
<div id="SignUp-Password-Repeat">
<div id="SignUp-LG-Password-Repeat">Password Repeat:</div>
<input
size="42"
type="text"
maxlength="42"
name="SignUp-Input-Password-Repeat"
id="SignUp-Input-Password-Repeat">
<div id="SignUp-Password-Strong"></div>
<div class="registrationFormAlert" id="divCheckPasswordMatch"></div>
</div>

how to make password textbox value visible when hover an icon

Good day all,
I have a form that has a password field:
<input type="password" name="password" size="30" />
Naturally, the input text will be replaced by (*).
So if the user typed 123 the box will show ***.
Up to here, it is straight forward, but...
Now, I wanna add a small icon next to the password box so when the user hover over this icon, he can see what he has entered so far.
So, while hovering, the box will show 123 and when the user leaves the icon the box should show *** again.
Is there any way to do this with JavaScript? Also, I am using HTML and PHP.
EDIT:
It really doesn't need to be an icon, it could be a checkbox or a button... AND if it could be done in CSS, I would really appreciate to know how
P.S. I've googled and search the stackoverflow but with no luck

You will need to get the textbox via javascript when moving the mouse over it and change its type to text. And when moving it out, you will want to change it back to password. No chance of doing this in pure CSS.
HTML:
<input type="password" name="password" id="myPassword" size="30" />
<img src="theicon" onmouseover="mouseoverPass();" onmouseout="mouseoutPass();" />
JS:
function mouseoverPass() {
let obj = document.getElementById('myPassword');
obj.type = 'text';
}
function mouseoutPass() {
let obj = document.getElementById('myPassword');
obj.type = 'password';
}

As these guys said, just change input type.
But do not forget to change type back as well.
See my simple jquery demo: http://jsfiddle.net/kPJbU/1/
HTML:
<input name="password" class="password" type="password" />
<div class="icon">icon</div>
jQuery:
$('.icon').hover(function () {
$('.password').attr('type', 'text');
}, function () {
$('.password').attr('type', 'password');
});

I use this one line of code, it should do it:
<input type="password"
onmousedown="this.type='text'"
onmouseup="this.type='password'"
onmousemove="this.type='password'">

Complete example below. I just love the copy/paste :)
HTML
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-body">
<form class="form-horizontal" method="" action="">
<div class="form-group">
<label class="col-md-4 control-label">Email</label>
<div class="col-md-6">
<input type="email" class="form-control" name="email" value="">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input id="password-field" type="password" class="form-control" name="password" value="secret">
<span toggle="#password-field" class="fa fa-lg fa-eye field-icon toggle-password"></span>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
CSS
.field-icon {
float: right;
margin-right: 8px;
margin-top: -23px;
position: relative;
z-index: 2;
cursor:pointer;
}
.container{
padding-top:50px;
margin: auto;
}
JS
$(".toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
Try it here: https://codepen.io/Loginet/pen/oNeevMe

In one line of code as below :
<p> cursor on text field shows text .if not password will be shown</p>
<input type="password" name="txt_password" onmouseover="this.type='text'"
onmouseout="this.type='password'" placeholder="password" />

1 minute googling gave me this result. See the DEMO!
HTML
<form>
<label for="username">Username:</label>
<input id="username" name="username" type="text" placeholder="Username" />
<label for="password">Password:</label>
<input id="password" name="password" type="password" placeholder="Password" />
<input id="submit" name="submit" type="submit" value="Login" />
</form>
jQuery
// ----- Setup: Add dummy text field for password and add toggle link to form; "offPage" class moves element off-screen
$('input[type=password]').each(function () {
var el = $(this),
elPH = el.attr("placeholder");
el.addClass("offPage").after('<input class="passText" placeholder="' + elPH + '" type="text" />');
});
$('form').append('<small><a class="togglePassText" href="#">Toggle Password Visibility</a></small>');
// ----- keep password field and dummy text field in sync
$('input[type=password]').keyup(function () {
var elText = $(this).val();
$('.passText').val(elText);
});
$('.passText').keyup(function () {
var elText = $(this).val();
$('input[type=password]').val(elText);
});
// ----- Toggle link functionality - turn on/off "offPage" class on fields
$('a.togglePassText').click(function (e) {
$('input[type=password], .passText').toggleClass("offPage");
e.preventDefault(); // <-- prevent any default actions
});
CSS
.offPage {
position: absolute;
bottom: 100%;
right: 100%;
}

Try This :
In HTML and JS :
// Convert Password Field To Text On Hover.
var passField = $('input[type=password]');
$('.show-pass').hover(function() {
passField.attr('type', 'text');
}, function() {
passField.attr('type', 'password');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!-- An Input PassWord Field With Eye Font-Awesome Class -->
<input type="password" placeholder="Type Password">
<i class="show-pass fa fa-eye fa-lg"></i>

Its simple javascript. Done using toggling the type attribute of the input. Check this http://jsfiddle.net/RZm5y/16/

<script>
function seetext(x){
x.type = "text";
}
function seeasterisk(x){
x.type = "password";
}
</script>
<body>
<img onmouseover="seetext(a)" onmouseout="seeasterisk(a)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
<input id = "a" type = "password"/>
</body>
Try this see if it works

A rapid response not tested on several browsers,
works on gg chrome / win +edit: ok on Linux/Brave
-> On focus event -> show/hide password
<input type="password" name="password">
script jQuery
// show on focus
$('input[type="password"]').on('focusin', function(){
$(this).attr('type', 'text');
});
// hide on focus Out
$('input[type="password"]').on('focusout', function(){
$(this).attr('type', 'password');
});

<html>
<head>
</head>
<body>
<script>
function demo(){
var d=document.getElementById('s1');
var e=document.getElementById('show_f').value;
var f=document.getElementById('show_f').type;
if(d.value=="show"){
var f= document.getElementById('show_f').type="text";
var g=document.getElementById('show_f').value=e;
d.value="Hide";
} else{
var f= document.getElementById('show_f').type="password";
var g=document.getElementById('show_f').value=e;
d.value="show";
}
}
</script>
<form method='post'>
Password: <input type='password' name='pass_f' maxlength='30' id='show_f'><input type="button" onclick="demo()" id="s1" value="show" style="height:25px; margin-left:5px;margin-top:3px;"><br><br>
<input type='submit' name='sub' value='Submit Now'>
</form>
</body>
</html>