Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    MKO
    MKO is offline
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Displaying only one alert message

    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

  • #2
    New Coder
    Join Date
    Dec 2006
    Posts
    80
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hello,

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


    Code:
     
    var msg = "The following fields are required before submission" + '\n' + fieldVal1 + '\n' + fieldVal2 + '\n' + fieldVal3
     
    alert(msg)
    Cheers
    Joe
    http://www.Kanotix.com --My OS of choice, the best hardware detection on the planet!-
    http://distrowatch.com -Linux is the future-
    http://www.packetstormsecurity.org -Security Gurus-

  • #3
    MKO
    MKO is offline
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    Code:
    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?

  • #4
    New Coder
    Join Date
    Dec 2006
    Posts
    80
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi,

    Can you give me the HTML too please?

    cheers
    Joe
    http://www.Kanotix.com --My OS of choice, the best hardware detection on the planet!-
    http://distrowatch.com -Linux is the future-
    http://www.packetstormsecurity.org -Security Gurus-

  • #5
    MKO
    MKO is offline
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry,

    here is the remainder:

    Code:
    <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

  • #6
    New Coder
    Join Date
    Dec 2006
    Posts
    80
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hello,

    Is this anything like what you need?


    Code:
     
    <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
    http://www.Kanotix.com --My OS of choice, the best hardware detection on the planet!-
    http://distrowatch.com -Linux is the future-
    http://www.packetstormsecurity.org -Security Gurus-

  • #7
    MKO
    MKO is offline
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #8
    New Coder
    Join Date
    Dec 2006
    Posts
    80
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi MKO,

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

    Code:
     <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
    http://www.Kanotix.com --My OS of choice, the best hardware detection on the planet!-
    http://distrowatch.com -Linux is the future-
    http://www.packetstormsecurity.org -Security Gurus-


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •