...

View Full Version : Displaying only one alert message



MKO
08-21-2007, 03:28 PM
Hi

Im trying to round up all my alert messages withing a function and display only one message after the function has checked everything.

The alert message I want is something like this:

"The following fields are required before submitting this form:
A....
B....
X...."

Any suggestions on how to do this?

Do I need to post the code for help?

Cheers

M

LFCFan
08-21-2007, 04:07 PM
Hello,

Yes, please post your code. But as a first guess I would think after all your code has run:




var msg = "The following fields are required before submission" + '\n' + fieldVal1 + '\n' + fieldVal2 + '\n' + fieldVal3

alert(msg)


Cheers
Joe

MKO
08-21-2007, 04:25 PM
Hi Joe

Here is the code, it works but throws up individual error messages (onSubmit) which is ok, but Id like to just get one message



function validateForm(){

// Required validation fields
var firstName = document.getElementById('cdFirstName');
var lastName = document.getElementById('cdLastName');
var addr = document.getElementById('cdAddress');
var city = document.getElementById('cdCity');
var postcode = document.getElementById('cdPostcode');
var state = document.getElementById('cdState');
var contactMsg = "Please provide either your home number, mobile number or a valid email address";

// Validate if one or more is completed
var email = document.getElementById('cdEmail');
var mobile = document.getElementById('cdMobile');
var homePhone = document.getElementById('cdHomePhone');

//--> The validateForm() code is here:
if(isAlphabet(firstName, "Please enter your given name")){
if(isAlphabet(lastName, "Please enter your surname")){
if(isAddress(addr, "Please enter your postal address")){
if(isAlphabet(city, "Please enter your city")){
if(isAlphabet(state, "Please enter your State")){
if(isNumeric(postcode, "Please enter a valid numeric postcode")){
if((isNumeric(homePhone, contactMsg)) || isNumeric(mobile, contactMsg) || emailValidator(email, contactMsg)){
return true;
}
}
}
}
}
}
}
return false;
}

function isEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return true;
}
return false;
}

function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function isAddress(elem, helperMsg){
if(elem.value.length > 0){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function emailValidator(elem, helperMsg){
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}



How does your answer fit into this?

LFCFan
08-21-2007, 04:49 PM
Hi,

Can you give me the HTML too please?

cheers
Joe

MKO
08-21-2007, 05:10 PM
Sorry,

here is the remainder:




<html>
<body>
<table width="740" border="0" align="center" cellpadding="10" cellspacing="0" class="borderPage">
<tr>
<td align="center" bgcolor="RED"><span class="companyTitleWhite">XYZ - Test </span> <br />
<strong>What ever we want to put here</strong></td>
</tr>
<tr>
<td><form id="fmOrder" name="fmOrder" method="get" action="FormProcessor.html" onsubmit="return validateForm(this);">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td>* required information
<table border="0" cellpadding="2" cellspacing="0" class="borderPage">
<tr>
<th width="9%" align="right" nowrap="nowrap" bgcolor="RED" class="borderBR">First Name:* </th>
<td width="23%" bgcolor="#F0F0F0" class="borderBR"><input name="cdFirstName" type="text" id="cdFirstName" size="35" /></td>
<th colspan="2" align="center" nowrap="nowrap" bgcolor="RED" class="borderB">Please provide at least one form of contact below *</th>
</tr>
<tr>
<th align="right" bgcolor="RED" class="borderBR">Last Name:* </th>
<td bgcolor="#F0F0F0" class="borderBR"><input name="cdLastName" type="text" id="cdLastName" size="35" /></td>
<th width="12%" align="right" nowrap="nowrap" bgcolor="RED" class="borderB">Home Phone: </th>
<td width="56%" bgcolor="#F0F0F0" class="borderB"><input name="cdHomePhone" type="text" id="cdHomePhone" /></td>
</tr>
<tr>
<th align="right" bgcolor="RED" class="borderBR">Address:*</th>
<td bgcolor="#F0F0F0" class="borderBR"><input name="cdAddress" type="text" id="cdAddress" size="35" /></td>
<th align="right" bgcolor="RED" class="borderB">Mobile:</th>
<td valign="top" bgcolor="#F0F0F0" class="borderB"><input name="cdMobile" type="text" id="cdMobile" /></td>
</tr>
<tr>
<th align="right" bgcolor="RED" class="borderBR">City:*</th>
<td bgcolor="#F0F0F0" class="borderBR"><input name="cdCity" type="text" id="cdCity" size="20" /></td>
<th align="right" bgcolor="RED" class="borderB">Email:</th>
<td bgcolor="#F0F0F0" class="borderB"><input name="cdEmail" type="text" id="cdEmail" /></td>
</tr>
<tr>
<th align="right" bgcolor="RED" class="borderBR">State:*</th>
<td bgcolor="#F0F0F0" class="borderBR"><input name="cdState" type="text" id="cdState" size="20" /></td>
<td align="right" bgcolor="#F0F0F0" class="borderB">&nbsp;</td>
<td bgcolor="#F0F0F0" class="borderB">&nbsp;</td>
</tr>
<tr>
<th align="right" bgcolor="RED" class="borderBR">Postcode:*</th>
<td bgcolor="#F0F0F0" class="borderBR"><input name="cdPostcode" type="text" id="cdPostcode" size="8" /></td>
<td align="right" bgcolor="#F0F0F0" class="borderB">&nbsp;</td>
<td bgcolor="#F0F0F0" class="borderB">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#F0F0F0">&nbsp;</td>
<td align="right" bgcolor="#F0F0F0" class="borderBR">&nbsp;</td>
<td bgcolor="#F0F0F0" class="borderB"><input type="submit" name="Submit" value="Submit Order" /></td>
</tr>
</table> </td>
</tr>
</table>
</form> </td></tr>
</table>
</body>
</html>


Cheers

LFCFan
08-21-2007, 06:30 PM
Hello,

Is this anything like what you need?




<script language = "javascript" type = "text/javascript">
var hMsg =""
var countErr = 0
function validateForm(){

// Required validation fields
var firstName = document.getElementById('cdFirstName');
var lastName = document.getElementById('cdLastName');
var addr = document.getElementById('cdAddress');
var city = document.getElementById('cdCity');
var postcode = document.getElementById('cdPostcode');
var state = document.getElementById('cdState');
var homeMsg = "Please provide your home number";
var mobMsg = "Please provide a valid mobile number"
var emailAdd = "Please provide a valid email address"

// Validate if one or more is completed
var email = document.getElementById('cdEmail');
var mobile = document.getElementById('cdMobile');
var homePhone = document.getElementById('cdHomePhone');
isAlphabet(firstName, "Please enter your given name");
isAlphabet(lastName, "Please enter your surname");
isAddress(addr, "Please enter your postal address");
isAlphabet(city, "Please enter your city");
isAlphabet(state, "Please enter your State");
isNumeric(postcode, "Please enter a valid numeric postcode");
isNumeric(homePhone, homeMsg);
isNumeric(mobile, mobMsg);
emailValidator(email, emailAdd);
addMsg()
}
function isEmpty(elem, helperMsg){
if(elem.value.length == 0){
hMsg+=(helperMsg + '\n')
elem.focus(); // set the focus to this input
return true;
}
}
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
hMsg+=(helperMsg + '\n')
elem.focus();
}
}
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
hMsg+=(helperMsg + '\n')
elem.focus();
}
}
function isAddress(elem, helperMsg){
if(elem.value.length > 0){
return true;
}else{
hMsg+=(helperMsg + '\n')
elem.focus();
}
}
function emailValidator(elem, helperMsg){
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp)){
return true;
}else{
hMsg+=(helperMsg + '\n')
elem.focus();

}
}
function addMsg()
{
alert(hMsg)
hMsg = ""
}

