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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Grouping Alerts together

    Hi there,

    I'm creating a form that has a variety of input types that need to be validated. I've got two alternative questions:

    1
    I initially found the following javascript code elsewhere on codingforums and it matches what I want to do with my form.

    My problem with this is that the alerts pop up one by one as the issues are caught. Is there a way to group all the alerts together in one pop up?

    2
    Alternatively:

    I've heard that alerts aren't really a good idea for client-side validation because users can disable them, so an error works much better. I can't, for the life of me figure out how to set up a javascript that pops up error messages as the issues arise (would be great to have them listed all at once as well).

    Please use the same html below to fix Question 2.

    Essentially, I'd like an error to pop up whenever any of the following occurs:
    - radio button group has no selection (please note: there is more than 1 radio group)
    - A text box is missing an entry

    Thanks so much in advance!

    Please note: I am a complete js noob and have been randomly patching up code from a variety of sources so the explanation would be helpful if it was simplified. haha thanks!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
         <head>
              <title>
                  Auto Insurance Form
              </title>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
              <script type="text/javascript">
    
              function validate(nForm){
    
    		var nTitle = nForm['title'];
    		var nFirstName = nForm['firstname'];
    		var nLastName = nForm['lastname'];
    		var nSex = nForm['sex'];
    		var nCol = nForm['col'];
    		var nTitle3 = nForm['title3'];
    		var nTitle4 = nForm['title4'];
    		if (nTitle.selectedIndex == 0)
    			{
    			 alert('Choose your title');
    			 return false;
    			}
    		if (nFirstName.value.replace(/\s/g, "").length < 1)
    			{
    			 alert('Enter your first name');	
    			 return false;
    			}
    		if (nLastName.value.replace(/\s/g, "").length < 1)
    			{
    			 alert('Enter your last name');	
    			 return false;
    			}
    		if (nSex[0].checked == false && nSex[1].checked == false)
    			{
    			 alert('Male or Female?');
    			 return false;
    			}
    		if (nCol[0].checked == false && nCol[1].checked == false)
    			{
    			 alert('Choose your age group');
    			 return false;
    			}
    		if (nTitle3.selectedIndex == 0)
    			{
    			 alert('Select the number of previous claims');
    			 return false;
    			}
    		if (nTitle4.selectedIndex == 0)
    			{
    			 alert('Estimate your annual mileage');
    			 return false;
    			}
    		alert('Thank you for your submission')
    		return true;
              }         
    
              </script>
              <style type="text/css">
    
              body {background-color: #fffacd; margin-top: 60px;}
              form {width: 620px; margin: auto; font-family: 'times new roman'; font-size: 12pt;}
              fieldset {width: 620px; padding-left: 10px; background-color: #eee8aa; border: 1px solid #e6b280;}
              legend {font-family: arial; font-size: 14pt; color: #000000; background-color: transparent; padding-top: 3px;
              padding-left: 3px; padding-right: 3px; margin-bottom: 5px;}
              .submitBtn {background-color: #fff8dc; border: 1px solid #000000; font-family: arial; font-size: 10pt;
              font-weight: bold; cursor: pointer; display: block; margin-left: auto; margin-right: auto; 
              margin-top: 5px; margin-bottom: 5px;}
    
              </style>
         </head>
    
         <body>
              <form action="" method="post" onsubmit="return validate(this)">
                   <fieldset>
                        <legend>Form</legend>
                        <table>
                             <tr>
                                  <td>
                                       Title
                                  </td>
                                  <td>
                                       <select class="select1col" name="title">
                                            <option>
                                                 Please select
                                            </option>
                                            <option value="MR">
                                                 Mr
                                            </option>
                                            <option value="MRS">
                                                 Mrs
                                            </option>
                                            <option value="MIS">
                                                 Miss
                                            </option>
                                            <option value="MS">
                                                 Ms
                                            </option>
                                            <option value="DR">
                                                 Dr
                                            </option>
                                            <option value="REV">
                                                 Reverend
                                            </option>
                                            <option value="SIR">
                                                 Sir
                                            </option>
                                       </select>
                                  </td>
                             </tr>
                             <tr>
                                  <td>
                                       First Name
                                  </td>
                                  <td>
                                       <input type="text" name="firstname">
                                  </td>
                             </tr>
                             <tr>
                                  <td>
                                       Last Name
                                  </td>
                                  <td>
                                       <input type="text" name="lastname">
                                  </td>
                             </tr>
                             <tr>
                                  <td></td>
                             </tr>
                             <tr>
                                  <td>
                                       Sex
                                  </td>
                                  <td colspan="2" class="center">
                                       <table border="0" cellspacing="0" cellpadding="0" align="left">
                                            <tr>
                                                 <td>
                                                      Male
                                                 </td>
                                                 <td>
                                                      <input type="radio" name="sex" value="M">&nbsp;
                                                 </td>
                                                 <td>
                                                      Female
                                                 </td>
                                                 <td>
                                                      <input type="radio" name="sex" value="F">
                                                 </td>
                                            </tr>
                                       </table>
                                  </td>
                             </tr>
                             <tr>
                                  <td>
                                       Age
                                  </td>
                             </tr>
                             <tr>
                                  <td>
                                       18-24
                                  </td>
                                  <td>
                                       <input type="radio" name="col" value="18-24">
                                  </td>
                             </tr>
                             <tr>
                                  <td>
                                       25 &amp; Over
                                  </td>
                                  <td>
                                       <input type="radio" name="col" value="25-34">
                                  </td>
                             </tr>
                        </table>
                        <hr>
                        Car Details
                        <hr>
                        <table>
                             <tr>
                                  <td>
                                       No of No Claims
                                  </td>
                                  <td>
                                       <select class="select1col" name="title3">
                                            <option value="">
                                                 Please select
                                            </option>
                                            <option>
                                                 1
                                            </option>
                                            <option>
                                                 2
                                            </option>
                                            <option>
                                                 3
                                            </option>
                                            <option>
                                                 4
                                            </option>
                                            <option>
                                                 5+
                                            </option>
                                       </select>
                                  </td>
                             </tr>
                             <tr>
                                  <td>
                                       Estimated Annual Mileage
                                  </td>
                                  <td colspan="2" class="center">
                                       <select class="select1col" name="title4">
                                            <option value="">
                                                 Please select
                                            </option>
                                            <option>
                                                 3000 or less
                                            </option>
                                            <option>
                                                 5000 or more
                                            </option>
                                       </select>
                                  </td>
                             </tr>
                             </table>
    			 <input type="submit" name="submit" value="Submit" class="submitBtn">
                   </fieldset>
              </form>
         </body>
    </html>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,901
    Thanks
    56
    Thanked 543 Times in 540 Posts
    Here is a relatively simple idea that may work for you:
    Set up an empty string at the start of the validate function and as errors are found, keep adding the error message to that string. At the end of the function if none are found the string will be empty and you can submit the form. If there are errors, write them to a div and block the submission:

    Code:
              function validate(nForm){
    
    		var nTitle = nForm['title'];
    		var nFirstName = nForm['firstname'];
    		var nLastName = nForm['lastname'];
    		var nSex = nForm['sex'];
    		var nCol = nForm['col'];
    		var nTitle3 = nForm['title3'];
    		var nTitle4 = nForm['title4'];
    		var err=""
    		if (nTitle.selectedIndex == 0)
    			{
    			 err+='Choose your title<br>'
    			}
    		if (nFirstName.value.replace(/\s/g, "").length < 1)
    			{
    			err+='Enter your first name<br>'
    			 			}
    		if (nLastName.value.replace(/\s/g, "").length < 1)
    			{
    			err+='Enter your last name<br>'
    			}
    		if (nSex[0].checked == false && nSex[1].checked == false)
    			{
    			err+='Male or Female?<br>'
    			}
    		if (nCol[0].checked == false && nCol[1].checked == false)
    			{
    			err+='Choose your age group<br>'
    						}
    		if (nTitle3.selectedIndex == 0)
    			{
    			err+='Select the number of previous claims<br>'
    						}
    		if (nTitle4.selectedIndex == 0)
    			{
    			err+='Estimate your annual mileage<br>'
    					}
    		if(err.length>0){
    		document.getElementById("errors").innerHTML=err;
    		return false;		
    				} else {
    		alert('Thank you for your submission')
    		return true;
    				}
              }         
    
              </script>

  • Users who have thanked xelawho for this post:

    myoozik (09-20-2012)

  • #3
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    This is great. Thanks xelawho!


  •  

    Posting Permissions

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