I created a login to my site. That you need to enter username and password:
All is working fine. But the problem is when i write in Hebrew (without clicking the login button) it immediately send an error.
Fiddle:
https://jsfiddle.net/L8ynedar/2/
HTML Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<section class="container" id="overlay">
<div class="login" id="overlay">
<h1>Barometer Login</h1>
<form method="post" >
<p>
<input type="text" name="username" id="username" value="" placeholder="Username" required="required" >
</p>
<p>
<input type="password" name="password" id="password" value="" placeholder="Password" required="required" >
</p>
<p class="remember_me"> </p>
<p class="submit">
<input class="btn btn-primary" style="background-color:purple;" onClick="SignInFunction(this.value)" name="commit" value="Login">
</p>
</form>
</div>
</section>
JS Code:
function SignInFunction(val){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if(username=="Anna" && password=="123"){
document.getElementById("AftetLogin").style.display = "block";
document.getElementById("overlay").style.display = "none";
}
}
After a lot of debugging. I found that, no matter where i am writing in Hebrew There is a alert bug of javascript.
Related
I'm doing a brief validation of .name but I can't get the alert to show any ideas? I don't know if I'm missing something or if I'm doing something wrong, I appreciate your help
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Proyecto Poker</title>
</head>
<body>
<form action="" id="form">
<div class="form">
<h1>FORMULARIO DE REGISTRO</h1>
<div class="grupo">
<input type="text" name="" placeholder="Name" id="nombre"><span class="barra"></span>
</div>
<div class="grupo">
<input type="text" name="" placeholder="Apellido" id="apellido"><span class="barra"></span>
</div>
<div class="grupo">
<input type="number" name="" placeholder="Edad" id="edad"><span class="barra"></span>
</div>
<div class="grupo">
<input type="email" name="" placeholder="Email" id="email"><span class="barra"></span>
</div>
<div class="grupo">
<input type="password" name="password" placeholder="Password" id="password"><span class="barra" ></span>
</div>
<button type="submit">Registrarse</button>
</div>
</form>
<script src="./main.js"></script>
</body>
</html>
it does not take the validation of the name variable I do not know if I am omitting something or if it is wrong any help is welcome I am just getting started in javascript and I do not have much knowledge thank you very much
JS
document.getElementById('form').addEventListener('submit', (e) => {
e.preventDefault();
let nombre = document.getElementById('nombre').value;
let apellido = document.getElementById('apellido').value;
let edad = document.getElementById('edad').value;
let email = document.getElementById('email').value;
let password = document.getElementById('passsword');
let expRegNombre = /^\s+$/;
if(nombre == null || nombre.lenght == 0 || expRegNombre.test(nombre)){
alert('nombre invalido')
}
})
This is working as expected. You had a typo where "nombre.lenght == 0" should be nombre.length == 0.
See working snippet below:
document.getElementById('form').addEventListener('submit', (e) => {
e.preventDefault();
let nombre = document.getElementById('nombre').value;
let apellido = document.getElementById('apellido').value;
let edad = document.getElementById('edad').value;
let email = document.getElementById('email').value;
let password = document.getElementById('passsword');
let expRegNombre = /^\s+$/;
if(nombre == null || nombre.length == 0 || expRegNombre.test(nombre)){
alert('nombre invalido')
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Proyecto Poker</title>
</head>
<body>
<form action="" id="form">
<div class="form">
<h1>FORMULARIO DE REGISTRO</h1>
<div class="grupo">
<input type="text" name="" placeholder="Name" id="nombre"><span class="barra"></span>
</div>
<div class="grupo">
<input type="text" name="" placeholder="Apellido" id="apellido"><span class="barra"></span>
</div>
<div class="grupo">
<input type="number" name="" placeholder="Edad" id="edad"><span class="barra"></span>
</div>
<div class="grupo">
<input type="email" name="" placeholder="Email" id="email"><span class="barra"></span>
</div>
<div class="grupo">
<input type="password" name="password" placeholder="Password" id="password"><span class="barra" ></span>
</div>
<button type="submit">Registrarse</button>
</div>
</form>
<script src="./main.js"></script>
</body>
</html>
I have a problem that is killing me right now because I can't see why it isn't working. I have made a script in one file that works, but when I copy/paste it into the file that I want it to work in, it doesn't work.
Here's the script I just made:
<html>
<body>
<p id="myElement"></p>
<script>
if (window.location.hash == "#hello") {
document.getElementById("myElement").innerHTML = 'Vi har Hello';
} else {
document.getElementById("myElement").innerHTML = '';
}
</script>
</body>
</html>
Here it works, but when I insert it into the file that it was meant for it won't work. Here it is:
<html>
<head>
<title>...</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body id="top">
<div id="forside"></div>
<div class="bgded overlay" style="background-image:url('images/stor_1.png');">
<div id="pageintro" class="hoc clear">
<li>
<p></p><h2>Log ind</h2>
<p id="myElement"></p>
<script>
if (window.location.hash == "#hello") {
document.getElementById("myElement").innerHTML = 'Vi har Hello';
} else {
document.getElementById("myElement").innerHTML = '';
}
</script>
<div id="comments">
<font color="black">
<form action="proces.php" method="post">
<input class="form-control" type="text" id="name" size="22" name="username" placeholder="Brugernavn" required><br>
<input class="form-control" type="password" id="name" size="22" name="pass" placeholder="Kodeord" required><br>
<input type="submit" name="submit" value="Log Ind!">
</form>
</font><br>
<i class="fa fa-chevron-left" aria-hidden="true"> Tilbage til forsiden</i>
</div>
</li>
</div>
</div>
<?php include_once "footer.php"; ?>
<a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>
<script src="layout/scripts/jquery.min.js"></script>
<script src="layout/scripts/jquery.mobilemenu.js"></script>
</body>
</html>
What the script, I am inserting, does is to detect if #Hello is in the URL and if it is, it has to display some text... But it won't work.
Anybody who has an idea about what I could be doing wrong?
your code will only run once when your page document first time load, if you do want to check the hash every time its changed, it is better to put in a change callback.
please also be sure you jQuery relative path is right.
$(function() { // ensure you will execute script after document loaded
$(window).on('hashchange', function() { // put you code in side change callback.
if (window.location.hash == "#hello") {
document.getElementById("myElement").innerHTML = 'Vi har Hello';
} else {
document.getElementById("myElement").innerHTML = '';
}
});
});
<html>
<head>
<title>...</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body id="top">
<div id="forside"></div>
<div class="bgded overlay" style="background-image:url('images/stor_1.png');">
<div id="pageintro" class="hoc clear">
<li>
<p></p>
<h2>Log ind</h2>
<p id="myElement"></p>
<script>
</script>
<div id="comments">
<font color="black">
<form action="proces.php" method="post">
<input class="form-control" type="text" id="name" size="22" name="username" placeholder="Brugernavn" required>
<br>
<input class="form-control" type="password" id="name" size="22" name="pass" placeholder="Kodeord" required>
<br>
<input type="submit" name="submit" value="Log Ind!">
</form>
</font>
<br>
<i class="fa fa-chevron-left" aria-hidden="true"> Tilbage til forsiden</i>
</div>
</li>
</div>
</div>
<a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>
<script src="layout/scripts/jquery.min.js"></script>
<script src="layout/scripts/jquery.mobilemenu.js"></script>
<script type="text/javascript">
$(function() {
$(window).on('hashchange', function() {
if (window.location.hash == "#hello") {
document.getElementById("myElement").innerHTML = 'Vi har Hello';
} else {
document.getElementById("myElement").innerHTML = '';
}
});
});
</script>
</body>
</html>
try adding these
<script src="layout/scripts/jquery.min.js"></script>
<script src="layout/scripts/jquery.mobilemenu.js"></script>
at the top in the head section
I am trying to create a login page like facebook. Used html and javascript I managed to create login page with predefined username and password.If you type correct password then it will redirect to a new page. But if you type wrong password or username then it will show error message on the side of textbox like real facebook
my code is
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fakebook -Login</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body class="login">
<div id="facebook-Bar">
<div id="facebook-Frame">
<div id="logo"> Facebook </div>
<br>
<br>
<br>
<br>
<div class="loginbox radius">
<h2 style="color:#141823; text-align:center;">Log in to Facebook</h2>
<div class="loginboxinner radius">
<div class="loginheader">
</div>
<div class="loginform">
<form id="login" action="" method="post">
<p>
<input type="text" id="username" name="username" placeholder="Your Email" value="" class="radius" />
</p>
<p>
<input type="password" id="password" name="password" placeholder="Password" class="radius" />
</p>
<p>
<button class="radius title" onclick="check(this.form)" name="client_login">Log In</button>
</p>
<script language="javascript">
function check(form)
{
if(form.username.value == "rohit" && form.password.value == "password")
{
window.open('target.html')
}
else
{
document.getElementById("username").innerHTML = "wrong username"
}
}
</script>
<br>
<br>
forgot your password?</label></td>
| sign up for facebook</label></td>
</form>
</div>
</div>
</div>
</body>
</html>
Here is the facebook error message
I have been trying to create a form validated for my call-back form (Full name and Phone number only), but does not work. please can you help me how to update the JavaScript check the valid INPUT information?
I want the valid Full name format such as "First Name Last Name" and UK phone number format as the valid information, the valid fields turn green (with a tickmark), thereby giving immediate feedback to users. please see my code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form method="post" action="php/call-back.php">
<div class="row">
<div class="col-lg-12 form-group">
<input id="name" type="text" name="name" placeholder="Enter your Full Name" class="form-control" required>
</div>
<div class="col-lg-12 form-group">
<input id="phone" type="tel" name="phone" placeholder="Enter your phone number" class="form-control" required>
</div>
<div class="col-lg-12 form-group">
<input type="hidden" name="save" value="contact">
<button type="submit" class="btn btn-default pull-right">Submit</button>
</div>
</div>
</form>
<!-- JavaScript -->
<script src="js/bootstrap.js"></script>
<script src="js/jquery-1.10.2.js"></script>
</body>
</html>
Thanks a lot.
I have a login form inside an iframe. Here is the code for the main page:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<script language="javascript">
function SubmitForm() {
document.getElementById('loginframe').contentWindow.document.getElementById('login').submit();
}
</script>
<title>Login to Vote</title>
</head>
<body>
<iframe id="loginframe" src="sasloginhandler.html"></iframe>
<input onclick="SubmitForm()" value="Submit form" type="button">
</body>
</html>
And here is the code for the "sasloginhandler.html" page:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<title>Login to Vote</title>
</head>
<body>
<form action="https://moodle.standrews-de.org/login/index.php" method="post"
id="login">
<div class="loginform">
<div class="form-input"> <input name="username" placeholder="Username"
id="username"
size="15"
type="text">
</div>
<div class="form-input"> <input name="password" placeholder="Password"
id="password"
size="15"
value=""
type="password">
<input id="loginbtn" value="Login" type="submit"> </div>
</div>
<div class="forgetpass"><a href="forgot_password.php">Forgotten your
username or password?</a></div>
</form>
</body>
</html>
The problem is, neither the submit button inside the iframe nor the javascript submit button outside the iframe does anything. I have tested the iframe code on its own and it works fine, so it seems to be some part of the iframe that is causing the issue. However, I don't know why this would be.
Thank you!
The id of the form in the iframe is login but you try to get it with loginform
document.getElementById('loginframe').contentWindow.document.getElementById('login').submit();