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.
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 :)
My javascript code is partially working, it works on the first name validation, on the Email validation it shows the error for a second but it doesn't return false and the password validation isn't working at all.
function validate() {
var emailOk = validateEmail();
var fNameOk = validateFirstName();
var paswOk = validatePassword();
return fNameOk;
return paswOk;
return emailOk;
}
function validatePassword() {
var name = document.getElementById("psw");
name.style.borderColor = "";
document.getElementById("passwordErr").innerText = "";
if (name.value.length < 7) {
name.style.borderColor = "red";
var error = document.getElementById("passwordErr");
error.innerText = "Password does not fit the criteria.";
return false;
}
else
return true;
}
function validateFirstName() {
var name = document.getElementById("F_Name");
name.style.borderColor = "";
document.getElementById("fNameErr").innerText = "";
if (name.value.length == 0) {
name.style.borderColor = "red";
var error = document.getElementById("fNameErr");
error.innerText = "Missing first name.";
return false;
}
else
return true;
}
function validateEmail() {
var name = document.getElementById("email");
name.style.borderColor = "";
document.getElementById("emailErr").innerText = "";
var re = /\S+#\S+\.\S+/;
if (re.test(name) == true)
return true;
else
var error = document.getElementById("emailErr");
error.innerText = "Not a vaild email.";
return false;
}
I expect it to stop when you enter a password that is shorter than 7 and for it to show the message. I also expect it to stop when The email is invalid.
You are writing your else statements incorrectly. They should also be opened and closed with curly brackets
else { // code }
Also, code written after a return statement will not be executed. You will need to return 3 variables at the same time, using an object or array.
function validate() {
var emailOk = validateEmail();
var fNameOk = validateFirstName();
var paswOk = validatePassword();
console.log(fNameOk, paswOk, emailOk)
return {
fNameOk,
paswOk,
emailOk
}
}
function validatePassword() {
var name = document.getElementById("psw");
name.style.borderColor = "";
document.getElementById("passwordErr").innerText = "";
if (name.value.length < 7) {
name.style.borderColor = "red";
var error = document.getElementById("passwordErr");
error.innerText = "Password does not fit the criteria.";
return false;
} else {
return true;
}
}
function validateFirstName() {
var name = document.getElementById("F_Name");
name.style.borderColor = "";
document.getElementById("fNameErr").innerText = "";
if (name.value.length == 0) {
name.style.borderColor = "red";
var error = document.getElementById("fNameErr");
error.innerText = "Missing first name.";
return false;
} else {
return true;
}
}
function validateEmail() {
var name = document.getElementById("email");
name.style.borderColor = "";
document.getElementById("emailErr").innerText = "";
var re = /\S+#\S+\.\S+/;
if (re.test(name) == true) {
return true;
} else {
var error = document.getElementById("emailErr");
error.innerText = "Not a vaild email.";
return false;
}
}
<input id="email" placeholder="Email" /><br>
<input id="F_Name" placeholder="First Name" /><br>
<input id="psw" type="password" placeholder="Password" /><br>
<button onclick="validate()">Register</button>
<div id="passwordErr"></div>
<div id="fNameErr"></div>
<div id="emailErr"></div>
One thing I can say, use:
return fNameOk && paswOk && emailOk;
instead of:
return fNameOk;
return paswOk;
return emailOk;
Because when you write "return fNameOk;", it will return from the function. The next two lines will never be executed.
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;
}
function validate()
{
var flag=0;
var spchar=/^[a-zA-Z0-9 ]*$/;
var num=/^[0-9]*$/;
var custid = document.getElementById('CUSTOMERID').value;
var phoNo = document.getElementById('PHONENO').value;
var emailId = document.getElementById('EMAILID').value;
var channel = document.getElementById('CHANNELDTL').value;
if(channel=="")
{
alert("You have not selected any channel");
flag=1;
return false;
}
if(custid=="" || custid==null )
{
alert("Please enter Customer ID");
document.getElementById('CUSTOMERID').focus();
flag=1;
return false;
}
if (custid.search(num)==-1)
{
alert("Customer should be Numeric");
document.getElementById('CUSTOMERID').focus();
flag=1;
return false;
}
if(phoNo=="" || phoNo==null )
{
alert("Please enter Phone");
document.getElementById('PHONENO').focus();
flag=1;
return false;
}
if (phoNo.search(num)==-1)
{
alert("Phone should be Numeric");
document.getElementById('PHONENO').focus();
flag=1;
return false;
}
if(emailId=="" || emailId==null )
{
alert("Please enter Email");
document.getElementById('EMAILID').focus();
flag=1;
return false;
}
if (emailId)
{
if(isValidEmail(document.getElementById('EMAILID').value) == false)
{
alert("Please enter valid Email");
document.getElementById('EMAILID').focus();
flag=1;
return false;
}
}
if(flag==0)
{
var emailid=Base64.tripleEncoding(document.getElementById('EMAILID').value);
document.getElementById('E_EMAIL').value=emailid;
document.getElementById('EMAILID').value="";
var mobileno=Base64.tripleEncoding(document.getElementById('PHONENO').value);
document.getElementById('E_PHONE').value=mobileno;
document.getElementById('PHONENO').value="";
var customerid=Base64.tripleEncoding(document.getElementById('CUSTOMERID').value);
document.getElementById('E_CUSTID').value=customerid;
document.getElementById('CUSTOMERID').value="";
document.topupsform.action="../dth/leads/channelMail/channelMailUtil.jsp";
document.topupsform.submit();
alert("Thank you for choosing A-La-Carte services.\nWe will process it within 24 hours.\nYou will soon receive confirmation on your mail id.");
}
}
function isValidEmail(Email)
{
var reg = /^([A-Za-z0-9_\-\.])+\#([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var address = trim(Email);
if(reg.test(address) == false)
{
return false;
}
else
return true;
}
function trim(str)
{
str = this != window? this : str;
return str.replace(/^\s+/g, '').replace(/\s+$/g, '');
}
function sendMail()
{
caltotal();
validate();
}
//----------------------------------
var counter = 0;
function resetcheckboxValue(){
//var totalinputs = document.topupsform.getElementsByTagName("input");
var totalinputs =document.getElementsByName("dthchannel");
var totallenght = totalinputs.length;
counter = 0;
for(var i = 0; i < totallenght; i++) {
// reset all checkboxes
document.getElementsByName("dthchannel")[i].checked = false;
document.getElementById("totalamount").value = "0";
document.getElementById("youpay").value = "0";
}
}
function caltotal()
{
var plansObj = document.getElementsByName("dthchannel");
var plansLength = plansObj.length;
counter = 0;
var finalNameValue = "";
for(var i = 1; i <= plansObj.length+1; i++) {
if ( document.getElementById(("dthchannel")+ [i]).checked)
{
var gvalue = parseInt(document.getElementById(("dthchannel")+[i]).value);
var gNameValue= document.getElementById("CHANNELNAME"+i).value+"~"+gvalue+"#";
finalNameValue+= gNameValue;
counter+= gvalue;
}
showresult();
}
var finallist = finalNameValue.substring(0,finalNameValue.length-1);
//alert("finallist" +finallist);
document.getElementById("CHANNELDTL").value= finallist;
}
function showresult(){
if(counter <= 150 && counter > 0){
document.getElementById("youpay").value = "150";
document.getElementById("totalamount").value = counter;
}
else
{
document.getElementById("youpay").value = counter;
document.getElementById("totalamount").value = counter;
}
}
window.onload = resetcheckboxValue;
You need to modify whatever lines look like this:
var gvalue = parseInt(document.getElementById("dthchannel" + i).value);
You don't want to do document.getElementById(("dthchannel") + [i]) as I've never seen that before and I don't think it works.