...

View Full Version : Resolved Displaying more then one message on an alert box



PumpkinPie76
12-19-2010, 03:22 AM
okay. I am in the process of learning javascript and I've been looking at this code for the longest time ever. So far I got most of it done.

but the problem is for example I leave all the required fields empty, it gives me the alert message of the first field and not the alert messages of all the others. What I want to know is how can you go through and check the whole form first before submitting and then when there is any error on any field, shows just one alert message containing all the error messages.

code for the form

<form action="mailto:hummdedum@felloff.com" method="post" name="form" onSubmit="return isFormValid();">

* First Name: <input type="text" name="FName" id="FName" onblur="checkFName();"/><label id="labelFName"></label><br />
* Last Name: <input type="text" name="LName" id="LName"onblur="checkLName();"/><label id="labelLName"></label><br />



* Password: <input type="password" id="pw" name="Password" onblur="checkpw();" id="pw"/><label id="labelpw"></label><br />
*Re-type Password: <input type="password" name="2Password" id="pw2" onblur="checkpw2();" /><label id="labelpw2"></label><br />


I am a: <br />
<input type="radio" name="status" value="fresh" /> Freshman<br />
<input type="radio" name="status" value="soph" /> Sophomore<br />
<input type="radio" name="status" value="jr" /> Junior<br />
<input type="radio" name="status" value="sr" /> Senior<br />



I am taking classes in the: <br />
<input type="checkbox" name="semester" value="fall" /> fall time<br />
<input type="checkbox" name="semester" value="spring" /> Spring time <br />



My favorite element is:
<select name="element" id="element">
<option value="">select one</option>
<option value="fire">Fire</option>
<option value="earth">Earth</option>
<option value="water">Water</option>
<option value="air">Air</option>
</select><br />



*Birthday: <input type="text" id="BDay" name="Birthday" onblur="checkBDay();"/><label id="labelBDay"></label><br />



*E-Mail: <input type="text" id="email" name="Email" onblur="checkEmail();"/><label id="labelEmail"></label><br />


<input type="submit" value="Submit" />
<input type="reset" value="Clear" />

</form>


code for the javascript

function isFormValid()
{var userF = document.getElementById('FName').value;
var userL = document.getElementById('LName').value;
var userPW = document.getElementById('pw').value;
var userPW2 = document.getElementById('pw2').value;
var userBDay = document.getElementById('BDay').value;
var userEmail = document.getElementById('email').value;
var NameFormat = /^[A-Za-z]{2,12}$/;
var PWFormat = /^[A-Za-z0-9{6,12}$]/;

if (!NameFormat.test(userF))
{
alert("First Name is required and should only have letters. 2-12 letters max");
return false;
}
if (!NameFormat.test(userL))
{
alert("Last Name is required and should only have letters. 2-12 letters max");
return false;
}
if (!PWFormat.test(userPW))
{
alert("Password is required and should only have letters and numbers. 6-12 letters max");
return false;
}
if (userPW != userPW2)
{
alert("Passwords do not match.");
return false;
}

}

function checkFName()
{
var userF = document.getElementById('FName').value;
var elementF = document.getElementById('labelFName');
var NameFormat = /^[A-Za-z]{2,12}$/;
if (!NameFormat.test(userF))
{
elementF.innerHTML = "First Name is required and should only have letters. 2-12 letters max";
elementF.style.color = "red";
}
else
{
elementF.innerHTML = "";
elementF.style.color = "green";
}
}

function checkLName()
{
var userL = document.getElementById('LName').value;
var elementL = document.getElementById('labelLName');
var NameFormat = /^[A-Za-z]{2,12}$/;
if (!NameFormat.test(userL))
{
elementL.innerHTML = "Last Name is required and should only have letters. 2-12 letters max";
elementL.style.color = "red";
}
else
{
elementL.innerHTML = "";
elementL.style.color = "green";
}
}
function checkpw()
{
var userPW = document.getElementById('pw').value;
var elementPW = document.getElementById('labelpw');
var PWFormat = /^[A-z0-9]{6,12}$/;
if (!PWFormat.test(userPW))
{
elementPW.innerHTML = "Password is required and should only have letters and numbers. 6-12 letters max";
elementPW.style.color = "red";
}
else
{
elementPW.innerHTML = "Valid Password";
elementPW.style.color = "green";
}
}
function checkpw2()
{
var userPW2 = document.getElementById('pw2').value;
var userPW = document.getElementById('pw').value;
var elementPW2 = document.getElementById('labelpw2');
if (userPW != userPW2)
{
elementPW2.innerHTML = "Passwords do not match.";
elementPW2.style.color = "red";
}
else
{
elementPW2.innerHTML = "Passwords Match";
elementPW2.style.color = "green";
}
}

