I want to create a form in which I have input for password and button which must enable if the password from input is correct.
Here's the code I already have:
<form>
<label for="password"><input type="password" name="password" size="15" id="password" onkeyup="activateBtn()" /></label>
<input type="submit" id='delete' class='delete' disabled name="delete" value='Reset' onclick="resetFunc()" />
</form>
<script type="text/javascript">
function activateBtn() {
pass = document.getElementById('password').value;
if (pass = "1917"){
document.getElementById('password').onkeyup = function(){
document.getElementById('delete').disabled = false;
}
}}
</script>
<script type="text/javascript">
function resetFunc(){
countDownDate = new Date(); localStorage.setItem('startDate', countDownDate);
}
</script>
At this moment the button activates whatever is typed in input space.
You have used single equal to operator.
Please update the code with == instead of '='
function activateBtn() {
pass = document.getElementById('password').value;
console.log(pass);
document.getElementById('delete').disabled = pass !== '1917';
}
function resetFunc(){
countDownDate = new Date(); localStorage.setItem('startDate', countDownDate);
}
<form>
<label for="password"><input type="password" name="password" size="15" id="password" onkeyup="activateBtn()" /></label>
<input type="submit" id='delete' class='delete' disabled name="delete" value='Reset' onclick="resetFunc()" />
</form>
if (pass = "1917"){ should be if (pass == "1917"){
The code if (pass = "1917") isn't comparing, it's setting. (Although that would be truthy.)
const txtPassword = document.getElementById('password');
const btnDelete = document.getElementById('delete');
txtPassword.addEventListener('keyup', (e) => {
btnDelete.disabled = e.target.value !== '1917';
});
<form>
<label for="password">Password</label>
<input id="password" type="password">
<input id="delete" type="submit" value="Delete" disabled>
</form>
Related
If I click the generate button I want the following passwords to appear "abcd" "1234" "!##$" in the three empty boxes but I missed my class about this lesson and when I tried to watch youtube videos about it I get confused so can anyone help me on How to put the passwords "abcd" "1234" "!##$" in the 3 empty boxes if I press the generate button? Thank you in advance
<html>
<head>
<h1><center>Hi! there, to enter to our website please generate your Three(3) password token and use it to Enter<center></h1>
</head>
<script>
var counter=3;
function validate()
{
while(counter>=1)
{
var token1="abcd";
var token2="1234";
var token3="!##$";
var checkToken=document.getElementById("getToken").value;
if(checkToken===token1 || checkToken===token2)
{
document.write("<center>password correct. Please click the link:");
document.write('<br> Check our site');
}
else
{
counter=counter-1;
alert("Incorrect password!\n\n Attempts left: "+counter);
if(counter==0)
{
document.write("please contact our security team.");
}
break;
}
}
}
</script>
<script>
function generate()
var pass1="abcd";
var pass2="1234";
var pass3="!##$";
</script>
<body>
<center>
<p>Generate password token</p>
<input type="text" placeholder="Create password" id="password1" readonly />
<input type="text" placeholder="Create password" id="password2" readonly />
<input type="text" placeholder="Create password" id="password3" readonly />
<br>
<input type="button" value="Generate Token" onclick="generate()">
<p>Enter password token below to continue:</p>
<input type="password" placeholder="Enter password" id="getToken">
<br>
<input type="button" value="Validate Token" onclick="validate()">
</center>
</body>
So I tried doing this but it did not work
function generate()
var pass1 = "abcd";
var pass2 = "1234";
var pass3 = "!##$";
getElementById(password).innerHtml = pass1;
getElementById(passwords).innerHtml = pass2;
getElementById(passwordss).innerHtml = pass3;
Oh my God I figured it out So the correct one is
<script>
function generate(){
var pass1 = "abcd";
var pass2 = "1234";
var pass3 = "!##$";
document.getElementById("password").value=pass1;
document.getElementById("passwords").value=pass2;
document.getElementById("passwordss").value=pass3;
}
</script>
I changed Innerhtml to value and I was missing {}
<html>
<head>
<h1><center>Hi! there, to enter to our website please generate your Three(3) password token and use it to Enter<center></h1>
</head>
<script>
var counter=3;
function validate()
{
while(counter>=1)
{
var token1="abcd";
var token2="1234";
var token3="!##$";
var checkToken=document.getElementById("getToken").value;
if(checkToken===token1 || checkToken===token2)
{
document.write("<center>password correct. Please click the link:");
document.write('<br> Check our site');
}
else
{
counter=counter-1;
alert("Incorrect password!\n\n Attempts left: "+counter);
if(counter==0)
{
document.write("please contact our security team.");
}
break;
}
}
}
</script>
<script>
function generate(){
var pass1 = "abcd";
var pass2 = "1234";
var pass3 = "!##$";
document.getElementById("password").value=pass1;
document.getElementById("passwords").value=pass2;
document.getElementById("passwordss").value=pass3;
}
</script>
<body>
<center>
<p>Generate password token</p>
<input type="text" placeholder="Create password" id="password" readonly />
<input type="text" placeholder="Create password" id="passwords" readonly />
<input type="text" placeholder="Create password" id="passwordss" readonly />
<br>
<input type="button" value="Generate Token" onclick="generate()">
<p>Enter password token below to continue:</p>
<input type="password" placeholder="Enter password" id="getToken">
<br>
<input type="button" value="Validate Token" onclick="validate()">
</center>
</body>
How to disable submit button until the user enters all fields and also how to use event listener on submit form.
<form action='index.html' id="form-user" onsubmit="init()">
<input type="text" name="username" id="username" placeholder="username">
<input type="email" name="email" id="email" placeholder="email">
<input type="password" name="password" id="password" placeholder="password">
<button type="submit" name="submit" id='button-send'>SUBMIT</button>
</form>
const init = function () {
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
let email = document.getElementById("email").value;
alert(username,password,email)
};
Jsfiddle link
Set up a validation object with booleans to record if all your values have met validation.
Then I'd loop through all your inputs and add an event listener to each of them. In this example I've checked to see if each has at least one character in them, but you might want to expand on this.
Finally, loop through your validation object and check if all the values are true. If they are, remove the disabled attribute from the button.
let inputs = document.querySelectorAll('input');
let buttonSend = document.getElementById('button-send');
let inputValidator = {
"username": false,
"email": false,
"password": false
}
inputs.forEach((input) => {
input.addEventListener('input', () => {
let name = event.target.getAttribute('name');
if (event.target.value.length > 0) {
inputValidator[name] = true;
} else {
inputValidator[name] = false;
};
let allTrue = Object.keys(inputValidator).every((item) => {
return inputValidator[item] === true
});
if (allTrue) {
buttonSend.disabled = false;
} else {
buttonSend.disabled = true;
}
})
})
<form action='index.html' id="form-user">
<input type="text" name="username" id="username" placeholder="username">
<input type="email" name="email" id="email" placeholder="email">
<input type="password" name="password" id="password" placeholder="password">
<button type="submit" name="submit" id='button-send' disabled>SUBMIT</button>
</form>
This is probably not what you are looking for but you can achieve almost the same effect by simply using the required attribute in your input fields:
<form action='index.html' id="form-user">
<input type="text" name="username" id="username" placeholder="username" required>
<input type="email" name="email" id="email" placeholder="email" required>
<input type="password" name="password" id="password" placeholder="password" required>
<button type="submit" name="submit" id='button-send' >SUBMIT</button>
</form>
Using the onBlur event will ensure the user has visited each field. You may also want to check the field contains a value, for that you can add the HTML required attribute.
var isDirty = {
username: false,
password: false,
email: false
}
const init = function() {
let incompleteItems = getIncompleteItems();
if(incompleteItems.length > 0) {
alert(`${incompleteItems} requires a value.`);
return;
}
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
let email = document.getElementById("email").value;
alert(`values: ${username}, ${email}, ${password}`);
};
const onChange = function(e) {
isDirty[e.id] = true;
}
const getIncompleteItems = function() {
let incomplete = "";
for (const [key, value] of Object.entries(isDirty)) {
if(value === false) {
if(incomplete.length > 0) {
incomplete += `, ${key}`;
}
else {
incomplete = key;
}
}
}
return incomplete;
}
<form method='GET' id="form-user" onsubmit="init()">
<input type="text" name="username" id="username" placeholder="username" onBlur="onChange(this)">
<input type="email" name="email" id="email" placeholder="email" onBlur="onChange(this)">
<input type="password" name="password" id="password" placeholder="password" onBlur="onChange(this)">
<button type="submit" name="submit" id='button-send'>SUBMIT</button>
</form>
Create a validation function which will check all the validations and sets the disabled property of the button if validation fails and vice versa. Call the validation function on every change of all the fields.
You can use oninput event
<input type="text" oninput="validate()">
<script>
function validate() {
var username = document.getElememtById("uname");
var password = document.getElememtById("pass");
if (username.value == "" || password.value == "") {
alert("no data");
}
}
</script>
<form>
<input id="uname" type="text" placeholder="username"></input>
<input id="pass" type="password" placeholder="password"></input>
<button onclick="validate()" type="submit">Submit</button>
</form>
Prevent the default behavior using e.preventDefault and also there is typo in getElememtById
function validate(e) {
e.preventDefault();
var username = document.getElementById("uname");
var password = document.getElementById("pass");
if (username.value == "" || password.value == "") {
alert("no data");
}
}
<form>
<input id="uname" type="text" placeholder="username" />
<input id="pass" type="password" placeholder="password" />
<button button type='submit' onclick="validate(event)" type="submit">Submit</button>
</form>
There are a few issues on your code:
1) The input tag do not use a close tag like </input>
2) You need to pass event as the argument of your custom function and then call event.preventDefault() to prevent the default submit event associated with the form.
3) getElememtById() is actually named like getElementById()
Working example:
function validate(event)
{
event.preventDefault();
var username = document.getElementById("uname");
var password = document.getElementById("pass");
if (username.value == "" || password.value == "")
{
alert("no data");
}
}
<form>
<input id="uname" type="text" placeholder="username">
<input id="pass" type="password" placeholder="password">
<button onclick="validate(event)" type="submit">Submit</button>
</form>
You have typo in getElememtById, should be getElementById. You also have to prevent the default event if condition is true.
Please Note: input is called empty or void element and only have a start tag since they can't have any content. Using closing tag in empty element is a bad parctice.
<script>
function validate(e) {
use
var username = document.getElementById("uname");
var password = document.getElementById("pass");
if (username.value == "" || password.value == "") {
alert("no data");
e.preventDefault();
}
}
</script>
<form>
<input id="uname" type="text" placeholder="username"/>
<input id="pass" type="password" placeholder="password"/>
<button onclick="validate(event)" type="submit">Submit</button>
</form>
I have this javascript below:
<script type="text/javascript">
function PassCheck() {
var password = document.getElementById('password');
var vpassword = document.getElementById('vpassword');
if(password.value!= vpassword.value){
document.getElementById("button1").disabled = true;
}
}
</script>
HTML code:
Password: <input type="password" name="password" id="password" required onchange='PassCheck();'/> <br>
Verify Password: <input type="password" name="vpassword" required id="vpassword" onchange='PassCheck();'/> <br>
<input type="submit" value="Submit" id="button1" name="submit" onchange='PassCheck();'/>
The submit button is disabled only the first time and the disbale button doesn't work after second attempt. I am not sure why its not working. Please help! Thanks in advance.
You simply need to add an else condition that re-enables your button once the values match:
function PassCheck() {
var password = document.getElementById('password');
var vpassword = document.getElementById('vpassword');
if (password.value != vpassword.value) {
document.getElementById("button1").disabled = true;
}
else {
document.getElementById("button1").disabled = false;
}
}
Password: <input type="password" name="password" id="password" required onchange='PassCheck();' /> <br>
Verify Password: <input type="password" name="vpassword" required id="vpassword" onchange='PassCheck();' /> <br>
<input type="submit" value="Submit" id="button1" name="submit" onchange='PassCheck();' />
onchange occurs only when the element loses focus, so try to use onkeyup or oninput events. Also don't forget to set disabled to false.
function PassCheck() {
var password = document.getElementById('password');
var vpassword = document.getElementById('vpassword');
document.getElementById("button1").disabled = password.value.length === 0 ||
password.value != vpassword.value;
}
PassCheck();
Password: <input type="password" name="password" id="password" required onkeyup='PassCheck();'/> <br>
Verify Password: <input type="password" name="vpassword" required id="vpassword" onkeyup='PassCheck();'/> <br>
<input type="submit" value="Submit" id="button1" name="submit"/>
This is my first time with javascript. I'm making a basic login page where there is a control for the email input. I would like to put an error message of some kind when someone gives an email address with illegal symbol. Here my code:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
</head>
<body>
<div>
<form action="Home.html" method="post">
<label for="id">Username</label>
<input type="text" name="id" id="id" value="" />
<br/>
<label for="pass">Password</label>
<input type="password" name="pass" id="pass" value="" />
<br/>
<label for="email">Email</label>
<input type="email" name="email" id="email" value="" />
<br/>
<script type="text/javascript">
function checkEmail ()
{
var emailObject = document.getElementById("email");
var email = emailObject.getAttribute("value").toString();
var error = document.createTextNode("Uncorrect email");
var result = email.search("/[^(a-z | A-Z | 0-9 | #)]/");
if(result !== -1)
{
emailObject.appendChild(error);
}
}
</script>
<button type="button" onclick="checkEmail()"> Confirm </button>
</form>
</div>
</body>
</html>
I have a function I use to validate email addresses, it uses regex. I would suggest jQuery just to show/hide the error message.
function validEmail(val){
if(val.length < 6 || val.length > 255) return false;
return new RegExp(/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/).test(val);
}
$(function(){
$("#email").on("change", function(){
var email = $("#email").val();
if(!validEmail(email)){
$("#emailError").show();
} else {
$("#emailError").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<!-- Some Inputs here -->
<span id='emailError' style='display: none;'>Please enter a valid email address</span><br>
<input type='email' id='email' name='email' placeholder='Email Address' />
<!-- More Inputs here -->
<button type='submit'>Submit</button>
</form>
you're trying to append something to an input element (email input, in this case). I'd suggest to append it to your main div, which in this case I have identified as "YOUR_ID".
Also, I suggest you a more efficint way to check a valid email.
follow the below example
<body>
<div id="YOUR_ID">
<form action="Home.html" method="post">
<label for="id">Username</label>
<input type="text" name="id" id="id" value="" />
<br/>
<label for="pass">Password</label>
<input type="password" name="pass" id="pass" value="" />
<br/>
<label for="email">Email</label>
<input type="email" name="email" id="email" value="" />
<br/>
<script type="text/javascript">
function checkEmail ()
{
var emailObject = document.getElementById("email");
var divObject = document.getElementById("YOUR_ID");
var email = emailObject.getAttribute("value").toString();
var error = document.createTextNode("Uncorrect email");
var check = /^([\w-]+(?:\.[\w-]+)*)#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
var result = check.test(email);
if(result !== -1)
{
divObject.appendChild(error);
}
}
</script>
<button type="button" onclick="checkEmail()"> Confirm </button>
</form>
</div>
</body>