I having been working on this Javascript program that will compare passwords. Th
ID: 3798232 • Letter: I
Question
I having been working on this Javascript program that will compare passwords. There are a total of 4 input text boxes on the html page. One for first name, one for last name, as well as one each for a password and confirm password. You will need to use If/Else statements to check to make sure the user has input text into all 4 boxes, as well as that the passwords match.There is a paragraph (<p>) tag with the ID of outputMessage. You should display an informational message here depending on whether the validation was successfull or not, and if not, what the user should address, i.e. passwords don't match or a name field hasn't been completed. However, this will not give me any response when I enter the passwords, wrong or right. I don't know where to put the <p> paragraph or what to put in the paragraph. Thank you
function validateForm(){
var pass1 = document.getElementById("pass1");
var pass2 = document.getElementById("pass2");
//Validate
if (pass1 != pass2 ){
alert ("Passwords do not match")
return false;
}
else{
alert ("Passwords match")
return true;
}
// End of validation
}
//This is the event handler for the button.
function init() {
//Assign the HTML element to a JavaScript variable called btnCombineName
var btnValidate = document.getElementById('btnValidate');
//Set the CombineName function above to the onclick event of the button Variable
btnValidate.onclick = ValidateForm;
}
//Run the INIT function when the page finishes loading.
window.onload = init;
Explanation / Answer
Since we are validating paswords on click event we can directly use onClick event inside the html tag. A sample html code is provided for testing.
Javascript solution is given below:
function validateForm(){
var pass1 = document.getElementById("pass1");
var pass2 = document.getElementById("pass2");
var firstName = document.getElementById("firstName");
var lastName = document.getElementById("lastName");
var outputMess = document.getElementById("outputMessage");
//Validate
console.log(pass1.value, pass2.value, "sd"); // test for printing value of input text boxes.
if(firstName.value === ''||firstName.value === null || firstName.value === undefined || lastName.value === '' || lastName.value === null || lastName.value === undefined){
outputMess.innerHTML = "FirstName or Lastname should not be empty" ;
}
else if(pass1.value === '' || pass1.value === null || pass1.value === undefined || pass2.value === '' || pass2.value === null || pass2.value === undefined){
outputMess.innerHTML = "Passwords shouldn't be empty" ;
}
else if (pass1.value !== pass2.value ){ //we need to check input text box value and hence use pass1.value or pass2.value.
//alert ("Passwords do not match")
outputMess.innerHTML = "Passwords do not match" ; //set innerhtml of 'p' tag with the message
return false;
}
else{
//alert ("Passwords match")
outputMess.innerHTML = "Passwords match" ;
return true;
}
// End of validation
}
Sample html file for testing is given below:
<html>
<head>
<script type="text/javascript" src="simpleJavascript.js"></script>
</head>
<body>
FirstName:<br>
<input type="text" name="firstName" id ="firstName">
<br>
LastName:<br>
<input type="text" name="lastName" id = "lastName">
<br><br>
Password:<br>
<input type="text" id="pass1" name="password">
<br>
Current Password:<br>
<input type="text" id="pass2" name="currentPass">
<br><br>
<input type="button" id="btnValidate" value="Submit">
<p id="outputMessage"> </p>
</body>
</html>