resolved my javascript issue. Sorry it was mainly my fault as i copied and pasted my code instead of rewriting it out again. Strange thing is that it doesn't seem to pass the variables from the form to the process page as i have echo'd the SQL statement back out. This form did work previously to the java script all i added in was Post Code: for each row and even after deleting the javascript it still doesn't work :S
Sorry deadline tomorrow and im panicing.
<script type="text/javascript">
function checkForm()
{
var username = document.getElementById('username').value;
if(username.length < 5)
{
alert("Username is to short");
return false;
}
else if (username.length<16)
{
alert("Username is to long");
return false;
}
var firstName = document.getElementById('firstName').value;
if(firstName.length <3)
{
alert("Forname is to short");
return false;
}
var lastName = document.getElementById('lastName').value;
if (lastName.length <3)
{
alert("Surname is to short");
return false;
}
var address = document.getElementById('address').value;
if (address.length <8)
{
alert("Address is to short");
return false;
}
var town = document.getElementById('town').value;
if (town.length <3)
{
alert ("Town is to short");
return false;
}
var postCode = document.getElementById('postCode').value;
if (postCode.length <6)
{
alert ("Invalid Post Code");
return false;
}
else if (postCode.length>8)
{
alert("Invalid Post Code");
return false;
}
var cardType = document.getElementById('cardType').value;
if (cardType.length <3)
{
alert ("Please enter a valid card type");
return false;
}
var password = document.getElementById('password').value;
if (password.length <6)
{
alert ("You password must be between 6-12 characters");
return false;
}
else if(password.length>12)
{
alert ("Your password must be between 6-12 characters");
return false;
}
else
{
return true;
}
}
function checkUsername()
{
var username = document.getElementById('username').value;
var element = document.getElementById('username1');
if(username.length < 5)
{
element.innerHTML = "Username is to short";
element.style.color = "red";
}
else if (username.length >16)
{
element.innerHTML = "Username is to long";
element.style.color = "red";
}
else
{
element.innerHTML = "Username";
element.style.color = "green";
}
}
function checkFname()
{
var firstName = document.getElementById('firstName').value;
var element = document.getElementById('firstname1');
if(firstName.length < 3)
{
element.innerHTML = "Forname is to short";
element.style.color = "red";
}
else
{
element.innerHTML = "Forname";
element.style.color = "green";
}
}
function checkLname()
{
var lastName = document.getElementById('lastName').value;
var element = document.getElementById('surname1');
if(lastName.length < 3)
{
element.innerHTML = "Surname is to short";
element.style.color = "red";
}
else
{
element.innerHTML = "Surname";
element.style.color = "green";
}
}
function checkAddress()
{
var address = document.getElementById('address').value;
var element = document.getElementById('address1');
if(address.length < 8)
{
element.innerHTML = "Address is to short";
element.style.color = "red";
}
else
{
element.innerHTML = "Address";
element.style.color = "green";
}
}
function checkTown()
{
var town = document.getElementById('town').value;
var element = document.getElementById('town1');
if(town.length < 3)
{
element.innerHTML = "Town is to short";
element.style.color = "red";
}
else
{
element.innerHTML = "Town";
element.style.color = "green";
}
}
function checkPostCode()
{
var postCode = document.getElementById('postCode').value;
var element = document.getElementById('postcode1');
if(postCode.length < 6)
{
element.innerHTML = "Post code is to short";
element.style.color = "red";
}
else if (postCode.length>8)
{
element.innerHTML = "Post Code To Long";
element.style.color = "red";
}
else
{
element.innerHTML = "Post Code";
element.style.color = "green";
}
}
function checkCard()
{
var cardType = document.getElementById('cardType').value;
var element = document.getElementById('card1');
if(cardType.length < 3)
{
element.innerHTML = "Card is to short";
element.style.color = "red";
}
else
{
element.innerHTML = "Card Type";
element.style.color = "green";
}
}
function checkPassword()
{
var password = document.getElementById('password').value;
var element = document.getElementById('password1');
if(password.length < 6)
{
element.innerHTML = "Password is to short";
element.style.color = "red";
}
else if (password.length>16)
{
element.innerHTML = "Password is to long";
element.style.color = "red";
}
else
{
element.innerHTML = "Password";
element.style.color = "green";
}
}
</script>
<p><b><h3>Welcome User Please Register</h3></b></p>
<form action="registerUserProcess.php" id="registerUserForm" method="post" name="registerUserForm" >
<table>
<tr><td><label id="username1">Username:</label></td><td><input id="username" type="text" size="16" onBlur='checkUsername();'/></td></tr>
<tr><td><label id="firstname1">Forename:</label></td><td><input id="firstName" type="text" size="20" onBlur="checkFname();" /></td></tr>
<tr><td><label id="surname1">Surname:</label></td><td><input id="lastName" type="text" size="30" onBlur="checkLname();" /></td></tr>
<tr><td><label id="address1">Address:</label></td><td><input id="address" type="text" size="50" onBlur="checkAddress();" /></td></tr>
<tr><td></td><td><input id="address2" type="text" size="50" onBlur="" /></td></tr>
<tr><td><label id="town1">Town:</label></td><td><input id="town" type="text" size="50" onBlur="checkTown();" /></td></tr>
<tr><td><label id="postcode1">Post Code:</label></td><td> <input type="text" id="postCode" size="8" onBlur="checkPostCode();" /></td></tr>
<tr><td><label id="contact1">Contact No:</label></td><td> <input type="number" id="contact" size="12" onBlur="checkContactNo();" /></td></tr>
<tr><td>Card Number:</td><td><input type="number" id="cardNo1" size="4" /> - <input type="number" id="cardNo2" size="4" /> - <input type="number" id="cardNo3" size="4" /> - <input type="number" id="cardNo4" size="4" /></td></tr>
<tr><td><label id="card1">Card Type</label></td><td> <input type="text" id="cardType" size="8" onBlur="checkCard();" /></td></tr>
<tr><td>Email Address:</td><td><input id="emailAddress" type="text" size="50" /></td></tr>
<tr><td><label id="password1">Password:</label></td><td><input id="password" type="password" size="16" onBlur="checkPassword();" /></td></tr>
<tr><td><label id="terms1">Accept Terms & Conditions:</label></td><td><input type="checkbox" id="termsConditions" value="yes" onBlur="checkTerms();" /></td></tr>
<tr><td><input type="reset" id="resetForm" value="Reset" id="resetForm" /></td><td><input type="submit" id="submitUser" value="Submit" id="submitUser" onSubmit='return checkForm();' /></td></tr>
</table>
</form>
As others said, check your syntax. In checkform(), it should be
else if (username.length > 16)) instead of < 16
and in checkUsername() you spelled length wrong.
But your main problem is in your returns. In checkform() you should only put return true at the end when everything has been validated, or else the function just exit after the first validation.
You could also refactor all of this. You've got plenty of function that do almost the same thing. If you make one function that take minimum characters, maximum characters and the control to validate in parameters, you could do all of your code in 20 to 30 lines.
Plus, it seems like you copy-pasted some of your functions without changing the name of the variables or the targeted control. In fact, you assign Username as a variable in every function, but change the name in the condition, meaning you use an unassign variable.
Function: checkForm():
You need to change the second else if to:
else if (username.length<16)) needs to be > 16.
--
Function: checkUsername():
You have incorrectly spelled length. Change it to:
else if (username.length>16)
This is too much code for one question, but I noticed a few things in the first function:
else if (username.length<16) // This should probably be username.length > 16
{
alert("Username is to long");
return false;
}
if (isNAN(contact)) // this should probably be !isNaN(contact)
{
return true;
}
You misspelled length in the following: username.lenght>16
This is the reason your too long isn't working.
function checkUsername()
{
var username = document.getElementById('username').value;
var element = document.getElementById('username1');
if(username.length < 5)
{
element.innerHTML = "Username is to short";
element.style.color = "red";
}
else if (username.lenght>16)
{
element.innerHTML = "Username is to long";
element.style.color = "red";
}
else
{
element.style.color = "green";
}
}
Related
I want the form to not be submitted when the inputs are wrong. The error messages do appear but my form still gets submitted nonetheless. I cant seem to find the problem would appreciate the help thank you :)-----------------------------------------------------------------------------------------------------
<form action="/handleServer.php" method="get" onsubmit="return validateForm()">
<!-- starting with first name-->
<h4 class="heading" >First name:</h4>
<input id="fname" type="text" name="fname" size="30">
<span id="errorName" class="error"></span>
<!-- module code -->
<h4 class="heading">Module code:</h4>
<input id="mcode" type="text" name="mcode" size="30">
<span id="errorCode" class="error"></span>
<input type="submit" value="Submit">
</form>
<script>
//input field using if-else statements
function validateForm() {
var fname = document.getElementById("fname").value;
var mcode = document.getElementById("mcode").value;
var errorN = document.getElementById("errorName");
var errorC = document.getElementById("errorCode");
//test for an empty input
if (fname === '' && mcode === '') {
errorN.innerHTML = "Please fill in the blank";
errorC.innerHTML = "Please fill in the blank";
return false;
}
if (fname === '') {
errorN.innerHTML = "Please fill in the blank";
return false;
} else {
errorN.innerHTML = "";
}
if (mcode === '') {
errorC.innerHTML = "Please fill in the blank";
return false;
} else {
errorC.innerHTML = "";
}
//test for invalid format
if (/^[A-Z]\D{2,30}$/.test(fname) == false) //if its true, it will go to the second input
{
errorN.innerHTML = "One capital letter and no digits allowed";
fname.style.color="red";
return false;
} else {
fname.innerHTML = "";
}
if (/^[a-z]{3}[1-9]\d{4}$/.test(mcode) == false)
{
errorC.innerHTML = "Wrong format";
mcode.style.color="red";
return false;
} else {
mcode.innerHTML = "";
}
return true; }
The problem seems to be these four lines of code:
fname.style.color="red";
fname.innerHTML = "";
mname.style.color="red";
mname.innerHTML = "";
fname and mname are strings, therfore fname.style and mname.style both result in undefined. Obviously you can't set properties on undefined which is why you are getting an error.
//You are getting the value properties which are strings:
var fname = document.getElementById("fname").value;
var mcode = document.getElementById("mcode").value;
The error is stopping your code before you can return false, preventing the cancelation of the form submit.
The solution is to instead make two more variables storing the actual input elements:
var finput = document.getElementById("fname");
var minput = document.getElementById("mname");
Then change lines:
fname.style.color="red";
fname.innerHTML = "";
mname.style.color="red";
mname.innerHTML = "";
to:
finput.style.color="red";
finput.innerHTML = "";
minput.style.color="red";
minput.innerHTML = "";
Here is a working version:
<form action="/handleServer.php" method="get" onsubmit="return validateForm()">
<!-- starting with first name-->
<h4 class="heading">First name:</h4>
<input id="fname" type="text" name="fname" size="30">
<span id="errorName" class="error"></span>
<!-- module code -->
<h4 class="heading">Module code:</h4>
<input id="mcode" type="text" name="mcode" size="30">
<span id="errorCode" class="error"></span>
<input type="submit" value="Submit">
</form>
<script>
//input field using if-else statements
function validateForm() {
var finput = document.getElementById("fname");
var minput = document.getElementById("mname");
var fname = document.getElementById("fname").value;
var mcode = document.getElementById("mcode").value;
var errorN = document.getElementById("errorName");
var errorC = document.getElementById("errorCode");
//test for an empty input
if (fname === '' && mcode === '') {
errorN.innerHTML = "Please fill in the blank";
errorC.innerHTML = "Please fill in the blank";
return false;
}
if (fname === '') {
errorN.innerHTML = "Please fill in the blank";
return false;
} else {
errorN.innerHTML = "";
}
if (mcode === '') {
errorC.innerHTML = "Please fill in the blank";
return false;
} else {
errorC.innerHTML = "";
}
//test for invalid format
if (/^[A-Z]\D{2,30}$/.test(fname) == false) //if its true, it will go to the second input
{
errorN.innerHTML = "One capital letter and no digits allowed";
finput.style.color = "red";
return false;
} else {
finput.innerHTML = "";
}
if (/^[a-z]{3}[1-9]\d{4}$/.test(mcode) == false) {
errorC.innerHTML = "Wrong format";
minput.style.color = "red";
return false;
} else {
minput.innerHTML = "";
}
return true;
}
</script>
Pass the event to the form validation function
onsubmit="return validateForm(e)"
Then prevent default submission using
e.preventDefault();
Your return statement should be inside a condition. Right now you're existing the condition and ending the function with a return true; regardless of what the conditional statements have already returned. So:
if (fname === '' && mcode === '') {
errorN.innerHTML = "Please fill in the blank";
errorC.innerHTML = "Please fill in the blank";
return false;
}else{
return true; // THIS IS WHERE YOU NEED TO RETURN TRUE
}
I see you're returning false in multiple if statements. You'll need to find a way to unify the conditions so that you have one return only for for either true or false.
Hi guys i have a problem with my code
my code is showing message for password input instead of email input message, while im typing in email input
can u help me?
var emInpVal = document.getElementById('emIn');
var psInpVal = document.getElementById('psIn');
var msg = "";
function realTime(){
var loginBtn = document.getElementById('login');
if(emInpVal.value.length <= 5){
msg = "Adres e-mail zbyt krótki.";
loginBtn.disabled = true;
loginBtn.style.backgroundColor = "red";
}
else if(emInpVal.value.length > 5) {
msg = "";
loginBtn.disabled = false;
loginBtn.style.backgroundColor = '#157e79';
}
if(psInpVal.value.length <= 6){
msg = "Hasło musi mieć conajmniej 6 znaków";
loginBtn.disabled = true;
loginBtn.style.backgroundColor = "red";
}
else if(psInpVal.value.length > 6){
msg = "";
loginBtn.disabled = false;
loginBtn.style.backgroundColor = '#157e79';
}
document.getElementById('span').innerHTML = msg;
};
<div id="wrap">
<div class="frame">
<h1>Login here</h1>
<h3>You have account already? Click sign in</h3>
<form id="forma">
<input type="email" id="emIn" name="emailInput" placeholder="Email adress" onkeyup="realTime(this)" required>
<input type="password" id="psIn" name="passwordInput" placeholder="Password" onkeyup="realTime(this)" required>
<input type="submit" name="signin" id="signIn" value="Sign in">
<input type="submit" name="login" id="login" value="Login">
<div class="bottomLink">
<h1>Forget password?</h1>
<span id="span"></span>
</div>
</form>
</div>
can't find resolve of problem, even if i put this. to element it's not showing the message
The first condition is doing right however the problem is that the second condition is executing just after the first condition even if the first condition meets the clause which means it is replacing the error message of the first condition. Below is the correct code.
function realTime() {
var emInpVal = document.getElementById('emIn');
var psInpVal = document.getElementById('psIn');
var msg = "";
var loginBtn = document.getElementById('login');
if (emInpVal.value.length <= 5) {
loginBtn.disabled = true;
loginBtn.style.backgroundColor = "red";
document.getElementById('span').innerHTML = "Adres e-mail zbyt krótki.";
return;
} else if (psInpVal.value.length <= 6) {
loginBtn.disabled = true;
loginBtn.style.backgroundColor = "red";
document.getElementById('span').innerHTML = "Hasło musi mieć conajmniej 6 znaków";
return;
} else {
msg = "";
loginBtn.disabled = false;
loginBtn.style.backgroundColor = '#157e79';
document.getElementById('span').innerHTML = "";
}
};
That's because all the validator will run whenever you fire the keyUp, To selectively run a particular validator, I have added an extra check with the id of the element which is triggering the realTime() function of yours.
var emInpVal = document.getElementById('emIn');
var psInpVal = document.getElementById('psIn');
var msg = "";
function realTime(elem){
var loginBtn = document.getElementById('login');
if(elem.id == 'emIn' && emInpVal.value.length <= 5){
msg = "Adres e-mail zbyt krótki.";
loginBtn.disabled = true;
loginBtn.style.backgroundColor = "red";
}
else if(elem.id == 'emIn' && emInpVal.value.length > 5) {
msg = "";
loginBtn.disabled = false;
loginBtn.style.backgroundColor = '#157e79';
}
if(elem.id == 'psIn' && psInpVal.value.length <= 6){
msg = "password should be greater than or equal to 6";
loginBtn.disabled = true;
loginBtn.style.backgroundColor = "red";
}
else if(elem.id == 'psIn' && psInpVal.value.length > 6){
msg = "";
loginBtn.disabled = false;
loginBtn.style.backgroundColor = '#157e79';
}
document.getElementById('span').innerHTML = msg;
};
<div id="wrap">
<div class="frame">
<h1>Login here</h1>
<h3>You have account already? Click sign in</h3>
<form id="forma">
<input type="email" id="emIn" name="emailInput" placeholder="Email adress" onkeyup="realTime(this)" required>
<input type="password" id="psIn" name="passwordInput" placeholder="Password" onkeyup="realTime(this)" required>
<input type="submit" name="signin" id="signIn" value="Sign in">
<input type="submit" name="login" id="login" value="Login">
<div class="bottomLink">
<h1>Forget password?</h1>
<span id="span"></span>
</div>
</form>
</div>
Ok i've found answer for that problem,
thank You guys for helping
second if needs add of &&
Now i have another problem when i fill both inputs, and disabled property turns false so every conditions are done, i want to delete value of first input (email) and nothing happens now, conditions aren't changing back to disabled = true, and message of short email value not showing..
function realTime(){
var emInpVal = document.getElementById('emIn');
var psInpVal = document.getElementById('psIn');
var msg = "";
var loginBtn = document.getElementById('login');
if(emInpVal.value.length <= 5){
msg = "Adres e-mail zbyt krótki.";
loginBtn.disabled = true;
loginBtn.style.backgroundColor = "red";
}
else if(emInpVal.value.length > 5){
msg = "";
loginBtn.disabled = false;
loginBtn.style.backgroundColor = "#157e79";
}
if(psInpVal.value.length > 0 && psInpVal.value.length <= 6){
msg = "Hasło jest za krótkie"
loginBtn.disabled = true;
loginBtn.style.backgroundColor = "red";
}
else if(psInpVal.value.length > 6){
msg = "";
loginBtn.disabled = false;
loginBtn.style.backgroundColor = '#157e79';
}
document.getElementById('span').innerHTML = msg;
};
html part :
<input type="text" id="name" placeholder="Email" />
<input type="password" id="pass" placeholder="Password" />
<button type="submit" onclick="validateUser()">Submit</button>
<p id="para"></p>
JavaScript part :
var USERS = ['sumair', 'awais', 'umair'];
var PASSWORDS = [1234, 1234, 1234]
function validateUser() {
var username = document.getElementById('name').value;
var password = document.getElementById('pass').value;
for (var i in USERS) {
if (username == USERS[i] && password == PASSWORDS[i]) {
document.getElementById('para').innerHTML = "you are in";
} else {
document.getElementById('para').innerHTML = "you are not in";
}
}
}
You need to break loop when the condition is achieved.
//Create a variable
var result = false;
for (var i in USERS) {
if (username == USERS[i] && password == PASSWORDS[i]) {
result = true;
break;
}
}
//Based on the basis of result.
if (result) {
document.getElementById('para').innerHTML = "you are in";
} else {
document.getElementById('para').innerHTML = "you are not in";
}
for (var i in USERS) {
if (username == USERS[i] && password == PASSWORDS[i]) {
document.getElementById('para').innerHTML = "you are in";
break;
} else {
document.getElementById('para').innerHTML = "you are not in";
}
}
I am just copying my code:
HTML
<form id='test'>
Name *
<input id="lname" type="text"><span id="wronglname" class="error">*This is a required field</span>
Name *
<input id="name" type="text"><span id="wrongname" class="error">*This is a required field</span>
Email*
<input id="email" type="text"><span id="wrongemail" class="error">* Wrong Email Address</span>
<div>
<input type="submit" value="Submit">
</div>
</form>
Javascript
function ValidateForm() {
var hasError = false;
if (document.getElementById('lname').value == "") {
document.getElementById('lwrongname').style.display = "inline";
hasError = true;
} else {
document.getElementById('wrongname').style.display = "none";
}
if (document.getElementById('name').value == "") {
document.getElementById('wrongname').style.display = "inline";
hasError = true;
} else {
document.getElementById('wrongname').style.display = "none";
}
if (document.getElementById('email').value.search(/^[a-zA-Z]+([_\.-]?[a-zA-Z0-9]+)*#[a-zA-Z0-9]+([\.-]?[a-zA-Z0-9]+)*(\.[a-zA-Z]{2,4})+$/) == -1) {
document.getElementById('wrongemail').style.display = "inline";
hasError = true;
} else {
document.getElementById('wrongemail').style.display = "none";
}
return !hasError;
}
document.getElementById('test').onsubmit = ValidateForm;
CSS
.error {
display:none;
color:red;
}
I am getting no response at all, and whenever I check javascript console by chrome, it shows me also no error, I am not too sure what's wrong with my coding, can anyone help me out?
Here is your mistake:
if (document.getElementById('lname').value == "") {
document.getElementById('lwrongname').style.display = "inline";
hasError = true;
}
Notice document.getElementById('lwrongname'), should be document.getElementById('wronglname').
I wonder why is the form still submitted instead of show the validation results. I have tried also having an onclick event at input type line but also no joy :-(
This is the form
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"/>
<title>Submit a runner time</title>
</head>
<body>
<script src="TMA02validationSubmitResultForm.js"></script>
<hr/>
<h1>Submit a runner time</h1>
<hr/>
Note: all fields marked '*' are mandatory.
<p/>
<form action="http://jdm423.tt284.open.ac.uk/uploadblock2/storedata.php" method="post" onsubmit="return validateForm()" id="submitrunnertime" name="submitrunnertime">
<table>
<div id="error"> </div>
<tr><td>Runner ID*</td>
<td><input type="text" onblur="validateRunnerId()" id="RunnerId" name="RunnerId" size="5" maxlength="5"/></td>
</tr>
<tr><td>Event ID*</td>
<td><input type="text" onblur="validateEventId()" name="EventId" id="EventId" size="5" maxlength="5"/></td>
</tr>
<tr><td>Date (YYYY-MM-DD)*</td>
<td><input type="text" onblur="validateDate()" name="Date" id="When" size="10" maxlength="10"/></td>
</tr>
<tr><td>Finish time (HH:MM:SS)*</td>
<td><input type="text" onblur="validateTime()" name="FinishTime" id="Time" size="8" maxlength="8"/></td>
</tr>
<tr><td>Position*</td>
<td><input type="text" onblur="validatePosition()" name="Position" id="Position" size="5" maxlength="5"/></td>
</tr>
<tr><td>Category ID*</td>
<td><input type="text" onblur="validateCategoryId()"name="CategoryId" id="CategoryId" size="2" maxlength="3"/></td>
</tr>
<tr><td>Age grade*</td>
<td><input type="text" onblur="validateAge()" name="AgeGrade" id="Age" size="5" maxlength="5"/></td>
</tr>
<tr><td>Personal best</td>
<td><input type="text" onblur="validatePB()" name="PB" id="PB" size="1" maxlength="1"/></td>
</tr>
</table>
<input type="submit" name="submitrunnertime" id="submitrunnertime" value="submit"/>
<hr/>
</form>
</body>
</html>
and the JS
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(ymd) {
var ymd = document.getElementById('When').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) {
When.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The date can\'t be empty";
return false;
}
else if (!legalEntry.test(ymd)) {
When.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The date must be in format YYYY-MM-DD";
return false;
}
else {
When.style.background = 'White';
document.getElementById('error').innerHTML = "";
return true;
}
}
function validateTime(tm) {
var tm = document.getElementById('Time').value;
var legalEntry = /^\d\d\:[0-5][0-9]\:[0-5][0-9]$/
if (tm.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(tm)) {
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(pos) {
var pos = document.getElementById('Position').value;
var legalEntry = /^\d{1,5}?$/
if (pos.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(pos)) {
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 {
CategoryId.style.background = 'White';
document.getElementById('error').innerHTML = "";
return true;
}
}
function validateAge(agrade) {
var agrade = document.getElementById('Age').value;
var legalEntry = /^\d\d?\,?\d?\d?$/;
if (agrade.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(agrade)) {
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(pbest) {
var pbest = document.getElementById('PB').value;
var legalEntry = /^(0|1)$/;
if (pbest.length == 0) {
pbest.value = "0";
}
else if (!legalEntry.test(pbest)) {
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;
}
}
Many thanks in advance for taking the time to help this rookie :)
In this code:
function validateForm() {
return (validateRunnerId
&& validateEventId
&& validateDate
&& validateTime
&& validatePosition
&& validateCategoryId
&& validateAge
&& validatePB);
}
...you're not calling your functions, you're just referring to them. And since a function reference is truthy, that condition is always true and the form is always valid.
To call a function, you put () after it. Assuming your functions don't need arguments, that would just be:
function validateForm() {
return (validateRunnerId()
&& validateEventId()
&& validateDate()
&& validateTime()
&& validatePosition()
&& validateCategoryId()
&& validateAge()
&& validatePB());
}
It's hard to tell, though, because a lot of your functions declare arguments but then also declare the same symbol as variables, which is odd to put it mildly.