I've been trying to switch pages from one login page to another. It does not seem to load or am i doing something wrong?
the link of code pen: https://codepen.io/batajusasmit/pen/OJVyGEW
Here is my code.
function validate() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
if (username == 'admin' && password == 'admin') {
alert('login successful!');
window.location = 'link.html';
return false;
}
}
You have to stop submission on same page and then go to new location
You have used validate() function in button onclick. But you should use return validate() which will return boolean value to stop form from submitting
function validate() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
if (username == 'admin' && password == 'admin') {
alert('login successful!');
window.location = '/'; //change with your location
return false;
}
}
<div class="container">
<form>
<h1 id="form">Login!</h1>
<div class="login">
<label class="name">username:</label>
<input id="username" class="username" type="text" placeholder="name...">
<label class="pass">password:</label>
<input id="password" class="password" type="password" placeholder="password...">
</div>
<div class="submit">
<button id="submit" class="btn btn-primary" onclick="return validate()">Submit</button>
</div>
</form>
</div>
I have figured it out. I just needed the backslash.
window.location.href = '/link.html';
Related
I have a javascript login page (I know it's not secure!) How would I make the website create an iframe if the value is correct?
I have already tried window.location.assign but doesn't work! When you add any code it deletes the values in the inputs and puts the values you inserted in the url?
<div class="box" id="loginbox">
<h2>Login</h2>
<form id="form1" name="form1" action="" onsubmit="return checkDetails();">
<div class="inputBox">
<input type="text" name="txtusername" id="txtusername" class="info" required />
<label>Username</label>
</div>
<div class="inputBox">
<input type="password" name="txtpassword" id="txtpassword" class="info" required/>
<label>Password</label>
</div>
<input type="submit" name="Login" id="Login" value="Login"/>
</form>
</div>
<script>var remainingAttempts = 3;
function checkDetails() {
var name = form1.txtusername.value;
var password = form1.txtpassword.value;
console.log('name', name);
console.log('password', password);
var validUsername = validateUsername(name);
var validPassword = validatePassword(password);
if (validUsername && validPassword) {
alert('Login successful');
document.getElementById("loginbox").remove();
var next = document.createElement("IFRAME");
next.src = 'https://codepen.io';
next.classList.add("codepen");
document.body.appendChild(next);
} else {
form1.txtusername.value = '';
form1.txtpassword.value = '';
remainingAttempts--;
var msg = '';
if (validPassword) {
msg += 'Username incorrect: ';
} else if (validUsername) {
msg += 'Password incorrect: ';
} else {
msg += 'Both username and password are incorrect: ';
}
msg += remainingAttempts + ' attempts left.';
alert(msg);
if (remainingAttempts <= 0) {
alert('Closing window...');
window.close();
}
}
return validUsername && validPassword;
}
function validateUsername(username) {
return username == 'GG';
}
function validatePassword(password) {
return password == '123';
}</script>
I want the page to create the iframe and remove the login box.
The problem is that you are triggering a form submission when your login button is clicked, which triggers a page load.
<input type="submit" name="Login" id="Login" value="Login"/>
The submit input type type triggers this behaviour. To avoid this, bind to the submit event in the javascript rather than the HTML and use preventDefault() to prevent the page from reloading.
var ele = document.getElementById("loginbox");
if(ele.addEventListener){
ele.addEventListener("submit", checkDetails, false); //Modern browsers
} else if(ele.attachEvent){
ele.attachEvent('onsubmit', checkDetails); //Old IE
}
function checkDetails(e) {
e.preventDefault();
// rest of your code
Code taken from this answer, which you should read for more information about form submission events and how to handle them.
I want to check the email validity in Javascript and then show alert box if its invalid and if valid then show the div2. But its not working
Here is javascript:
function _(x){
return document.getElementById(x);
}
function Phase1()
{
myemail = _("email").value;
var reg = /^(([^<>()[\]\\.,;:\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,}))$/;
if (reg.test(designeremail) == false)
{
alert('Invalid Email Address');
}
else
{
_("phase1").style.display = "none";
_("phase2").style.display = "block";
}
}
Here is my html:
<form id="myform" onsubmit="return false" >
<div id="phase1">
<label>Email</label><div><input type="text" id="email" name="email" required></div>
<div><button onclick="Phase1()" class="btn"><strong>Next</strong></button></div>
</div>
<div id="phase2">
<label>Name</label><div><input type="text" id="mname" name="myname" required></div>
<div><button onclick="Phase2()" class="btn"><strong>Submit</strong></button></div>
</div>
</form>
but even with wronng email it proceeds and shows the phase2
I think this is js and not php. Btw, it's because probably you're testing on the wrong variable:
if (reg.test(designeremail) == false)
you're testing designeremail, which is different from email from the form which probably you wanted test against to.
I have a login page having username and password after successful entry of username and password, it forward to the login controller.
My problem is that while forwarding to next page, in url the password enter is showing. I need to encrypt that and send over controller and have to decrypt that over controller.
this is my code.
jsp:
<form action="Login" onsubmit="return validate1()">
<h3>
<font color="red">username</font>
</h3>
<input type="text" name="username" id="username" /><br>
<h3>
<font color="red">password</font>
</h3>
<input type="password" name="password" id="password" /><br> <input type="submit" value="submit" />
</form>
javascript:
<script>
function validate1() {
return validate();
}
function validate() {
var isValid = true;
var name = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (name.length == 0) {
isValid = false;
alert("Username empty");
} else if (password.length == 0) {
isValid = false;
alert("Password empty");
}
return isValid;
}
</script>
url:
http://localhost:8080/PSMS/Login?username=jay&password=jay
here password is visible I need to encrypt the password and forward to controller where again I have to decrypt that password.
I think you need add an attribute to your form tag.
<form method="post"> ...
i am having this problem when i submit the form where both the password and username is wrong. I get an alert box saying that i have enter the wrong details. But when the username is correct and password is validation is wrong it will give me an arlet box by when pressed ok it will submit the form even when i have returned false.
Help please much appreciated
<script type="text/javascript">
function validate(form_id, firstName, password){
var Reg = /^[A-Za-z0-9_]{1,20}$/;
var Reg1 = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/;
var username = document.forms[form_id].elements[firstName].value;
var password = document.forms[form_id].elements[password].value;
if (Reg.test(username) == false) {
alert('Invalid Username.');
document.forms[form_id].elements[firstName].focus();
return false;
}
if (Reg1.test(password) == false) {
alert('Invalid Password.');
document.forms[form_id].elements[password].focus();
return false;
}
}
</script>
<form id="form_id" action="userlogininput.cgi" onsubmit="javascript:return validate('form_id','firstName','password');" name="form" method="post">
Username : <input type="text" id="firstName" name="firstName" class="textboxH-300" required><br>
Password : <input type="password" id="password" name="password" class="textboxH-300" required><br><br>
<input id="submitbtn" type="submit" value="Submit"/>
</form>
You can use e.preventDefault() to prevent form sending.
Here is a code example
(function(){
function validate(e) {
e.preventDefault(); // prevent the form sending
var Reg = /^[A-Za-z0-9_]{1,20}$/;
var Reg1 = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/;
var username = document.getElementById('firstName');
var password = document.getElementById('password');
if (Reg.test(username.value) == false) {
alert('Invalid Username.');
username.focus();
return false;
}
if (Reg1.test(password.value) == false) {
alert('Invalid Password.');
password.focus();
return false;
}
}
//add event listener for form submission
document.getElementById('form_id').addEventListener('submit',validate);
})();
<form id="form_id" action="userlogininput.cgi" name="form" method="post">
Username :
<input type="text" id="firstName" name="firstName" class="textboxH-300" required>
<br> Password :
<input type="password" id="password" name="password" class="textboxH-300" required>
<br>
<br>
<input id="submitbtn" type="submit" value="Submit" />
</form>
Try prevent default event.
Bind function to the form submit event:
function validate(form){
var Reg = /^[A-Za-z0-9_]{1,20}$/;
var Reg1 = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[0-9a-zA-Z]{8,}$/;
var username = form.querySelector('[name=firstName]');
var password = form.querySelector('[name=password]');
if (Reg.test(username.value) == false) {
event.preventDefault();
alert('Invalid Username.');
username.focus();
return false;
}
if (Reg1.test(password.value) == false) {
event.preventDefault();
alert('Invalid Password.');
password.focus();
return false;
}
}
<form onsubmit="validate(this)">
<input name="firstName">
<br>
<input name="password">
<br>
<button type="submit">submit</submit>
</form>
I have a problem with a Javascript function. It is supposed to check if two input boxes in a form have the same value, using an if statement.
HTML:
<form action="confirm_account.php" method="post" id="form" onsubmit="checkpassword()">
<p style="font-family:latine;">Password: <input type="password" name="password" id="password" style="font-family:latine;" required>
</p>
<br><br>
<p style="font-family:latine;">Re-enter Password: <input type="password" name="password-reenter" id="password-reenter" style="font-family:latine;" required> </p>
<span id="password-warning" style="color:red; font-weight:bold;"></span>
Javascript:
var password = document.getElementById("password").value;
var password2 = document.getElementById("password-reenter").value;
function checkpassword(){
if('password' == 'password2'){
document.getElementById("form").action = "confirm_account.php";
document.getElementById("password-warning").innerHTML = "";
}
else{
document.getElementById("password-warning").innerHTML = "The passwords do not match, please re-enter the password.";
document.getElementById("form").onsubmit = "return false";
}
};
The warning message shows up, but the onsubmit is not modified.
Try this, it should work:
function checkpassword() {
var password = document.getElementById("password").value;
var password2 = document.getElementById("password-reenter").value;
if (password === password2) {
document.getElementById("form").action = "confirm_account.php";
document.getElementById("password-warning").innerHTML = "";
document.getElementById("password-success").innerHTML = "The passwords match! Well done!";
} else {
document.getElementById("password-warning").innerHTML = "The passwords do not match, please re-enter the password.";
document.getElementById("password-success").innerHTML = "";
document.getElementById("password-reenter").focus();
return false;
}
}
<form action="#" method="post" id="form" onsubmit="return checkpassword()">
<p style="font-family:latine;">Password:
<input type="password" name="password" id="password" style="font-family:latine;" required>
</p>
<br>
<p style="font-family:latine;">Re-enter Password:
<input type="password" name="password-reenter" id="password-reenter" style="font-family:latine;" required>
</p>
<p>
<span id="password-success" style="color:green;"></span>
<span id="password-warning" style="color:red; "></span>
<input type="submit" name="btnSave" value="Try it">
</form>
var password = document.getElementById("password").value;
var password2 = document.getElementById("password-reenter").value;
In your if condition, you're not checking password and password2 instead you are actually checking the strings.
It should be
if(password === password2){
And onsubmit is an event and you can't assign string to it. As you're calling checkpassword from onsubmit of form. To prevent form submission just return false.
var password = document.getElementById("password").value;
var password2 = document.getElementById("password-reenter").value;
function checkpassword(){
if(password === password2){
document.getElementById("password-warning").innerHTML = "";
}
else{
document.getElementById("password-warning").innerHTML = "The passwords do not match, please re-enter the password.";
return false;
}
};