I am relatively new to web development and I'm trying to do some form validation with javascript but my javascript block is not executing and I really don't know why. Any ideas?
<html>
<head>
<title>Login</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type = "text/css" rel = "stylesheet" href = "formato.css" />
<script type = "text/javascript">
function validate(){
var x = document.forms[LoginInformation][username].value;
var y = document.forms[LoginInformation][password].value;
if(document.LoginInformation){
alert("Enter a username");
return false;
}
if(y===null || x ===""){
alert("Enter a password");
return false;
}
}
</script>
</head>
<body>
<center>
<div id = "login">
<form method = "post" name = "LoginInformation" onsubmit = "return (validate());" action="./TestLogin">
<fieldset>
<legend>Información de Login</legend>
<label>Usuario:<br />
<input type="text" name="username" size ="15"/></label><br />
<label>Contraseña:<br />
<input type="password" name="password" size ="15"/></label><br />
<label><br /><input type = "submit" name = "login" value = "Login"/></label><br />
</fieldset>
</form>
</div>
</center>
</body>
Please pass the form id and control id as string as mentioned below
var x = document.forms["LoginInformation"]["username"].value;
var y = document.forms["LoginInformation"]["password"].value;
Try this:
<script type = "text/javascript">
function validate(){
var x = document.getElementbyID("username");
var y = document.getElementbyID("password");
if(x==""){
alert("Enter a username");
return false;
}
if(y==null || x ==""){
alert("Enter a password");
return false;
}
}
</script>
and then all you code in between
<form method="post" name="LoginInformation" action="./TestLogin">
<fieldset>
<legend>Información de Login</legend>
<label>Usuario:<br />
<input type="text" id="username" size ="15"/></label><br />
<label>Contraseña:<br />
<input type="password" id="password" size ="15"/></label><br />
<label><br /><input type ="submit" name ="login" value = "Login" onClick="validate()"/></label><br />
</fieldset>
</form>
in your validate function you need to have LoginInformation, username, and password enclosed in quotation marks. If it's not, your JavaScript interpreter will consider them as regular ol' JavaScript variables, which they're not.
Related
I'm making a code where the user enters information and it stores it in an object, but when I check if the object is saved by alerting one of its values it says there is no such object.
here is my code.
let users = {};
function user(name,real){
this.username = name,
this.realname = real,
this.id = Math.floor(Math.random() *1000);
this.subs = 0,
this.videos = [],
this.listuser = function() {
return this.username;
}
};
function newuser(name, email,username){
users[name] = new user(username, name);
};
let savefile = () => {
var channame = string(document.getElementById('channame'));
var name = string(document.getElementById('name'));
var email = string(document.getElementById('email'));
newuser(name,email,channame);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>youtube ripoff</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<br> <br><br><br><br><br>
<form action="">
<label for="username">Channel Name: </label>
<input type="text" id="channame" name="channelname"><br>
Real Name
<input type="text" id="name" name="name"><br>
Email
<input type="text" id="email" name="email"><br>
<input type="submit" value="Submit" onmousedown="newuser('name1','name#gmail.com','channelname1');">
<br><br><br><br>
<input type="button" value="Load Channels" id="seech" name="seechannels" onmousedown="alert(users['name1'].listuser());"><br>
</form>
<script src="script.js">
function fun(){
window.alert("starting program...")
//other code
}
</script>
</body>
</html>
Is there some sort of error that I'm not seeing?
After click on submit button in form with action="" page is reload and all data is lost. Pleas use:
<form action="javascript:void(0)">
instead of
<form action="">
This prevent page reload.
I would like to have my code return the HTML input using an alert.
I tried to with this code, below, but the output was nothing. I am pretty sure that its not the button...
<center>
<h3>Enter The Username And Password To Unlock This Computer</h3>
<script>
function incorrect() {
var user = document.getElementById("username");
var pass = document.getElementById("password");
text = "the username '" + user + "' is incorrect, and the password '" + pass + "' is also incorrect"
console.log(text)
alert(text)
}
</script>
<form>
<h6>Username</h6><input type="text" id="username" name="username" value="">
<h6>Password</h6><input type="text" id="password" name="password" value="">
<br><button type="button" onclick="incorrect">Unlock</button>
</form>
</center>
Do you want the text that is being typed in or just the html input block?
<center>
<h3>Enter The Username And Password To Unlock This Computer</h3>
<script>
function incorrect() {
var user = document.getElementById("username").value;
var pass = document.getElementById("password").value;
text = "the username '" + user + "' is incorrect, and the password '" + pass + "' is also incorrect"
console.log(text)
alert(text)
}
</script>
<form>
<h6>Username</h6><input type="text" id="username" name="username" value="">
<h6>Password</h6><input type="text" id="password" name="password" value="">
<br><button type="button" onclick="incorrect()">Unlock</button>
</form>
</center>
the problem is about braces, you should use <br><button type="button" onclick="incorrect()">Unlock</button>
function incorrect(){
var user = document.getElementById("username");
var pass = document.getElementById("password");
text = "the username '"+user+"' is incorrect, and the password '"+pass+"' is also incorrect"
console.log(text)
alert(text)
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<center>
<h3>Enter The Username And Password To Unlock This Computer</h3>
<form>
<h6>Username</h6><input type="text" id="username" name="username" value="">
<h6>Password</h6><input type="text" id="password" name="password" value="">
<br><button type="button" onclick="incorrect()">Unlock</button>
</form>
</center>
</body>
</html>
<input type="text" class="input">
<button class="button">sad</button>
let t = document.querySelector('.button');
t.addEventListener('click', function () {
let y = document.querySelector('.input').value;
console.log(y);
});
this is my code
i was trying to make a signup form and i made a script
i jst tried that the username should contain both alphabets and numbers and nothing else
if this condition is true than it continues
else it will give an error message displayed jst below it
<html>
<head>
</head>
<body>
<style>
#sign_up_details {
padding: 10px;
}
</style>
<form name="sign_up_details">
<h3>Enter your details below</h3>
<input type="textbox" id="username" placeholder="Enter your desired username" />
<p id="usrnm_check"></p><br>
<input type="password" id="password" placeholder="Enter your desired password" />
<p id="pass_check"></p><br>
<input type="textbox" id="email" placeholder="Enter your email id" />
<p id="email_check"></p><br>
<input type="submit" name="submit" value="Submit" onclick="store()" />
</form>
<script>
var usrnm = document.getElementById("username");
var pass = document.getElementById("password");
var email = document.getElementById("email");
var usrnm_check = document.getElementById("usrnm_check");
var pass_check = document.getElementById("pass_check");
var email_check = document.getElementById("email_check");
function store() {
var newReg = /^[A-Z]+[a-z]+[0-9]+$/
if (usrnm.value.match(newReg)) {
//next action here
} else {
usrnm_check.innerHTML = "Username should have alphabets and numbers";
}
}
</script>
</body>
</html>
for eg when i keep the username field empty and click on submit the error which is to be displayed comes below it but it soon disappears.
i dont know the reason for it.
you will have to set the store in onsubmit event and not on the submit button onclick event because,onclick will execute the function and submit the form as well.
here is fiddle
execute function before submit
<html>
<head>
</head>
<body>
<style>
#sign_up_details {
padding: 10px;
}
</style>
<form name="sign_up_details" onsubmit="return store()">
<h3>Enter your details below</h3>
<input type="textbox" id="username" placeholder="Enter your desired username" />
<p id="usrnm_check"></p><br>
<input type="password" id="password" placeholder="Enter your desired password" />
<p id="pass_check"></p><br>
<input type="textbox" id="email" placeholder="Enter your email id" />
<p id="email_check"></p><br>
<input type="submit" name="submit" value="Submit" />
</form>
<script>
var usrnm = document.getElementById("username");
var pass = document.getElementById("password");
var email = document.getElementById("email");
var usrnm_check = document.getElementById("usrnm_check");
var pass_check = document.getElementById("pass_check");
var email_check = document.getElementById("email_check");
function store() {
var newReg = /^[A-Z]+[a-z]+[0-9]+$/
if (usrnm.value.match(newReg)) {
//next action here
return true;
} else {
usrnm_check.innerHTML = "Username should have alphabets and numbers";
return false;
}
}
</script>
</body>
</html>
You can try something like this:
<form action="/dosomething.htm" method="GET" onsubmit="return store(this)">
[...]
<input type="submit" value="Go">
</form>
<script type="text/javascript">
function store() {
var newReg = /^[A-Z]+[a-z]+[0-9]+$/
if (usrnm.value.match(newReg)) {
//next action here
return true;
} else {
usrnm_check.innerHTML = "Username should have alphabets and numbers";
return false;
}
}
</script>
Notice return true and return false statements in store() and in form onSubmit. If the store() will return false the form will not get submitted. At present your message goes away after display because your form gets submitted even if the validation fails.
Hope this helps!!
I'm new to the web programming can you please tell me what's wrong with following code?
<!doctype html>
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
function validate (form) {
// valriable declaration
var returnValue = true;
var username = form.txtUserName.value;
var password1 = form.txtPassword.value;
var password2 = form.txtPassword2.value;
// check for UserName length
if (username.length < 6) {
returnValue = false;
alert("Your username must be at least\n6 characters long.\nPlease try again.");
frmRegister.txtUserName.focus();
};
// check for password length
if (password1.length < 6) {
returnValue = false;
alert("Your password must be at least\n6 characters long.\nPlease try again.");
frmRegister.txtPassword.value = "";
frmRegister.txtPassword2.value = "";
frmRegister.txtPassword.focus();
};
// check for match of password field
if (password1.value != password2.value) {
returnValue = false;
alert("Your password entries did not match.\nPlease try again.");
frmRegister.txtPassword.value = "";
frmRegister.txtPassword2.value = "";
frmRegister.txtPassword.focus();
};
return returnValue;
}
</script>
</head>
<body>
<form method="post" name="frmRegister" action="register.html" onsubmit="return validate(this);">
<div><label for="txtUsername">UserName : </label>
<input type="text" name="txtUserName" id="txtUserName" size="12" />
</div>
<div><label for="txtPassword">Password : </label>
<input type="text" name="txtPassword" id="txtPassword" size="12" />
</div>
<div>
<label for="txtPassword2">Confirm your password : </label>
<input type="text" name="txtPassword2" id="txtPassword2" size="12" />
</div>
<div>
<input type="submit" value="Log in" />
</div>
</form>
</body>
</html>
first of all stop using return from event handler.
convert your code to
<form ... onsubmit="validate(event,this)">
change your function to validate(event,form);
wherever you feel form should not be submitted..
write :
event.preventDefault()
instead of return false
Demonstration :
http://codepen.io/anon/pen/kGmeL
I want to make a loginform using pure javascript (no libraries) and I have 2 problems!
SOLVED! by Grainier Perera
When username.value.length hits 4 characters usernameInfo.innerHTML changes back to "Please type ypur username" ! The problem is passwordInfo.innerHTML changes to "At least 6 characters" as soon as username.value.length hits 4 characters. So here is my first problem. I want passwordInfo.innerHTML to change only when I start typing in password field (onkeyup).
My second problem. When I submit the form with empty fields I want both usernameInfo.innerHTML and passwordInfo.innerHTML to change, not only usernameInfo.innerHTML.
To make it easier for u to understand the code I'll paste it all here so you can just copy it and try it yourself. Thank you!
<!DOCTYPE html>
<html>
<head>
<style>
form label {display:block; margin-top:5px;margin-left:3px;font:12px Arial;color:gray;}
form input {width:200px;padding:5px;display:inline-block; margin-top:5px;}
#submit {padding:7px;background-color:#f7af38; border:#f7af38;width:215px;display:inline-block;margin-top:15px;font:11px Tahoma;color:black;}
#usernameInfo {display:inline-block; font:italic 12px Arial; color:gray;}
#passwordInfo {display:inline-block; font:italic 12px Arial; color:gray;}
#finalInfo {font:italic 12px Arial; margin-left:5px;}
</style>
</head>
<body>
<form method="post" action="login.php" onsubmit="return validate();">
<label>Username</label>
<input id="username" name="username" type="text" onkeyup="return validate();" />
<span id="usernameInfo"></span>
<label>Password</label>
<input id="password" name="password" type="password" onkeyup="return validate();" />
<span id="passwordInfo"></span>
<br />
<input type="submit" id="submit" name="submit" />
<span id="finalInfo"></span>
</form>
<script type="text/javascript">
document.getElementById('usernameInfo').innerHTML = "Please type your username!";
document.getElementById('passwordInfo').innerHTML = "Please type your password!";
function validate()
{
var username = document.getElementById('username');
var usernameInfo = document.getElementById('usernameInfo');
var password = document.getElementById('password');
var passwordInfo = document.getElementById('passwordInfo');
if(username.value.length < 4){
usernameInfo.style.color='red';
usernameInfo.innerHTML = "At least 4 characters!";
return false;
}
else{
usernameInfo.style.color='gray';
usernameInfo.innerHTML = "Please type your username!";
}
if(password.value.length < 6){
passwordInfo.style.color='red';
passwordInfo.innerHTML = "At least 6 characters!";
return false;
}
else{
passwordInfo.style.color='gray';
passwordInfo.innerHTML = "Please type your password!";
}
}
</script>
</div>
</body>
</html>
Try This
HTML
<form method="post" action="login.php" onsubmit="return validateForm();">
<label>Username</label>
<input id="username" name="username" type="text" onkeyup="return validateUserName();" />
<span id="usernameInfo"></span>
<label>Password</label>
<input id="password" name="password" type="password" onkeyup="return validatePassWord();" />
<span id="passwordInfo"></span>
<br />
<input type="submit" id="submit" name="submit" />
<span id="finalInfo"></span>
</form>
JavaScript
document.getElementById('usernameInfo').innerHTML = "Please type your username!";
document.getElementById('passwordInfo').innerHTML = "Please type your password!";
function validateUserName()
{
var username = document.getElementById('username');
var usernameInfo = document.getElementById('usernameInfo');
if(username.value.length < 4){
usernameInfo.style.color='red';
usernameInfo.innerHTML = "At least 4 characters!";
return false;
}
else{
usernameInfo.style.color='gray';
usernameInfo.innerHTML = "Please type your username!";
return true;
}
}
function validatePassWord()
{
var password = document.getElementById('password');
var passwordInfo = document.getElementById('passwordInfo');
if(password.value.length < 6){
passwordInfo.style.color='red';
passwordInfo.innerHTML = "At least 6 characters!";
return false;
}
else{
passwordInfo.style.color='gray';
passwordInfo.innerHTML = "Please type your password!";
return true;
}
}
function validateForm()
{
var userValid = validateUserName();
var passValid = validatePassWord();
return userValid && passValid;
}
Working Sample : link