My if statement isn't working 100%; I basically want it to be checking the length and if its digits, but if its left blank then the green text and style for errtelno1 - can you help me understand why? I'm new at this...its an 11 digit number
if (document.getElementById("telno").value.length != 11 ) {
document.getElementById("errtelno").style.display = "inline";
document.getElementById("errtelno").style.visibility = "visible";
document.getElementById("telno").style.border ='4px solid red';
document.getElementById("errtelno").style.color = "green";
document.getElementById("errtelno").style.fontWeight = "light";
document.getElementById("errtelno").style.fontSize = "12px";
isValid = false;
} else
{ document.getElementById("telno").style.border ='2px solid green';
document.getElementById("errtelno").style.color = "green";
}
if (document.getElementById("telno").value != /^\d+$/ ) {
document.getElementById("errtelno1").style.display = "inline";
document.getElementById("errtelno1").style.visibility = "visible";
document.getElementById("telno").style.border ='4px solid red';
isValid = false;
} else
{ document.getElementById("telno").style.border ='2px solid green';
}
return isValid;
}
A little sample to shorten the problem. Only a sample...
var telno = document.getElementById("telno");
var errtelno = document.getElementById("errtelno");
var expr = /^\d+$/;
var isValid = (telno.value.length == 11 && expr.test(telno.value));
if(!isValid) {
errtelno.style.display = "inline";
errtelno.style.visibility = "visible";
telno.style.border ='4px solid red';
errtelno.style.color = "green";
errtelno.style.fontWeight = "light";
errtelno.style.fontSize = "12px";
}
else {
telno.style.border ='2px solid green';
errtelno.style.color = "green";
}
return isValid;
The empty field can be left blank, this error is changed in the variable expr, where the expression for only a numerical format, as adds in length of varible to 11 in the curly brackets
// function to be called
function checkTel(){
// setting the variables
var telno = document.getElementById("telno");
var errtelno = document.getElementById("errtelno");
var expr = /^\d+${11}/;
var isValid = (telno.value.length == 11 && expr.test(telno.value));
// changes box to highlighted red and error messages appear
if(!isValid) {
document.getElementById("errtelno").style.display = "inline";
document.getElementById("errtelno").style.visibility = "visible";
document.getElementById("telno").style.border ='1px solid green';
document.getElementById("errtelno").style.color = "green";
document.getElementById("errtelno").style.fontWeight = "light";
document.getElementById("errtelno").style.fontSize = "12px";
}
// if it is blank or correct input then box turns green
else {
document.getElementById("telno").style.border ='2px solid green';
document.getElementById("errtelno").style.color = "green";
}
return isValid;
}
Related
I'm trying to make a tag checker for a game where you can find allies and enemies but when I add else at the end is shows everyone as the enemy. I have the enemy list but it's too big to write them all...
How can I get this work properly?
if (document.getElementById("tagcheck").value == "WCT") {
//document.getElementById("tagcheck").style.backgroundColor = "green";
document.getElementById("checker").value = "FRIEND";
document.getElementById("checker").style.backgroundColor = "green";
}
if (document.getElementById("tagcheck").value == "WeUSA") {
//document.getElementById("tagcheck").style.backgroundColor = "green";
document.getElementById("checker").value = "FRIEND";
document.getElementById("checker").style.backgroundColor = "green";
}
if (document.getElementById("tagcheck").value == "x114x") {
//document.getElementById("tagcheck").style.backgroundColor = "green";
document.getElementById("checker").value = "FRIEND";
document.getElementById("checker").style.backgroundColor = "green";
}
if (document.getElementById("tagcheck").value == "YPJ") {
//document.getElementById("tagcheck").style.backgroundColor = "green";
document.getElementById("checker").value = "FRIEND";
document.getElementById("checker").style.backgroundColor = "green";
}
// Enemy tags
else if (document.getElementById("tagcheck").value.length == 0 ) {
document.getElementById("checker").value = "ERROR";
document.getElementById("checker").style.backgroundColor = "yellow";
}
else {
document.getElementById("checker").value = "ENEMY";
document.getElementById("checker").style.backgroundColor = "red";
}
return false;
};
Your else if come from nowhere...
I suppose you are looking for that ?
const tagCheck = document.getElementById('tagcheck')
, eChecker = document.getElementById('checker')
, friendsTags = [ 'WCT', 'WeUSA', 'x114x', 'YPJ' ]
;
function XYZ ()
{
if (friendsTags.includes( tagCheck.value ))
{
//tagCheck.style.backgroundColor = 'green';
eChecker.value = 'FRIEND';
eChecker.style.backgroundColor = 'green';
}
else if (tagCheck.value.length == 0 )
{
eChecker.value = "ERROR";
eChecker.style.backgroundColor = "yellow";
}
else
{
eChecker.value = "ENEMY";
eChecker.style.backgroundColor = "red";
}
return false;
}
in my innerhtml, i have pass and fail and i want to add css properties for these.
function display()
{
var a=document.getElementById("myList");
var dropdownvalue = a.options [a.selectedIndex].text;
var b=document.getElementById("myText").value;
if(dropdownvalue == b.substring(0,4)) {
document.getElementById("result").innerHTML = "Pass";
} else {
document.getElementById("result").innerHTML = "Fail";
}
}
you can use .style
if(dropdownvalue == b.substring(0,4)) {
document.getElementById("result").innerHTML = "Pass";
document.getElementById("result").style.color = "green";
}
else {
document.getElementById("result").innerHTML= "Fail";
document.getElementById("result").style.color = "red";
}
Comment for any questions :)
I have a problem with my code and I would appreciate if you help me. The problem is - when you fill in all inputs in the form correctly, the script removes attribute "disabled" from the submit button but for example if you clear all fields after filling in the forms, submit button will be able to submit the form, but it have to back attribute "disable". how can I fix it?
//validation name
document.callbackform.name.onkeyup = function() {
var name = document.callbackform.name.value;
if (name === "") {
document.callbackform.name.removeAttribute("class", "ready");
document.getElementById("callError").style.display = "block";
document.getElementById("calllErrorTwo").style.display = "none";
} else {
document.getElementById("callError").style.display = "none";
var pattern = new RegExp("^[а-я]+$", "i");
var isValid = this.value.search(pattern) >= 0;
if (!(isValid)) {
document.getElementById("calllErrorTwo").style.display = "block";
document.callbackform.name.removeAttribute("class", "ready");
} else {
document.getElementById("calllErrorTwo").style.display = "none";
document.callbackform.name.setAttribute("class", "ready");
}
}
};
//validation phone
document.callbackform.phone.onkeyup = function() {
var name = document.callbackform.phone.value;
if (name === "") {
document.callbackform.phone.removeAttribute("class", "ready");
document.getElementById("calltelError").style.display = "block";
document.getElementById("calltelErrorTwo").style.display = "none";
} else {
document.getElementById("calltelError").style.display = "none";
var pattern = new RegExp("[- +()0-9]+");
var isValid = this.value.search(pattern) >= 0;
if (!(isValid)) {
document.getElementById("calltelErrorTwo").style.display = "block";
} else {
document.getElementById("calltelErrorTwo").style.display = "none";
document.callbackform.phone.setAttribute("class", "ready");
}
}
};
//filling the form
document.callbackform.onkeyup = function() {
var a = document.callbackform.name.getAttribute("class");
var c = document.callbackform.phone.getAttribute("class");
if (a === "ready" && c === "ready") {
document.getElementById("subCallback").removeAttribute("disabled");
document.getElementById("subCallback").style.cursor = "pointer";
} else {
document.getElementById("subCallback").setAttribute("disabled");
document.getElementById("subCallback").style.cursor = "not-allowed";
}
};
Simple fix. .setAttribute("disabled"); doesn't work as disabled is a property, not an attribute, as it does not have a value. You simply need to use .disabled = true; as shown:
document.getElementById("subCallback").disabled = true;
It will also be good to use the following to remove the disabled property:
document.getElementById("subCallback").disabled = false;
.
Remember, setAttribute() always requires two arguments, the second argument being the attribute value.
JavaScript rookie here, trying to understand why the first validation in the following code is not working. I am getting that Date.style is undefined but this is just a copy from the code I am using on the other fields and is working fine in all of them except for validationDate(ymd).
function validateDate(ymd) {
var ymd = document.getElementById('Date').value;
var legalEntry = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
if (ymd.length == 0) {
Date.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The date can\'t be empty";
return false;
} else if (!legalEntry.test(ymd)) {
Date.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The date must be in format YYYY-MM-DD";
return false;
} else {
Date.style.background = 'White';
document.getElementById('error').innerHTML = "";
return true;
}
}
<tr><td>Date (YYYY-MM-DD)*</td>
<td><input type="text" onblur="validateDate()" name="Date" id="Date" size="10" maxlength="10"/></td>
Thanks
As requested here is the full code which is working for the other fields:
function validateForm() {
return (validateRunnerId
&& validateEventId
&& validateDate
&& validateTime
&& validatePosition
&& validateCategoryId
&& validateAge
&& validatePB);
}
function validateRunnerId(ID) {
var ID = document.getElementById('RunnerId').value;
var legalEntry = /^\d{1,5}?$/;
if (ID.length == 0) {
RunnerId.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The RunnerId can\'t be empty";
return false;
}
else if (!legalEntry.test(ID)) {
RunnerId.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The RunnerId must be a number from 1 to 99999";
return false;
}
else {
RunnerId.style.background = 'White';
document.getElementById('error').innerHTML = "";
return true;
}
}
function validateEventId(ID) {
var ID = document.getElementById('EventId').value;
var legalEntry = /^\d{1,5}?$/;
if (ID.length == 0) {
EventId.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The EventId can\'t be empty";
return false;
}
else if (!legalEntry.test(ID)) {
EventId.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The EventId must be a number from 1 to 99999";
return false;
}
else {
EventId.style.background = 'White';
document.getElementById('error').innerHTML = "";
return true;
}
}
function validateDate(date) {
var date = document.getElementById('Date').value;
var legalEntry = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
if (date.length == 0) {
Date.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The date can\'t be empty";
return false;
}
else if (!legalEntry.test(date)) {
Date.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The date must be in format YYYY-MM-DD";
return false;
}
else {
Date.style.background = 'White';
document.getElementById('error').innerHTML = "";
return true;
}
}
function validateTime(time) {
var time = document.getElementById('Time').value;
var legalEntry = /^(?:(?:([01]?\d|2[0-3]):)?([0-5]?\d):)?([0-5]?\d)$;/
if (time.length == 0) {
Time.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The finish time can\'t be empty";
return false;
}
else if (!legalEntry.test(time)) {
Time.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The finish time must be in format HH:MM:SS";
return false;
}
else {
Time.style.background = 'White';
document.getElementById('error').innerHTML = "";
return true;
}
}
function validatePosition(position) {
var position = document.getElementById('Position').value;
var legalEntry = /^\d{1,5}?$/
if (position.length == 0) {
Position.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The position can\'t be empty";
return false;
}
else if (!legalEntry.test(position)) {
Position.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The position must be a number from 1 to 99999";
return false;
}
else {
Position.style.background = 'White';
document.getElementById('error').innerHTML = "";
return true;
}
}
function validateCategoryId(ID) {
var ID = document.getElementById('CategoryId').value;
var legalEntry = /^\d\d?[0]?$/;
if (ID.length == 0) {
CategoryId.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The CategoryId can\'t be empty";
return false;
}
else if (!legalEntry.test(ID)) {
CategoryId.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The CategoryId must be a number from 1 to 100";
return false;
}
else {
RunnerId.style.background = 'White';
document.getElementById('error').innerHTML = "";
return true;
}
}
function validateAge(age) {
var age = document.getElementById('Age').value;
var legalEntry = /^\d\d?\,?\d?\d?$/;
if (age.length == 0) {
Age.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The age grade can\'t be empty";
return false;
}
else if (!legalEntry.test(age)) {
Age.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The age grade must be decimal number of maximum 2 integers and 2 decimals";
return false;
}
else {
Age.style.background = 'White';
document.getElementById('error').innerHTML = "";
return true;
}
}
function validatePB(pb) {
var pb = document.getElementById('PB').value;
var legalEntry = /^(0|1)$/;
if (pb.length == 0) {
pb.value = "0";
}
else if (!legalEntry.test(pb)) {
PB.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The PB can only be 0 for false and 1 for true";
return false;
}
else {
PB.style.background = 'White';
document.getElementById('error').innerHTML = "";
return true;
}
}
Your code is depending on an old non-standard mechanism in browsers where element IDs get mapped to variables. For example:
<div id="foo"></div>
<script>
foo.innerHTML = 'Hi!';
</script>
The problem you're facing is that the internal logic looks kind of like this:
<div id="foo">
<script INTERNAL>
if (window.foo == undefined) {
window.foo = document.getElementById('foo');
}
</script>
</div>
<script>
foo.innerHTML = 'Hi!';
</script>
The variable is only getting assigned when it doesn't already exist. Your Date variable is never getting written because window.Date is an existing function.
You can see this in action at this fiddle: http://jsfiddle.net/8fjkc/2/ If I have the elements, one named Date, one with the same name as a user-defined variable, and one with an unused name, only the one with an unused name gets mapped to a variable.
The simplest solution is to rename your "Date" element to something else like "DateField", but you've seen that this is very brittle. Your best solution is to define a variable using document.getElementById. You could even define it as Date inside a function scope without breaking anything external:
function validateDate(date) {
var Date = document.getElementById('Date');
...
}
var foobar = new Date(); // <-- still works.
I am receiving an error message of "Uncaught TypeError: Cannot read property 'style' of null" when JavaScript tries to read:
getProper.style.border = "1px solid black";
(listed in my validate function and designated by ---> <--- )
I'm not sure why the error is happening. It's certainly not a spelling issue, so can anybody help me determine what it is and how to fix it? I have posted my entire code if that helps.
window.addEventListener("DOMContentLoaded", function () {
function $(x) {
var theElement = document.getElementById(x);
return theElement;
}
function makeTimes(){
var formTag = document.getElementsByTagName("form"),
selectLi = $('select'),
makeSelect = document.createElement('select');
makeSelect.setAttribute("id", "times");
for (var i=0, j=contactTimes.length; i<j; i++){
var makeOption = document.createElement('option');
var optText = contactTimes[i];
makeOption.setAttribute("value", optText);
makeOption.innerHTML = optText;
makeSelect.appendChild(makeOption);
}
selectLi.appendChild(makeSelect);
}
function getCheckboxValue(){
var checkboxes = document.forms[0].appointmentType;
checkedValues = [];
for (var i=0, j=checkboxes.length; i<j; i++){
if (checkboxes[i].checked) {
var checkedValue = checkboxes[i].value;
checkedValues.push(checkedValue);
}
}
}
function getSelectedRadio(){
var radios = document.forms[0].proper;
for (var i=0; i<radios.length; i++){
if(radios[i].checked) {
properValue = radios[i].value;
}
}
}
function setMessage(pclass, text){
var newNode = document.createElement("p");
newNode.setAttribute("class", pclass);
newNode.appendChild(document.createTextNode(text));
var messageDiv = document.getElementById('message');
messageDiv.appendChild(newNode);
}
function toggleControls(n){
switch(n){
case "on":
$('appointmentForm').style.display = "none";
$('clearData').style.display = "inline";
$('displayData').style.display = "none";
$('addNew').style.display = "inline";
break;
case "off":
$('appointmentForm').style.display = "block";
$('clearData').style.display = "inline";
$('displayData').style.display = "inline";
$('addNew').style.display = "none";
$('items').style.display = "none";
break;
default:
return false;
}
}
function storeData(key){
if(!key){
var id = Math.floor(Math.random()*100000001);
}else{
id = key;
}
getCheckboxValue();
getSelectedRadio();
var item = {};
item.appointmentType = ["Appointment Type:", checkedValues];
item.fName = ["First Name:", $('fName').value];
item.lName = ["Last Name:", $('lName').value];
item.address1 = ["Address 1:", $('address1').value];
item.address2 = ["Address 2:", $('address2').value];
item.city = ["City:", $('city').value];
item.zipCode = ["Zip Code:", $('zipCode').value];
item.tele = ["Telephone:", $('tele').value];
item.email = ["Email:", $('email').value];
item.proper = ["Own/Rent:", properValue];
item.times = ["Time:", $('times').value];
item.yourDate = ["Scheduled For:", $('yourDate').value];
item.SRC = ["Special Requests:", $('src').value];
item.range = ["Urgency Level:", $('uOfA').value];
localStorage.setItem(id, JSON.stringify(item));
alert("message here.");
}
function getData(){
toggleControls("on");
if(localStorage.length === 0){
alert("message here.");
}
//This writes the data from the local storage to the browser.
var makeDiv = document.createElement('div');
makeDiv.setAttribute("id", "items");
var makeList = document.createElement('ul');
makeDiv.appendChild(makeList);
document.body.appendChild(makeDiv);
$('items').style.display = "block";
for (var i=0, len=localStorage.length; i<len; i++){
var makeli = document.createElement('li');
var linksLi = document.createElement('li');
makeList.appendChild(makeli);
var key = localStorage.key(i);
var value = localStorage.getItem(key);
var obj = JSON.parse(value);
var makeSubList = document.createElement('ul');
makeli.appendChild(makeSubList);
for(var n in obj){
var makeSubli = document.createElement('li');
makeSubList.appendChild(makeSubli);
var optSubText = obj[n][0]+" "+obj[n][1];
makeSubli.innerHTML = optSubText;
makeSubList.appendChild(linksLi);
}
makeItemLinks();
}
}
function makeItemLinks(key, linksLi){
var editLink = document.createElement('a');
editLink.href = "#";
editLink.key = key;
var editText = "Edit Appointment";
editLink.addEventListener("click", editItem);
editLink.innerHTML = editText;
linksLi.appendChild(breakTag);
var breakTag = document.createElement('br');
linksLi.appendChild(breakTag);
var deleteLink = document.createElement('a');
deleteLink.href = "#";
deleteLink.key = key;
var deleteText = "Delete Appointment";
//deleteLink.addEventListener("click", deleteItem);
deleteLink.innerHTML = deleteText;
linksLi.appendChild(deleteLink);
}
function editItem(){
var value = localStorage.getItem(this.key);
var item = JSON.parse(value);
toggleControls("off");
var checkboxes = document.forms[0].appointmentType;
for(var i=0; i<checkboxes.length; i++){
if(checkboxes[i].value == "getAFreeEstimate" && item.appointmentType[1] == "getAFreeEstimate"){
checkboxes[i].setAttribute("checked", "checked");
}else if(checkboxes[i].value == "lawnService" && item.appointmentType[1] == "lawnService"){
checkboxes[i].setAttribute("checked", "checked");
}else if(checkboxes[i].value == "sprinklerSystemService" && item.appointmentType[1] == "sprinklerSystemService"){
checkboxes[i].setAttribute("checked", "checked");
}else if(checkboxes[i].value == "flowerBedMaintenance" && item.appointmentType[1] == "flowerBedMaintenance"){
checkboxes[i].setAttribute("checked", "checked");
}else if(checkboxes[i].value == "hedgeTreeService" && item.appointmentType[1] == "hedgeTreeService"){
checkboxes[i].setAttribute("checked", "checked");
}else if(checkboxes[i].value == "handymanServices" && item.appointmentType[1] == "handymanServices"){
checkboxes[i].setAttribute("checked", "checked");
}else if(checkboxes[i].value == "other" && item.appointmentType[1] == "other"){
checkboxes[i].setAttribute("checked", "checked");
}
}
$('fName').value = item.fName[1];
$('lName').value = item.lName[1];
$('address1').value = item.address1[1];
$('address2').value = item.address2[1];
$('city').value = item.city[1];
$('zipCode').value = item.zipCode[1];
$('tele').value = item.tele[1];
$('email').value = item.email [1];
var radios = document.forms[0].proper;
for(var i=0, i<radios.length; i++){
if(radios[i].value == "Own" && item.proper[1] == "Own"){
radios[i].setAttribute("checked", "checked");
}else if(radios[i].value == "Rent" && item.proper[1] == "Rent"){
radios[i].setAttribute("checked", "checked");
}
$('times').value = item.times[1];
$('yourDate').value = item.yourDate[1];
$('SRC').value = item.SRC[1];
$('range').value = item.range[1];
saveData.removeEventListener("click", storeData);
$('submit').value = "Edit Appointment";
var editSubmit = $('submit');
editSubmit.addEventListener("click", validate);
editSubmit.key = this.key;
}
}
function deleteItem(){
var ask = confirm("message here.");
if(ask){
localStorage.removeItem(this.key);
alert("message here.");
window.location.reload();
}else{
alert("message here.");
}
}
function clearLocal(){
if(localStorage.length === 0){
alert("message here.");
}else{
localStorage.clear();
alert("message here.");
window.location.reload();
return false;
}
}
function validate(ed){
var getTimes = $('times');
var getFname = $('fName');
var getLname = $('lName');
var getAddress1 = $('address1');
var getCity = $('city');
var getZipCode = $('zipCode');
var getTele = $('tele');
var getEmail = $('email');
var getProper = $('proper');
var getYourDate = $('yourDate');
errMsg.innerHTML = "";
getTimes.style.border = "1px solid black";
getFname.style.border = "1px solid black";
getLname.style.border = "1px solid black";
getAddress1.style.border = "1px solid black";
getCity.style.border = "1px solid black";
getZipCode.style.border = "1px solid black";
getTele.style.border = "1px solid black";
getEmail.style.border = "1px solid black";
---> getProper.style.border = "1px solid black"; <---
getYourDate.style.border = "1px solid black";
var messageAry = [];
if(getTimes.value === "<-- select -->"){
var timesError = "message here.";
getTimes.style.border = "1px solid red";
messageAry.push(timesError);
}
if (getFname.value === ""){
var fNameError = "message here.";
getFname.style.border = "1px solid red";
messageAry.push(fNameError);
}
if (getLname.value === ""){
var lNameError = "message here.";
getLname.style.border = "1px solid red";
messageAry.push(lNameError);
}
if (getAddress1.value === ""){
var address1Error = "message here.";
getAddress1.style.border = "1px solid red";
messageAry.push(address1Error);
}
if (getCity.value === ""){
var cityError = "message here.";
getCity.style.border = "1px solid red";
messageAry.push(cityError);
}
var re = /^\d{5}$/;
if (!(re.exec(getZipCode))){
var zipCode = "message here.";
getZipCode.style.border = "1px solid red";
messageAry.push(zipCodeError);
}
var re = /^[0-9\-\(\)\s]*$/.test(x) && x.replace(/[^0-9]/g,'').length == 10;
if (!(re.exec(getTele))){
var teleError = "message here.";
getTele.style.border = "1px solid red";
messageAry.push(teleError);
}
var re = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (!(re.exec(getEmail))){
var emailError = "message here.";
getEmail.style.border = "1px solid red";
messageAry.push(emailError);
}
if (getProper.value === ""){
var proper = "message here.";
getProper.style.border = "1px solid red";
messageAry.push(properError);
}
if(getYourDate.value === ""){
var yourDate = "message here.";
getYourDate.style.border = "1px solid red";
messageAry.push(yourDateError);
}
if(messageAry.length >= 1){
for(var i=0, j=messageAry.length; i<j; i++){
var txt = document.createElement('li');
txt.innerHTML = messageAry[i];
errMsg.appendChild(txt);
}
ed.preventDefault();
return false;
}else{
saveData(this.key);
}
}
//Variable defaults
var contactTimes = ["<-- select -->", "Morning", "Afternoon", "Evening"],
properValue,
appointmentType,
checkedValues,
errMsg = $('errors')
;
//Run makeTimes();
makeTimes();
var saveData = $('submit');
saveData.addEventListener("click", validate);
var clearData = $('clearData');
clearData.addEventListener("click", clearLocal);
var displayData = $('displayData');
displayData.addEventListener("click", getData);
});
You should get a lot of errors because your jQuery selectors are all wrong.
For example:
var getProper = $('proper');
There is no HTML element called 'proper'. So it should either be var getProper = $('.proper'); if it has a className 'proper' or var getProper = $('#proper'); when it has an id 'proper'.
Same goes for all your other selectors in the function.