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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Displaying more then one message on an alert box

    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
    Code:
    <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
    Code:
    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
    -pumpkin
    Last edited by PumpkinPie76; 12-19-2010 at 09:04 AM.

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    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:
    Code:
     if( !retVal )
      alert( errMsg );
    
     return retVal;
    }

  • Users who have thanked Logic Ali for this post:

    PumpkinPie76 (12-19-2010)

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Logic Ali View Post
    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:
    Code:
     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.

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

  • #4
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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!

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


  •  

    Tags for this Thread

    Posting Permissions

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