Hi friends, I create a registration poage and add javascript codes to it (in a function and seperate file). After typing all the neccesary codes, I tried it and found out its not working no matter how much I tried. And this are the codes below.
This is the register.html page.
<!doctype html>
<html lang = "eng">
<head>
<title>Registration page</title>
<meta name="" content="">
</head>
<body>
<form action = "#" method="get" id="theForm">
<fieldset><legend>Registration page</legend><p>Please provide all the neccessary information</p>
<div class="one"><label for="firstname">FirstName<span class="tooltip">Provide your first name</span></label><input type = "text" name="first_name" id="firstName" value="" placeholder="Firstname here"/></div>
<div class="one"><label for="lastname">LastName</label><input type = "text" name = "last_name" id="lastName" value = "" placeholder="Lastname here"/></div>
<div class="one"><label for="username">Username</label><input type = "text" name = "username" id="username" value="" placeholder="Username here"/></div>
<div class="one"><label for = "password">Password</label><input type = "password" name = "password" id="password" value="" placeholder="Your password"/></div>
<div class="one"><label for = "state">State</label><select name = "Choose a state " id="state">
<option value="og">Ogun</option>
<option value = "la">Lagos</option>
<option value = "os">Osun</option>
<option value="ek">Ekiti</option>
<option value ="on">Ondo</option>
<option value="oy">Oyo</option>
</select></div>
<div class = "two"><label>Hobbies</label> <input type="checkbox" name="toggle" id="toggle" value="toggle"> All/None
<p><input type="checkbox" name = "hobbies[]" id = "football" value="football"/>Football
<input type="checkbox" name = "hobbies[]" id = "basketball" value="basketball"/>Basketball
<input type="checkbox" name = "hobbies[]" id = "tennis" value="tennis"/>Tennis
<input type="checkbox" name = "hobbies[]" id = "atletics" value="atletics"/>Atletics</p></div>
<div class = "one"><input type = "submit" name="submit" value="Register" id="submit"/></div>
</fieldset>
</form>
<script src="js/utilities.js"></script>
<script src="js/errormessages.js"></script>
<script src="js/registration.js"></script>
</body>
</html>
While the next page is called UTILITIES.JS(written in OOP).
var U = {
$: function(id){
'use strict';
if(typeof id == 'string'){
return document.getElementById(id);
}
},
setText: function(id, message){
'use strict';
if((typeof id == 'string') && (typeof message == 'string')){
var output = this.$(id);
if !(output) return false;
if(output.textContent !=='undefined'){
output.textContent = message;
}else{
output.innerText = message;
}
return true;
}
},
addEvent: function(obj, type, fn){
'use strict';
if(obj && obj.addEventListener){
obj.addEventListener(type, fn, false);
}else if(obj && obj.attachEvent){
obj.attachEvent('on'+type, fn);
}
},
removeEvent: function(obj, type, fn){
'use strict';
if(obj && obj.removeEventlistener){
obj.removeEventlistener(type, fn, false);
}else if(0bj && obj.detachEvent){
obj.detachEvent('on'+type, fn);
}
},
enableTooltips: function(id){
'use strict';
var elem = this.$(id);
this.addEvent(elem, 'focus', this.showTooltips);
this.addEvent(elem, 'mouseover', this.showTooltips);
this.addEvent(elem, 'blur', this.hideTooltips);
this.addEvent(elem, 'mouseout', this.hideTooltips);
},
showTooltip: function(e){
'use strict';
if(typeof e == 'undefined') var e = window.event;
var target = e.target || e.srcElement;
target.previousSibling.lastChild.style.visibility = 'visible';
},
hideTooltip: function(e){
'use strict';
if(typeof e == 'undefined') var e = window.event;
var target = e.target || e.srcElement;
target.previousSibling.lastChild.style.visibility = 'hidden';
}
//toggle checkboxex function
function toggleCheckBoxes(){
'use strict';
// Get the master checkbox's value:
var status = this.$('toggle').checked;
// Get all the checkboxes:
var boxes = document.querySelectorAll('input[type="checkbox"]');
// Loop through the checkboxes, starting with the second:
for (var i = 1, count = boxes.length; i < count; i++) {
// Update the checked property:
boxes[i].checked = status;
} // End of FOR loop.
}
};
The next page is called ERRORMESSAGES.JS.
function addErrorMessage(id, msg){
'use strict';
var elem = document.getElementById(id);
var newId = id + 'Error';
//check for the existence of the span.
var span = document.getElementById(newId);
if(span){
span.firstChild.value = msg;
}else{//create new
//create the span
span = document.createElement('span');
span.id = newId;
span.className = 'error'
span.appendChild(document.createTextNode(msg));
//add the span to tbe parent
elem.parentNode.appendChild(span);
elem.previousSibling.className = 'error';
}//end of if statement
}//end of addErrormessage
function removeErrorMessage(id){
'use strict';
var span = document.getElementById(id + 'Error');
if(span){
span.previousSibling.previousSibling.className = null;
span.parentNode.removeChild(span);
}//end of if
}//end of removeErrormessage
The last page is called REGISTRATION.JS
function validateForm(e){
'use strict'
//get the event Object
if(typeof e == 'undefined') e = window.event;
//get form references
var firstName = U.$('firstName');
var lastName = U.$('lastName');
var username = U.$('username');
var password = U.$('password');
var state = U.$('state');
var hobbies = U.$('toggle').checked;
/*var boxes = document.querySelectorAll('input[type="checkcox"]');
for(vari =1, count = boxes.length; i <count; i++){
boxes[i].checked = status;
}*/
var error = false;
if (/^[A-Z \.\-']{2,20}$/i.test(firstName.value)){
removeErrorMessage('firstName');
}else{
addErrorMessage('firstName', 'Please enter your first name.');
error = true;
}//end of firstName statement
if (/^[A-Z \.\-']{2,20}$/i.test(lastName.value)){
removeErrorMessage('lastName');
}else{
addErrorMessage('lastName', 'Please enter your last name.');
error = true;
}//end of lastname statement
if (/^[A-Z \.\-']{2,20}$/i.test(userame.value)){
removeErrorMessage('username');
}else{
addErrorMessage('username', 'Please enter your username.');
error = true;
}//end of username statemet
if (/^[A-Z \.\-']{2,20}$/i.test(password.value)){
removeErrorMessage('password');
}else{
addErrorMessage('password', 'Please enter your password.');
error = true;
}//end of password statement
if(state.selectedIndex !=0){
removeErrorMessage('state');
}else{
addErrormessage('state', 'you must choose a south-west state you live');
error = true;
}//end of state choose statement
//if an error occured, prevent the default browser from performing
if(error){
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false''
}//end of prevent default
return false;
}//end of if error
}//end of validateForm
window.onload = function(){
'use strict';
U.addEvent(U.$('theForm'), 'submit', validateForm);
//disable the submit button to start
U.$('submit').disabled = true;
//Enable toolTip on firstName
U.enableTooltips('firstName');
//get the check boxex working
U.$('toggle').onchange = toggleCheckboxes;
};
I would be happy if you couldc help me out with it fellow programmers