I have created a Login Page with HTML, CSS & JS. If the value in <input> is correct, the js code takes me to the location I want with the code window.location.replace("href") and if the value is incorrect, it displays an alert.
But I want a code so that if the input is empty it would show another alert not the previous one. I have also used required field in html <input> tag: <input type="password" id="password" class="input" required>, but by using required the whole code doesn't works.
The code is:
Javascript
function auth(event) {
event.preventDefault();
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username === "admin#gmail.com" && password === "user") {
window.location.replace("http://www.rex14.ml/");
} else {
alert("Please enter valid information");
return;
}
}
I have tried this but it is not working:
`
function auth(event) {
event.preventDefault();
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username === "admin#gmail.com" && password === "user") {
window.location.replace("http://www.rex14.ml/");
} else {
alert("Please enter valid information");
return;
}
if (username === "" && password === "") {
alert("Please enter information");
} else {
return;
}
}
`
The problem is with your if/else structure.By using required in form, your form is not submitted and your function is not called, your function will only be called when the form is submitted, required doesn't allow form to submit until the field is filled out.
html file is:
<body>
<form id="form">
<input type="text" placeholder="username" id="username">
<input type="text" placeholder="password" id="password">
<button type="submit">Submit</button>
</form>
<script src="index.js"></script>
</body>
and javascript file will be:
document.getElementById("form").addEventListener("submit", auth);
function auth(event) {
event.preventDefault();
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
console.log(username);
if (username === "admin#gmail.com" && password === "user") {
window.location.replace("http://www.rex14.ml/");
} if (username === "" && password === "") {
alert("Please enter information");
} else{
alert("Please enter valid information");
return;
}
}
for live demo, visit my codepen
Just add a validation to check if the fields are empty:
if (username.length === 0 || password.length === 0) {
alert("Username and password must be filled!");
return;
}
So your method would look like:
function auth(event) {
event.preventDefault();
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// check if the username of password are empty
if (username.length === 0 || password.length === 0) {
alert("Username and password must be filled!");
return false;
}
if (username === "admin#gmail.com" && password === "user") {
window.location.replace("http://www.rex14.ml/");
} else {
alert("Please enter valid information");
return;
}
}
Regarding your second snippet, you cant do 2 else's like if / else / else, the right way to do it with a single if block would be to use a simple, if / else if / else like this:
function auth(event) {
event.preventDefault();
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username.length === 0 || password.length === 0) {
alert("Username and password must be filled!");
return;
} else if (username === "admin#gmail.com" && password === "user") {
window.location.replace("http://www.rex14.ml/");
} else {
alert("Please enter valid information");
return;
}
}
NOTE: Javascript code can be seen just by inspecting the code of the page, so storing username & password in the js file like you are doing is super insecure, anyone would be able to inspect the code and see what username and password should be used.
The reason I can see is the order of if-else and if statements. The if statement after if-else is unreachable that's why it does not show the new alert you added.
Try using the following code :
function auth(event) {
event.preventDefault();
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username === "admin#gmail.com" && password === "user")
{
window.location.replace("http://www.rex14.ml/");
} else if (username === "" && password === "") {
alert("Please enter information");
} else {
alert("Please enter valid information");
return;
}
}
Fist of all, you should use "else if". Otherwise your third condition would never be considered. A simple solution is like this:
function auth(event) {
event.preventDefault();
if (username === "admin#gmail.com" && password === "user") {
window.location.replace("http://www.rex14.ml/");
} else if (username === "" && password === "") {
alert("Please enter information");
return;
} else {
alert("Please enter valid information");
return;
}
}
You can also get rid of any "else" statement this way:
function auth(event) {
event.preventDefault();
if (username === "admin#gmail.com" && password === "user") {
window.location.replace("http://www.rex14.ml/");
return;
}
if (username === "" && password === "") {
alert("Please enter information");
return;
}
alert("Please enter valid information");
return;
}
Second, if you have a "required" input inside a form, and you leave it empty, it won't be submitted. If your input is not inside a form, add an event handler. If it is inside a form, remove the "required" field because you are already handling the empty input problem inside your auth function.
<!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" />
<title>Document</title>
</head>
<body>
<form id="form" onsubmit="return auth(this)">
<input type="text" placeholder="username" id="username" />
<input type="text" placeholder="password" id="password" />
<button type="submit">Submit</button>
</form>
</body>
<script>
function auth(event) {
var username = event.username.value;
var password = event.password.value;
if (username === "admin#gmail.com" && password === "user") {
window.location.replace("http://www.rex14.ml/");
} else {
alert("Please enter valid information");
return false;
}
return false;
}
</script>
</html>
Related
I want the user to verify his email address in the "email2" field and in case he has entered the wrong email address the function returns an error message and corrects his email address from the "email" field. This function returns no error but also does not work, ie does not report an error message when email addresses differ. I'm asking for help.
<html>
<script>
function validateForm() {
var x = document.forms["contactform"]["email"].value;
if (x == "") {
alert("E-mail is empty");
return false;
}
var x = document.forms["contactform"]["email2"].value;
if (x == "") {
alert("Verification E-mail is empty");
return false;
if(email != email2){
// Display the error message
document.getElementById("emailMismatch").style.display="inline";
alert("Email address does not match");
return false;
}else{
document.getElementById("emailMismatch").style.display="none";
}
}
}
</script>
<body>
<form name="contactform" method="post">
<input type="text" name="email" maxlength="80" size="30" placeholder="E-mail contact person" title="The e-mail must be in the format, example: primer#email.com ">
<input type="text" name="email2" maxlength="80" size="30" placeholder="Verify E-mail address" title="The e-mail must be in the format, example: primer#email.com ">
<input type="submit" value="Send" style="border:1px solid #000000">
</form>
</body>
</html>
You are missing a } to terminate the second IF so the third IF is inside the second and therefore never runs because it is after a return :)
<script>
function validateForm() {
var x = document.forms["contactform"]["email"].value;
if (x == "") {
alert("E-mail is empty");
return false;
}
var x = document.forms["contactform"]["email2"].value;
if (x == "") {
alert("Verification E-mail is empty");
return false;
} <-- !!!!!!!!!!!!! THIS WAS MISSING !!!!!!!!!!!!
if(email != email2){
// Display the error message
document.getElementById("emailMismatch").style.display="inline";
alert("Email address does not match");
return false;
}else{
document.getElementById("emailMismatch").style.display="none";
}
#} <-- THIS WAS IN THE WRONG PLACE REMOVE IT
}
</script>
You defined a variable named x to hold email input values, then you do comparison with email and email2 variable, which are not defined.
function validateForm() {
var email = document.forms["contactform"]["email"].value;
if (email == "") {
alert("E-mail is empty");
return false;
}
var verificationEmail = document.forms["contactform"]["email2"].value;
if (verificationEmail == "") {
alert("Verification E-mail is empty");
return false;
} <-- !!!!!!!!!!!!! THIS WAS MISSING !!!!!!!!!!!!
if(email != verificationEmail){
// Display the error message
document.getElementById("emailMismatch").style.display="inline";
alert("Email address does not match");
return false;
}else{
document.getElementById("emailMismatch").style.display="none";
}
}
I am a new programer in js and I tried to do a basic website using js and html.
I tried to do like username and password input boxes but the function of it doesn't work. What is the problem?
This is the code:
function entering() {
alert("hi")
var username = document.getElementById("fuser");
var password = document.getElementById("fpass");
if (username == "f") {
if (password == "f") {
alert('Nice');
}else {
alert('wrong password');
}else{
alert('wrong username');}}
document.getElementById("frm1").submit();
}
<h1>Best Website</h1>
<h2>Hello!<h2>
<form id = frm1>
Username: <input type = "text" id="fuser"><br>
Password: <input type = "text" id="fpass"><br>
<input type = "button" onclick = "entering()" value = "submit">
</form>
What you are searching for is the value property of the input element.
var username = document.getElementById("fuser");
var password = document.getElementById("fpass");
Are only references to the elements in your page, not what the user entered, for that use
var username = document.getElementById("fuser").value;
var password = document.getElementById("fpass").value;
Complete Code:
function entering() {
alert("hi")
var username = document.getElementById("fuser").value;
var password = document.getElementById("fpass").value;
if (username == "f") {
if (password == "f") {
alert("correct");
} else {
alert("wrong password")
}
} else {
alert("wrong username");
}
//document.getElementById("frm1").submit();
}
<h2>Hello!<h2>
<form id = frm1>
Username: <input type = "text" id="fuser"><br>
Password: <input type = "text" id="fpass"><br>
<input type = "button" onclick = "entering()" value = "submit">
</form>
var username = document.getElementById("fuser");
var password = document.getElementById("fpass");
When grabbing an input element, you get the element stored into a variable, not the value. When you write your if conditional then, you need to point to the property on the element called value.
if (username.value == "f") {
if (password.value == "f") {
You'll need to rework your if/else statements and make sure to access the value of the element you're referencing.
if (username == "f") {
if (password == "f") {
alert('Nice');
}else {
alert('wrong password');
}else{
alert('wrong username');}}
To:
if (username.value == "f") {
if (password.value == "f") {
alert('Nice');
} else {
alert('wrong password');
}
} else {
alert('wrong username');
}
That should get you moving again.
<!DOCTYPE html>
<html>
<head>
<title>The Best Website</title>
</head>
<body>
<h1>Best Website</h1>
<h2>Hello!
<h2>
<form id=frm1>
Username:
<input type="text" id="fuser">
<br> Password:
<input type="text" id="fpass">
<br>
<input type="button" onclick="entering()" value="submit">
</form>
<script>
function entering() {
alert("hi")
var username = document.getElementById("fuser");
var password = document.getElementById("fpass");
if (username == "f") {
if (password == "f") {
alert('Nice');
} else {
alert('wrong password');
}
} else {
alert('wrong username');
}
document.getElementById("frm1").submit();
}
</script>
</body>
I have a simple log in and I cannot get the validation to work at all. I was wondering if someone could help.
HTML:
<div class="login">
<h2>Sign In</h2>
<form id="frmLogin" method="post">
Username: <input id="txtUsername" name="txtUsername" type="text" /><br/>
Password: <input name="txtPassword" type="password" /> <br/>
<button onClick="validateLogin()">Log In</button>
</form>
</div><!-- End of Login Section -->
Javascript:
<script>
function validateLogin()
{
var userName = document.getElementsByID('txtUsername').value;
var invalidForm = 0;
if(userName == "")
{
alert("Username cannot be blank!");
invalidForm = 1;
}//end if
if(invalidForm == 0)
{
alert("Form validated, no errors");
}//end if
}
</script>
At the moment I'm just testing for an empty username, once I can get this working I'll continue on with the rest.
Thank you!
To get and element by ID the function name is getElementById and not getElementsByID, besides, javascript is case sensitive so getElementByID does not work.
function validateLogin()
{
var userName = document.getElementById('txtUsername').value;
var invalidForm = 0;
if(userName == "")
{
alert("Username cannot be blank!");
invalidForm = 1;
}//end if
if(invalidForm == 0)
{
alert("Form validated, no errors");
}//end if
}
Do your jquery code something like these :-
<script>
function validateLogin()
{
var userName = document.getElementById('txtUsername').value;
var invalidForm = 0;
var errMessage = ""
if(userName === "")
{
errMessage = "Username cannot be blank!";
invalidForm = 1;
}//end if
if(invalidForm == 0)
{
alert("Form validated, no errors");
}
else if (invalidForm == 1)
{
alert(errMessage);
return false;
}
}
</script>
It may help you.
I'm editing Dotmailer's signup form code as some of my users won't have email addresses. I want to set the form so that if the user does not enter a value for their email address, for it to default to say test#test.com
The field must be filled for it to successfully upload for the Dotmailer DB so I can't just remove it as a required field.
Below is the script at the start of the form which seems to be causing the issues (from my limited knowledge)
<script language="javascript">// <![CDATA[
function validate_signup(frm) {
var emailAddress = frm.Email.value;
var errorString = '';
if (emailAddress == '' || emailAddress.indexOf('#') == -1) {
errorString = 'Please enter your email address';
}
var isError = false;
if (errorString.length > 0)
isError = true;
if (isError)
alert(errorString);
return !isError;
}
// ]]></script>
Ty in advance for any assistance you can provide.
You just need to change
if (emailAddress == '' || emailAddress.indexOf('#') == -1) {
errorString = 'Please enter your email address';
}
to
if (emailAddress == '' || emailAddress.indexOf('#') == -1) {
var input = document.getElementById('#myInput');
input.value = "test#test.com";
}
where #myInput is the id of the email field.
In my login script when the username and password are both correct it must go to the next page (main/menu page) of the intel XDK.
My problem is how or what code can I use to call the next page whenever the username and password is correct (login successful)?
function validateForm() {
var formUsername = document.forms.login.username.value;
var formPassword = document.forms.login.password.value;
var MINLENGTH = 5;
// Validate username and password
if (formUsername === null || formUsername === "") {
alert("Username must be filled out");
}
else if (formPassword === null || formPassword === "") {
alert("Password must be filled out");
}
else if (formUsername.length < MINLENGTH || formPassword.length < MINLENGTH) {
alert("The minimum length of username and password at least " + MINLENGTH);
}
else if(formUsername == 'admin' && formPassword == 'admin'){
alert('welcome');
//this is where should i put the code to go at the next page of the XDK API.
return;
}
alert("Login failed!!!");
}
got it guys..
it will be.. like this ..
else if(formUsername == 'admin' && formPassword == 'admin'){
alert('welcome');
activated_page("#menu");
return;
}