I have a form that I use for people to contact me on my website. I have been using server-side php form validation which has been working as it should. I decided to implement java script client-side validation using the jquery validation plug in.

Ever since I added the client-side validation, I can no longer submit a form, nor will it display the php validation errors when i hit submit. As far as I'm concerned nothing should have changed.

I am still learning php, and would appriciate it if someone could lend a fresh eye to see if they can catch where I am going wrong here. Sorry for the long code, but I didn't want to leave something out that is needed. The url to see what is hapening is www.schuettcompsolutions.com/contact2 -Thanks in advance!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- *Credit* - Thanks to Kellan Stec for helping me with the PHP form-->

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <title>Schuett Computer Solutions</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="keywords" content="scs, schuett computer solutions, dana schuett, computer repair, computer repair omaha, computer repair omaha ne, computer repair omaha nebraska, computer cons
ulting, computer consulting omaha, computer consulting omaha nebraska, computer solutions, computer solutions omaha, computer solutions omaha ne, computer solutions omaha nebraska, computer help, c
omputer help omaha, computer help omaha ne, computer help omaha nebraska " />
        <meta name="description" content="Schuett Computer Soutions. Independent Computer Consulting." />
        <link href="/scripts/style.css" rel="stylesheet" type="text/css" />
        <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">

        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="validate.js"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
                phone_number = phone_number.replace(/\s+/g, "");
                return this.optional(element) || phone_number.length > 9 &&
                phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
            }, "Please specify a valid phone number");

           $("#form").validate();
            });
        </script>


        <script type="text/javascript">
        var RecaptchaOptions = {
        theme : 'clean'
        };
        </script>

        <script type="text/javascript">

        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-17454772-6']);
        _gaq.push(['_trackPageview']);

        (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();

        </script>

        <style type="text/css">
            body { font-family: Arial; font-size: 12px; }
            fieldset { border:0; }
            label { display: block; width: 90px; float:left; clear:both; margin-top:10px; color:black;}
            label em { display: block; float: right; padding-right:8px; color:red; }
            label strong { display: block; float: left; padding-left:8px; color:red; }
            textarea, input { float:left; width: 220; padding; 2px; }
            textarea { height: 180px; width: 190px;}
            #submit { margin-left: 333x; clear:both; width:100px; }
            label.error { float: left; color: red; clear:none; width:190px; padding-left: 10px: font-size: 11px; }
            .required_msg { margin-left: 5px; float:left; color: red; }
            .captcha { padding-left: 0px; clear:both; float:left;}
        </style>

</head>

<body>
      <?php

  require_once('recaptchalib.php');
  $publickey = "6LeRpLsSAAAAAKdKEM4iandvEcS8xYAmPzQp5tav"; // you got this from the signup page
  $privatekey = "6LeRpLsSAAAAAL3BNby7ra-NpLglcuyeDg1ox_a2";
  $resp = recaptcha_check_answer ($privatekey,
                                $_SERVER["REMOTE_ADDR"],
                                $_POST["recaptcha_challenge_field"],
                                $_POST["recaptcha_response_field"]);
      ?>

        <div id="wrapper">

        <div id="nav">
                <ul>
                <li><a href="/">home</a></li>
                <li><a href="/services">services</a></li>
                <li><a href="/testimonials">testimonials</a></li>
                <li><a href="/about">about</a></li>
                <li class="lastchild"><a href="/contact"><font color="#FFFFFF">contact</a></li></font>
                </ul>
        </div><!-- end nav -->

        <h2 id="currenttitle"><img src="/images/services.png" width="224" height="28" alt="Services" /></h2>
        <div id="body">

                <div id="current">
                        <img src="/images/logo.jpg" width="235" height="396" alt="logo" />
                        <div class="nav">
                        <ul>
                        <li>Wired &amp; Wireless Networks</li>
                        <li>Data Backup &amp; Recovery</li>
                        <li>Virus &amp; Malware Removal</li>
                        <li>Hardware Replacement</li>
                        <li>Network &amp; Internet Security</li>
                        <li>Custom PC Builds</li>
                        <li class="readmore"><a href="/services">More Services</a></li>
                        </ul>

                </div><!-- end .nav -->

                <div id="current2">
                <div class="nav2">
                      <ul>
                        <li class="clean"><b>Contact Info</b></li>
                        <li><b>Dana Schuett</b></li>
                        <li><b>Phone:</b> 402.833.8000</li>
                        <li><b>E-mail: </b><a href="mailto:d.schuett@gmail.com">d.schuett@gmail.com</a></li>
                        </li>
                     </ul>
                </div>
                </div>
                </div><!-- end current -->


                <div id="content">
                        <h2><img src="/images/contact.gif" width="450" height="37" alt="Contact" /></h2>
                        <div class="contentform">



      <?PHP

      require_once "formvalidator.php";

      $error_hash='no';

      $show_form=true;

      if(isset($_POST['Submit']))

      {

          $validator = new FormValidator();

          $validator->addValidation("Name","req","<B>Please provide a Name</B>");

          $validator->addValidation("Email","email","<B>The input for Email should be a valid Email address</B>");

          $validator->addValidation("Email","req","<B>Please provide an  Email</B>");

          $validator->addValidation("Message","req","<B>Please provide a Message</B>");

          if($validator->ValidateForm())

          {
              $show_form=false;
          }

          else

          {

              echo "<font color='#CC0000'><B>&nbsp; Validation Errors:</B></font>";



              $error_hash = $validator->GetErrors();

              foreach($error_hash as $inpname => $inp_err)

              {

                echo "<p/>&nbsp;&nbsp; $inpname : $inp_err</p>\n";
                $show_form=true;

              }

      }

        if($show_form===false)
        {


              if (!$resp->is_valid && $show_form===false)
              {
                $message = '&nbsp; CAPTCHA - word verification was incorrect.<br /><br />';

                $show_form=true;

              }
              else
              {

               $message = '&nbsp;&nbsp;&nbsp;Thank you! Your message has been sent successfully.<br /><br />
                           &nbsp;&nbsp;&nbsp;You will be redirected to the home page in a few moments...<br /><br />';



        // Grab the form vars
        $Name=$_POST['Name'];
        $Email=$_POST['Email'];
        $Phone=$_POST['Phone'];
        $Message=$_POST['Message'];

        $mail_body = "Name: ".$_POST['Name']."\r\n";
        $mail_body .= "Email: ".$_POST['Email']."\r\n";
        $mail_body .= "Phone: ".$_POST['Phone']."\r\n";
        $mail_body .= "Message: ".$_POST['Message']."\r\n";
        $recipient = "d.schuett@gmail.com";
        $subject = "Online SCS Contact";

        $header = "From: ". $Name . " <" . $Email . ">\r\n"; //optional headerfields

        mail($recipient, $subject, $mail_body, $header); //mail command

        //page redirect to home
        echo "<meta http-equiv=\"refresh\" content=\"7;url=";
        echo "http://www.schuettcompsolutions.com\" />";

              }

        echo "<font color='#CC0000'><B>$message</B></font>";

        }

        }
        if(true == $show_form)
        {

      ?>

        <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
         <tr>
           <td colspan="3" class="formhead"><hr width="100%"></hr><img src="/images/comp2.png" style="float:left; margin-left: 4px; margin-right: 5px;" />Have a question, computer problem, concern, or want to setup an appointment? Email me below!<br />
           <hr width="100%"></hr></td>
         </tr>
        </table>


        <form action="" method="POST" name="contactForm" id="form" accept-charset='UTF-8'>
          <fieldset>

                <label for="name">Name: <em>*</em></label>
                <input type="text" name="Name" id="Name" class="required" value="<?php echo $_POST['Name'];?>">

                <label for="email">Email: <em>*</em></label>
                <input type="text" name="Email" id="Email" class="required email" value="<?php echo $_POST['Email'];?>">

                <label for="phone">Phone: <em>*</em></label>
                <input type="text" name="Phone" id="Phone" class="required phoneUS" value="<?php echo $_POST['Phone'];?>">

                <label for="comments">Message:</label>
                <textarea name="Message" id="Message" class="required"><?php echo $_POST['Message'];?></textarea>
          </fieldset>
                <p class="captcha"><?php echo recaptcha_get_html($publickey);?></p>
                <label for="reg"><strong> *</strong> required fields</label>
          <fieldset>
                <input type="submit" name="submit" id="submit" value="Submit">&nbsp;&nbsp;<input type="reset" value="Reset">
          </fieldset>
        </form>

<?PHP
}//true == $show_form
?>

        </div><!-- end .contentbox -->
        </div><!-- end content -->
                <div class="clear"></div>
        </div><!-- end body -->

        <div id="footer" class="clear">
        <div id="copyright">&copy; 2010 Schuett Computer Solutions</div>
        </div><!-- end footer -->

        </div><!-- end wrapper -->
</body>
        <div id="face-follow">
             <a href="http://www.facebook.com/pages/Omaha-NE/Schuett-Computer-Solutions/144205642260624?ref=ts&__a=11" TARGET="_blank"><img src="/images/fbook.gif" alt="Add SCS on Facebook" /></a>      </div>

        <div id="remote-connect">
            <a href="/tools/remote.exe"><img src="/images/remote2.gif" title="Click here when directed" alt="Remote Assistance" /></a>
        </div>
</html>

change: <input type="submit" name="submit" id="submit" value="Submit"> to: <input type="submit" name="Submit" id="Submit" value="Submit"> uppercase "S" for the name and id. Do not use lower case since it is reserved for javascript.

As for your problem (with the current submit button), it is on line 138. Change the input field as suggested above and leave line 38 as it currently is.

Makes complete sense, and I feel dumb because I have actually done this one other time. I'm glad it was something small though; everything is working as it should! Thanks for your time and help!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.