</script>


Cheers
Joe

MKO
08-21-2007, 06:55 PM
Thank you, thank you, thank you

There seems to be some major changes here, I guess what I was looking at was not the right way to go about it (no wonder I couldn't get it to work).

Any chance of a quick explanation?

How do I now stop it from moving onto the next page if an error is there? (need something like return true or return false).

Cheers for your help

LFCFan
08-22-2007, 09:52 AM
Hi MKO,

All my code alterations/additions are in blue, my comments are in red.


<script language = "javascript" type = "text/javascript">
var hMsg ="" //Global variable, this catches error messages (Empty String)
var countErr = 0 //ignore this, was just some testing
function validateForm(){

// Required validation fields
var firstName = document.getElementById('cdFirstName');
var lastName = document.getElementById('cdLastName');
var addr = document.getElementById('cdAddress');
var city = document.getElementById('cdCity');
var postcode = document.getElementById('cdPostcode');
var state = document.getElementById('cdState');
var homeMsg = "Please provide your home number";
var mobMsg = "Please provide a valid mobile number"
var emailAdd = "Please provide a valid email address"


var email = document.getElementById('cdEmail');
var mobile = document.getElementById('cdMobile');
var homePhone = document.getElementById('cdHomePhone');

// These will now be validated regardless of completion, as all functions are called one by one
isAlphabet(firstName, "Please enter your given name");
isAlphabet(lastName, "Please enter your surname");
isAddress(addr, "Please enter your postal address");
isAlphabet(city, "Please enter your city");
isAlphabet(state, "Please enter your State");
isNumeric(postcode, "Please enter a valid numeric postcode");
isNumeric(homePhone, homeMsg);
isNumeric(mobile, mobMsg);
emailValidator(email, emailAdd);
addMsg() //calls the tiny function at the end of the script, after all validation is done
}
function isEmpty(elem, helperMsg){
if(elem.value.length == 0){
hMsg+=(helperMsg + '\n') //add error string to hMsg
elem.focus(); // set the focus to this input
return true;
}
}
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
hMsg+=(helperMsg + '\n') //add error string to hMsg
elem.focus();
}
}
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
hMsg+=(helperMsg + '\n') //add error string to hMsg
elem.focus();
}
}
function isAddress(elem, helperMsg){
if(elem.value.length > 0){
return true;
}else{
hMsg+=(helperMsg + '\n') //add error string to hMsg
elem.focus();
}
}
function emailValidator(elem, helperMsg){
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp)){
return true;
}else{
hMsg+=(helperMsg + '\n') //add error string to hMsg
elem.focus();

}
}
function addMsg()
{
//You could count the length of hMsg here, if its greater than 0, then return false
if (hMsg.length>0){
alert(hMsg);
hMsg = ""; //this is the variable set at the start of the script containing all error strings, now set back to empty, in case submit button is clicked more than once
return false;
}
else{
hMsg = ""
}

}

</script>


So, all I've done is make sure all validate functions are called when submit is clicked, then appended all error messages to an empty string. Then, when all validators are finished, called the addMsg() function to display the error message.

Hope that helps

Cheers
Joe



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum