In: Computer Science
The assignment for this week builds on what we covered in Chapter 3 using functions, as well as introduces Conditional Statements. I have created your HTML file for you, along with some starter JavaScript to get you started. The HTML contains 3 text boxes and a button, and you'll recognize it as a simple registration form. Typically when you complete a form online, the data is sent to a server to be processed. If we are must send data across the Internet, it makes sense to make sure its the proper data before sending it. This helps to minimize traffic that doesn't match what we expect to get in our submission, and JavaScript is perfect for performing this validation.
For this assignment you will need to create 2 functions. One function should check that the email isn't empty, and the other should make sure that the password and confirm password match, as well as are not empty. You will be using If, Else, and Else If to accomplish this. Since we haven't covered manipulating the document in depth with JavaScript, I have already created variables and assigned the values from the text boxes to them. To further extend our understanding of functions, these functions will require arguments to be included so that you can pass the values of the text fields into the functions, as well as return a value.
Notice that there is a variable called outputMessage. Anything that you assign to this variable will be output to the screen. For the return value of your functions, I leave that to your artistic creativity. You may choose to return true/false boolean values and then do another if/else statement to assign the appropriate text to the output message, or you may choose to return the string you wish to display directly.
Hint 1: To verify that your variables are not blank, you can either check that the value isn't an empty string, or that the length is greater than 0. See examples below:
if(myVar.length > 0)
if(myVar != "")
Hint 2: If you choose to return a boolean value you have a couple different options for the comparison. You may choose to use if/else to check the value ,or instead of using if/else you can also use the switch statement. Further, if you choose If/Else you can shorthand the statement for a function that returns a boolean. If/Else statements evaluate to either true or false. See the examples below for further explanation:
var myText = 'this is my text';
if(myText.length > 0){
//do something
}
In the above statement, the length of myText is obviously greater than 0, so the statement evaluates as true, otherwise it would be false. Since we know we only need an expression in our if statement that evaluates to true or false, we can shorthand any function that returns a true or false value.
Assuming my function is called myFunction and returns a true or false value the 2 statements below are identical:
if(myFunction() == true) or if(myFunction())
Since myFunction will return a true or false value, then we can leave off the == true or ==false. We are essentially saying if(true) or if(false).
If we want to check for a false return value instead of true, then we can use the ! (not) operator. It would look like this:
if(myFunction() == false) or if(!myFunction())
If you choose to use a switch statement, it would look something like this:
switch(myFunction()){
case true:
//do something
break;
case false:
//do something else
break;
}
<!DOCTYPE html>
<html>
<head>
<title>Week 4 Programming Assignment</title>
</head>
<body>
<p>Registration Form</p>
<label for="txtEmail">Email Address:</label>
<br/>
<input type="text" id="txtEmail" placeholder="Email
Address">
<br/>
<br/>
<label for="txtPassword">Password:</label>
<br/>
<input type="text" id="txtPassword"
placeholder="Password">
<br/>
<br/>
<label for="txtConfirmPassword">Confirm
Password:</label>
<br/>
<input type="text" id="txtConfirmPassword" placeholder="Confirm
Password">
<br/>
<br/>
<button id="btnRegister">Register</button>
<br/>
<br/>
<br/>
<div id="outputMessage">
</div>
<script>
function validateInput(){
var email = document.getElementById('txtEmail').value;
var password = document.getElementById('txtPassword').value;
var confirm =
document.getElementById('txtConfirmPassword').value;
var outputMessage = '';
//Your function calls should go here.
var outputElement =
document.getElementById('outputMessage');
outputElement.innerHTML = outputMessage;
}
//Validate Email Address is not Empty Function
//Validate Password and Confirm Password are not empty, and match each other
/*************************************************************************
* The Function Below is to assign event handlers to the
* button on the page. You will not need to make any changes
* to this function
*
*********************************************************************/
function init() {
var btnRegister = document.getElementById('btnRegister');
btnRegister.onclick = validateInput;
}
window.onload = init;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Week 4 Programming Assignment</title>
</head>
<body>
<p>Registration Form</p>
<label for="txtEmail">Email Address:</label>
<br/>
<input type="text" id="txtEmail" placeholder="Email
Address">
<br/>
<br/>
<label for="txtPassword">Password:</label>
<br/>
<input type="text" id="txtPassword"
placeholder="Password">
<br/>
<br/>
<label for="txtConfirmPassword">Confirm
Password:</label>
<br/>
<input type="text" id="txtConfirmPassword" placeholder="Confirm
Password">
<br/>
<br/>
<button id="btnRegister">Register</button>
<br/>
<br/>
<br/>
<div id="outputMessage">
</div>
<script>
function validateInput(){
var email = document.getElementById('txtEmail').value;
var password = document.getElementById('txtPassword').value;
var confirm =
document.getElementById('txtConfirmPassword').value;
var outputMessage = '';
//Your function calls should go here.
if(emailValidation(email)==true){
if(passValidation(password,confirm)==true){
outputMessage = "Successfully
Registered"
}
else{
outputMessage = "Password and
Confirm Password does not match"
}
}
else{
outputMessage = "Invalid Email"
}
var outputElement =
document.getElementById('outputMessage');
outputElement.innerHTML = outputMessage;
}
//Validate Email Address is not Empty Function
function emailValidation(s){
if(s!="")
return true
return false
}
function passValidation(x,y){
if(x=="" || y=="")
return false
if(x==y)
return true
return false
}
//Validate Password and Confirm Password are not empty, and match each other
/*************************************************************************
* The Function Below is to assign event handlers to the
* button on the page. You will not need to make any changes
* to this function
*
*********************************************************************/
function init() {
var btnRegister = document.getElementById('btnRegister');
btnRegister.onclick = validateInput;
}
window.onload = init;
</script>
</body>
</html>