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"> ...
Related
This is a two-part question.
Part 1. The passConfirm function that I currently have is there to make sure that the password and confirming password values match. Right now, when I type in my password the button disappears. The purpose of this function is to display a message while the user is creating a password and confirming it, that the password does or does not match. Does anyone know why that is happening based on the code I have?
Part 2. Is there a way to refactor my passConfirm function? I tried doing it by adding it to the validateForm function (Please see commented code for my example). It wasn't working tho.
function printError(elemId, message) {
document.getElementById(elemId).innerHTML = message;
}
function validateForm() {
event.preventDefault();
var name = document.regForm.FullName.value;
var email = document.regForm.email.value;
var phone = document.regForm.phone.value;
var password = document.regForm.Password.value;
var confirmPassword = document.regForm.ConfirmPassword.value;
const phoneno = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
var nameError = emailError = phoneError = passwordError = true;
//Empty name input error message
if (name == "") {
printError("nameError", "Please enter your name")
}
//Empty email input error message
if (email == "") {
printError("emailError", "Please enter a valid email")
}
//Empty phone input error message
if (phone == "") {
printError("phoneError", "Please enter your phone numnber")
}
//Non valid phone number error messsage
if (phone.match(phoneno)) {
return true;
} else {
printError("phoneError", "Please enter a valid phone number")
}
//Empty Password input
if (password == "") {
printError("passwordError", "Please enter a password")
}
//Empty Cofirm Password input
if (confirmPassword == "") {
printError("confirmpassError", "Please confirm your password")
}
//I tried refactoring the passConfirm function and additing it here.
//if (password.match(confirmPassword)) {
// printPass("matchingPassword", "Passwords match")
// document.getElementById("matchingPassword").style.color = "green";
//} else {
// printPass("matchingPassword", "Passwords do no match")
// document.getElementById("matchingPassword").style.color = "red";
//}
};
var passConfirm = function() {
if (document.getElementById("Password").value == document.getElementById("ConfirmPassword").value) {
document.getElementById("matchingPassword").style.color = "green";
document.getElementById("matchingPassword").style.fontWeight = "Heavy";
document.getElementById("matchingPassword").innerHTML = "Passwords match!"
} else {
document.getElementById("matchingPassword").style.color = "red";
document.getElementById("matchingPassword").style.fontWeight = "Heavy";
document.getElementById("matchingPassword").innerHTML = "Passwords do NOT match!"
}
}
fieldset {
width: 420px;
height: 950px;
}
<h1>Hello, please register!</h1>
<div class="container">
<form name="regForm" class="form" onsubmit="return validateForm(event)">
<fieldset>
<div class="row">
<label>Full Name</label></br>
<input name="FullName" type="text" placeholder="John Doe" id="FullName" />
<span class="error" id="nameError"></span>
</div>
<div class="row">
<label>Email</label></br>
<input name="email" type="email" placeholder="johndoe#email.com" id="Email" />
<span class="error" id="emailError"></span>
</div>
<div class="row">
<label>Phone Number</label></br>
<input name="phone" type="tel" placeholder="(123) 456-7890" id="PhoneNumber" />
<span class="error" id="phoneError"></span>
</div>
<div class="row">
<label>Password</label></br>
<input name="Password" id="Password" type="Password" placeholder="Password" onchange='passConfirm();' />
<span class="error" id="passwordError"></span>
</div>
<div class="row">
<label>Confirm Password</label></br>
<input name="ConfirmPassword" id="ConfirmPassword" type="Password" placeholder="Confirm Password" onchange='passConfirm();' />
<span class="error" id="confirmpassError"></span>
</div>
<span id="matchingPassword">
<button type="submit" value="submit">Sign Me Up!</button>
</fieldset>
</form>
</div>
Your button disappears because you use InnerHTML method to display the message, which overrides it. Though your logic works after passwords match when you press enter, you lose your button element. It is better to use a separate div or paragraph tag to display your message and keep your button as it is since it's part of the form.
Here is the change you can try
<span id="matchingPassword">
<button type="submit" value="submit">Sign Me Up!</button></span>
<p id="message"></p>
</fieldset>
var passConfirm = function() {
if (document.getElementById("Password").value == document.getElementById("ConfirmPassword").value) {
document.getElementById("message").style.color = "green";
document.getElementById("message").style.fontWeight = "Heavy";
document.getElementById("message").innerHTML = "Passwords match!"
} else {
document.getElementById("message").style.color = "red";
document.getElementById("message").style.fontWeight = "Heavy";
document.getElementById("message").innerHTML = "Passwords match!"
}
}
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';
So I currently have a download link and an input field for an email address on my website.
In order to download the file you first need to put in your email.
I use a form to do this, with the email field being an input field and the download button being a submit button.
I like HTML5's form validation (the required fields, field types etc, it all looks very nice).
The problem is that if I use onClick in my submit button then none of the nice form validation works.
<form>
<input type="email" id="email" placeholder="Please enter email" required>
<input type="submit" class="btn" onclick="downloadWin()" value="Windows">
<input type="submit" class="btn" onclick="downloadOsx()" value="Osx">
</form>
<script>
function downloadWin(){
event.preventDefault();
var email = $("#email").val();
if(email != ''){
if(validateEmail(email)){
location.href='http://s/index.php?page=downloadWin&email='+email;
}
}
}
function downloadOsx(){
event.preventDefault();
var email = $("#email").val();
if(email != ''){
if(validateEmail(email)){
location.href='http://s/index.php?page=downloadOsx&email='+email;
}
}
}
</script>
This might not be the cleanest way to do it, so please if you think you know a better way tell me :)
Try this:
<form onsubmit="download(this.email.value,this.system.value)" id="form">
<input type="email" id="email" name="email" placeholder="Please enter email" required>
<input type="radio" name="system" value="Win" required >Windows
<input type="radio" name="system" value="Osx" >Osx
<input type="submit" class="btn" value="Download">
</form>
<script type="text/javascript">
document.getElementById("form").addEventListener("submit", function(event){
event.preventDefault();
});
function download(email_value,sys_value){
location.href='http://s/index.php?page=download'+sys_value+'&email='+email_value;
}
</script>
Result:
try this code
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\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,}))$/;
return re.test(email);
}
function downloadWin() {
var email = $("#email").val();
if (email != '') {
if (validateEmail(email)) {
location.href = 'http://s/index.php?page=downloadWin&email=' + email;
}
}
return false;
}
function downloadOsx() {
var email = $("#email").val();
if (email != '') {
if (validateEmail(email)) {
location.href = 'http://s/index.php?page=downloadOsx&email=' + email;
}
}
return false;
}
Below is the working code snippet (without using HTML5 validation). You can run and test it. I have used the jquery with jquery.validate plugin. You can uncomment the commented code to redirect user to the target url. Let us know if this what you are looking for or not. Feel free to comment if there is anything that you feel confusing.
$(document).ready(function(){
$(".btn-download").on("click", function(e) {
e.preventDefault();
e.stopImmediatePropagation();
if ($("#validateForm").valid()) {
var name = $(this).val();
var email = $("#email").val();
if (name === "Windows") {
//location.href = 'http://s/index.php?page=downloadWin&email=' + email;
console.log('http://s/index.php?page=downloadWin&email=' + email);
}
if (name === "Osx") {
console.log('http://s/index.php?page=downloadOsx&email=' + email);
//location.href = 'http://s/index.php?page=downloadOsx&email=' + email;
}
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
<form method="post" action="" id="validateForm" novalidate>
<input type="email" id="email" placeholder="Please enter email" required>
<input type="submit" name="btnSubmit" class="btn btn-download" value="Windows">
<input type="submit" name="btnSubmit" class="btn btn-download" value="Osx">
</form>
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;
}
};