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

    Post JavaScript validation form code

    I need help with a JavaScript form validation code. I am using the form validation code that is found on this page: http://www.dynamicdrive.com/dynamici...uiredcheck.htm

    The code works fine for me, but what I'm trying to do is add an additional condition to it. Currently, I just have the code set up to check if the user has enter their name, email, and phone number. But I also need it to validate something else only if a specific condition is true. On my form I have 2 different sets of Radio lists. One is called Function and the other radio list is called Design. If the user selects an option on one of the 2 lists, then it will be required for the user to also select an option from the 2nd list. The user CAN decide not to select anything from either radio list, but can not select from one list and NOT from the other.

    This is the If statement that I created (don't know if its correct or how to insert it to my current validation code).

    Code:
    <script type="text/javascript">
    if (Function+Design<1 or == 400 or == 800)
      {document.write("Please select both a Function and Design Type");}
    </script>

  • #2
    New Coder
    Join Date
    Jun 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Good Afternoon, I believe I know what you're looking for.

    in your myforms.php file you'll want this :

    Code:
    <?php 
    $variable = check_input($_POST['variable'], "Alert Message Here");
    $variable2 = check_input($_POST['variable2'], "Alert Message Here");
    $variable3 = check_input($_POST['variable3'], "Alert Message Here");
    $variable4 = check_input($_POST['variable4'], "Alert Message Here");
    $variable5 = check_input($_POST['variable5'], "Alert Message Here");
    ?>
    <html>
    <head>
    </head
    etc....
    then in your 'body', you'll want to display the information you're attempting to validate. so you'll need to place the following :
    Code:
    Variable 1: <?php echo $_POST['Variable']; ?>
    Variable 2: <?php echo $_POST['variable2']; ?>
    Variable 3: <?php echo $_POST['variable3']; ?>
    Variable 4: <?php echo $_POST['variable4']; ?>
    Variable 5: <?php echo $_POST['variable5']; ?>
    After you've done this, it's always my practice to go ahead and trim any unnecessary parsed information.

    BELOW the </html> (yes below) place the following
    Code:
    <?php
    function check_input($data, $problem='')
    {
        $data = trim($data);
        $data = stripslashes($data);
        $data = htmlspecialchars($data);
    	if ($problem && strlen($data) == 0)
    	{
    		die($problem);
    	}
    	return $data;
    }
    
    function show_error($myError)
    {
    ?>
    	<html>
        <body>
        
        <b>Please Correct the following Error(s):</b><br />
        <?php echo $myError; ?>
        
        </body>
        </html>
    <?php
    exit();
    }
    ?>
    Best of luck.

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I need it in JavaScript, not PHP. My actual form page is in HTML, so I'm using JavaScript to validate fields on the form. After the data has pass the validation process it does then go to a PHP file. I do not need help with my PHP file, that works fine for me. What I need help with is the JavaScript code that I have on my HTML file where my form is located. Please go to the URL that I placed on my original post, so you can see the JavaScript code that I am working with.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Show your <form> code, esp. the two sets of radio buttons.

    No, your existing JS will do nothing at all.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    Feb 2010
    Posts
    44
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Code:
    var functionList = document.getElementById('myform').Function;;
    var designList = document.getElementById('myform').Design;
    var functionChecked = false;
    var designChecked = false;
    
    for(var i = 0; i < functionList.length; i++)
    {
      if(functionList[i].checked){
        functionChecked = true;
        break;
      }
    }
    for(i = 0; i < designList.length; i++)
    {
      if(designList[i].checked){
        designChecked = true;
        break;
      }
    }
    
    //if at least one was checked and one was not checked (equivalent to ONLY one group was checked)
    if( (functionChecked || designChecked) && (!functionChecked || !designChecked) )
    {
      alert('You need to choose something from the ' + (!functionChecked? 'Function' : 'Design') + ' radio group.');
    }
    Hopefully you can figure out where this code will go in order to do your validation... and obviously change the alert() to your preferred method of messaging the user.

    cheers

  • #6
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is my current code and the colored section is my current form validation code. I need to know how to change my current validation code to include the Radio lists validation option.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" language="JavaScript">
    <!--
    //-->
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_validateForm() { //v4.0
      var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
      for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
        if (val) { nm=val.name; if ((val=val.value)!="") {
          if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
            if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
          } else if (test!='R') { num = parseFloat(val);
            if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
            if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
              min=test.substring(8,p); max=test.substring(p+1);
              if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
        } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
      } if (errors) alert('The following error(s) occurred:\n'+errors);
      document.MM_returnValue = (errors == '');
      
    }
    //-->
    </script>
    
    </head>
    <body>
    <br><br><br>
    <form action="quoteform.php" method="post" name="quote" onSubmit="MM_validateForm('Name','','R','Email','','RisEmail','Phone','','R');return document.MM_returnValue">
            <table width="676" border="0" cellpadding="0" cellspacing="0">
            <tr> 
                <td width="120"><img src="images/xfmail.png" width="100" height="100"></td>
                <td rowspan="2" valign="middle">Please enter your name and contact 
                  information below. </td>
            </tr>
            
    		<tr>
                <td height="20" colspan="2"></td>
    			</tr>
    		
    		<tr>
                <td valign="top"><br>
    		<label><strong>Name:</strong></label>
                </td>
    			  
    			  
                <td valign="bottom">
    <input name="Name" type="text" size="40">
                </td>
    			  
    			  </tr>
            
    	
    		
    		<tr>
                <td valign="top"><br>
    		
    		
    	
    		<label><strong>Email:</strong></label>
                </td>
    		
    		    <td valign="bottom"> 
                  <input name="Email" type="text" size="40">
                </td>
    		
    		
    		</tr>
    		
    	<tr>
                <td valign="top"><br>
    		<label><strong>Phone:</strong></label>
                </td>
    			  
    			  
                <td valign="bottom">
    <input name="Phone" type="text" size="40">
                </td>
    			  
    			  </tr>
    			  
    			  
    			  <tr>
                <td valign="top"><br>
    		<label><strong>Website:</strong></label>
                </td>
    			  
    			  
                <td valign="bottom">
    <input name="Website" type="text" value="http://" size="40">
                </td>
    			  
    			  </tr>
    			  
    			<tr>
                <td height="20" colspan="2"></td>
    			</tr> 
    			
    			<tr> 
              <td width="676" height="1" background="images/1_li.gif" colspan="2"></td>
            </tr> 
    			  
    		<tr> 
                <td width="120"><img src="images/WindowBlinds.png" width="100" height="100"></td>
                <td rowspan="2" valign="middle">In the section below please enter 
                  the design and functionality details on the development of your 
                  site. </td>
            </tr>	  
    			<tr>
                <td height="20" colspan="2"></td>
    			</tr>  
    			  
    			<tr><td colspan="2">
    			
    			<table width="100%" border="0" cellspacing="0" cellpadding="0">
     <tr><td>
    			
    			<label><strong>Functionality of Site:</strong></label>
    			
    			</td>
    			
    			<td>
    			
    			<label><strong>Design Type:</strong></label>
    			
    			</td>
    			
    			</tr>  
    			<tr>
                <td height="20"></td> <td height="20"></td>
    			</tr>   
    			  
    		<tr>
                      <td valign="top"> 
                        <p>
                    <label>
                    <input type="radio" name="Function" value="2000">
                    Online Store</label>
                    <br>
                          <br>
                    <label>
                    <input type="radio" name="Function" value="1000">
                    Photo Gallery</label>
                    <br><br>
    				<label>
                    <input type="radio" name="Function" value="1000">
                    Blog</label>
                    <br><br>
    				<label>
                    <input type="radio" name="Function" value="500">
                    Informational</label>
                    <br><br>
    				<label>
                    <input type="radio" name="Function" value="1">
                    Other</label>
                    <br><br>
                  </p> </td>
    			  
    			  
    			  
    			      <td valign="top"> 
                        <p>
                    <label>
                    <input type="radio" name="Design" value="400">
                          Basic Site Design</label>
                    <br><br>
                    <label>
                    <input type="radio" name="Design" value="800">
                    Advanced Site Design</label>
                    <br><br>
                  </p> </td>
    			  
    			  
              </tr>	  
    </table>
    
    			
    			
    			
    			
    			 </td>
    			  
    			  
              </tr>	  
    			  
    		<tr>
                <td height="20" colspan="2"></td>
    			</tr> 	  
    			  
    			 
    			 <tr> 
              <td width="676" height="1" background="images/1_li.gif" colspan="2"></td>
            </tr> 
    			 
    			  
    		<tr> 
                <td width="120" align="center"><img src="images/share.png" width="100" height="100"></td>
                <td rowspan="2" valign="middle">In the section below please select any additional services that you would like to purchase. </td>
            </tr>	  
    			<tr>
                <td height="20" colspan="2"></td>
    			</tr>  	  
    		
    		<tr><td>
    		
    		<label><strong>Services:</strong></label>
    		
    		</td>
    		
    		<td>
    			  
    			  
    			  <label>
                  <input name="SEO" type="radio" value="200">
                  Basic Search Engine Optimization</label>
    			  
    			  
    			  <label>
                  <input name="SEO" type="radio" value="400">
                  Advanced Search Engine Optimization</label>
    			  
    			  <label>
                  <input name="LogoDesign" type="checkbox" value="300">
                  Logo Design</label>
    			  
    			   <label>
                  <input name="WebsiteMaintenance" type="checkbox" value="1">
                  Website Maintenance</label>
    			  
    			  <label>
                  <input name="Other" type="checkbox" value="1">
                  Other</label>
    			  
    			  </td>
    		
    		
    		</tr>
    		
    		
    		<tr>
                <td height="20" colspan="2"></td>
    			</tr>
    			
    			
    			<tr> 
              <td width="676" height="1" background="images/1_li.gif" colspan="2"></td>
            </tr> 
    			
    			<tr>
                <td height="20" colspan="2"></td>
    			</tr>
    		
    		<tr> 
                <td width="120"><img src="images/webhosting.jpg" width="100" height="100"></td>
                <td rowspan="2" valign="middle">Please enter your web hosting provider information here. </td>
            </tr>
            
    		<tr>
                <td height="20" colspan="2"></td>
    			</tr>
    		
    		<tr><td colspan="2">
    		
    		<table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
                <td valign="top"><br>
    		<label><strong>Web Hosting Provider:</strong></label>
                </td>
    			  
    			  
                <td valign="bottom">
    <input name="WebHostingProvider" type="text" size="40">
                </td>
    			  
    			  </tr>
            
    	
    		
    		<tr>
                <td valign="top"><br>
    		
    		
    	
    		<label><strong>Web Hosting Plan:</strong></label>
                </td>
    		
    		    <td valign="bottom"> 
                  <input name="WebHostingPlan" type="text" size="40">
                </td>
    		
    		
    		</tr>
    		
    	<tr>
                <td valign="top"><br>
    		<label><strong>Phone:</strong></label>
                </td>
    			  
    			  
                <td valign="bottom">
    <input name="WebHostingPhone" type="text" size="40">
                </td>
    			  
    			  </tr>
    			  
    			  
    			  <tr>
                <td valign="top"><br>
    		<label><strong>Website:</strong></label>
                </td>
    			  
    			  
                <td valign="bottom">
    <input name="WebHostingWebsite" type="text" value="http://" size="40">
                </td>
    			  
    			  </tr>
    </table>
    
    		
    		
    		
    		</td></tr>
    		
    		
    		
    		
    			<tr>
                <td height="20" colspan="2"></td>
    			</tr>
    		
    		
    		<tr> 
              <td width="676" height="1" background="images/1_li.gif" colspan="2"></td>
            </tr> 
    		
    		<tr>
                <td height="20" colspan="2"></td>
    			</tr>
    		
    		
    		<tr> 
                <td width="120"><img src="images/Notepad.png" width="100" height="100"></td>
                <td rowspan="2" valign="middle">Please enter any additional information here. </td>
            </tr>
            
    		<tr>
                <td height="20" colspan="2"></td>
    			</tr>
    		
    		
    		<tr><td colspan="2">
    		
    		
    		<label><strong>Additional Information:</strong></label>
    		
    		</td></tr>
    		
    		
    		<tr><td colspan="2" height="20"></td></tr>
    		
    		
    		
    		<tr><td colspan="2">
    		
    		
    		<textarea name="AdditionalInformation" cols="70" rows="10"></textarea>
    		
    		</td></tr>
    		
    		
    		
    		<tr>
                <td height="20" colspan="2"></td>
    			</tr>
    		
    		
    		<tr> 
              <td width="676" height="1" background="images/1_li.gif" colspan="2"></td>
            </tr> 
    		
    		<tr>
                <td height="20" colspan="2"></td>
    			</tr>
    		
    		
    		<tr> 
                <td width="120"><img src="images/verifyandsend.png" width="100" height="100"></td>
                <td rowspan="2" valign="middle">Please enter the verification code 
                  and click on the submit button. </td>
            </tr>
            
    		<tr>
                <td height="20" colspan="2"></td>
    			</tr>
    		
    		<tr><td colspan="2">
    			
    			<input name="Submit" type="submit" id="Submit" value="Submit">
                  <input type="reset" name="Reset" value="Reset"> </td>
    			
    			
    			
    			</tr>  
    			
    		
    		
          </table></form>
    <br><br>
     </body>
    </html>

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Do yourself a *BIG* favor and stop using DumbWhacker for doing validation. DoofusWhomper (oh, okay, DreamWeaver) produces perhaps the worst (and most ancient!) JavaScript code of any tool out there.

    DW's email validation code is so weak that it accepts an email address of (for example) "x@y" or even " @ ". And for ordinary text fields, it accepts even a single space as valid.

    It's just plain worthless validation.

    Almost any validator you find online will be better than that. And the good ones can be really quite good.

    SkyChan's basic code for validating radio buttons and/or requiring at least one of a group of checkboxes to be checked is okay, but it really ought to be converted into a function. And should be modified to handle the case of single checkboxes, too.

    I could rewrite the entire validation for you, but I think you should do some basic research first. You might well find a *good* validator that will do all you want.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    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
    •