I want to also validate birthday.. and I tried using regular expression with leap years but the expression is too hard for me to think of. so I am gonna try using split() but I dont noe...

and for the clear button. since I blur functions, how would I just clear all the blur statements = like a restart of the form and then when the user enters the field the blur function still works?

thanks :D
-pumpkin

Logic Ali
12-19-2010, 06:01 AM
The return statement ends a function.

Despite what you're going to see everywhere, return (where used) should be the last statement in a function.
You'll make your programs much easier to debug, especially for others.

Create a variable, say var retVal = true; and set it to false in the event of any error. Then the last statement is return retVal;

Rather than issuing multiple alerts, create an empty string var errMsg = ""; and append any relevant error messages to it, each ending with '\n\n'. Then your function can end as:

if( !retVal )
alert( errMsg );

return retVal;
}

PumpkinPie76
12-19-2010, 06:36 AM
The return statement ends a function.

Despite what you're going to see everywhere, return (where used) should be the last statement in a function.
You'll make your programs much easier to debug, especially for others.

Create a variable, say var retVal = true; and set it to false in the event of any error. Then the last statement is return retVal;

Rather than issuing multiple alerts, create an empty string var errMsg = ""; and append any relevant error messages to it, each ending with '\n\n'. Then your function can end as:

if( !retVal )
alert( errMsg );

return retVal;
}
hmm I got it to validate. but then when u said to use and empty string and then attach messages, i think i did. Is this wat u mean?
i tested it, and the validation failed. it just submitted and didnt give me an error message at all.


function isFormValid()
{
var userF = document.getElementById('FName').value;
var userL = document.getElementById('LName').value;
var userPW = document.getElementById('pw').value;
var userPW2 = document.getElementById('pw2').value;
var userBDay = document.getElementById('BDay').value;
var userEmail = document.getElementById('email').value;
var NameFormat = /^[A-Za-z]{2,12}$/;
var PWFormat = /^[A-Za-z0-9{6,12}$]/;
var retVal = true;
var errorMsg = "";

if (!NameFormat.test(userF))
{
error = "First Name is required and should only have letters. 2-12 letters max\n";
retVal = false;
}
if (!NameFormat.test(userL))
{
error2 = "Last Name is required and should only have letters. 2-12 letters max\n";
retVal = false;
}
if (!PWFormat.test(userPW))
{
error3 = "Password is required and should only have letters and numbers. 6-12 letters max\n";
retVal = false;
}
if (userPW != userPW2)
{
error4 = "Passwords do not match.\n";
retVal = false;
}
if (!retVal)
{
alert( errorMsg + error + error2 + error3 + error4);
}
return retVal;
}

PumpkinPie76
12-19-2010, 06:56 AM
oh shoot! I got it to work!!!!!! thanks! so every time there's a new message, u have to repeat the empty variable again and then message. OMGGGG THANK UUUUUUUUUUUUUUU!


function isFormValid()
{
var userF = document.getElementById('FName').value;
var userL = document.getElementById('LName').value;
var userPW = document.getElementById('pw').value;
var userPW2 = document.getElementById('pw2').value;
var userBDay = document.getElementById('BDay').value;
var userEmail = document.getElementById('email').value;
var NameFormat = /^[A-Za-z]{2,12}$/;
var PWFormat = /^[A-Za-z0-9{6,12}$]/;
var retVal = true;
var errorMsg = "";

if (!NameFormat.test(userF))
{
errorMsg = "First Name is required and should only have letters. 2-12 letters max\n";
retVal = false;
}
if (!NameFormat.test(userL))
{
errorMsg = errorMsg + "Last Name is required and should only have letters. 2-12 letters max\n";
retVal = false;
}
if (!PWFormat.test(userPW))
{
errorMsg = errorMsg + "Password is required and should only have letters and numbers. 6-12 letters max\n";
retVal = false;
}
if (userPW != userPW2)
{
errorMsg = errorMsg + "Passwords do not match.\n";
retVal = false;
}
if (!retVal)
{
alert( errorMsg);
}
return retVal;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum