1 Reply Latest reply on Jun 16, 2008 7:52 AM by Lucy4

    form security

    Lucy4 Level 1
      I wonder if somebody could please help me. I came across this tutorial ([url]http://www.sitepoint.com/article/toughen-forms-security-image[/url]) and want to add it into a site I'm working on. It shows up on the site, but doesn't work.

      The form is:

      ]<form method="post" action="{url_main}join.php?cmd=login" id="login-f" class="clearfix">
      <div id="join" style=" text-align: left; padding-bottom: 19px; padding-left: 10px; background-image: url({url_tmpl_main}images/login_bottom.jpg); background-repeat: no-repeat;"><br />
      <label for="username">{l_username}:</label><input name="user" type="text" id="login" tabindex="1" /><br />
      <label for="password">{l_password}: </label><input name="password" type="password" tabindex="2" /><br />
      <p><input name="remember" type="checkbox" id="remember" class="chk" value="1" type="checkbox" style="width: 14px; margin-right: 5px; margin-left: 53px;"> <label for="remember">{l_remember_me}</label>| <a href="{url_main}forget_password.php?">{l_forgot_password}</a><input type="submit" value="" class="button-login" style="width: 29px; margin-left: 60px; padding-right: 5px; border: 0px; cursor: pointer; cursor: hand;" /></p>
      </div>
      </form>
      </td><td width="2%"> 
      </td><td width="45%" align="right" valign="top">
      <!-- begin_join -->
      <?php
      // check for posted form
      if (isset($_POST['login'])) {
      // see if the code the user typed matched the generated code
      if (strtoupper($_POST['code']) == $_SESSION['code']) {
      header("location: jointest.php");
      } else {
      echo 'You have entered the wrong code. Please try again</a>.';
      }
      } else {
      ?> <form name="JoinForm" method="post" action="{url_main}join.php" onsubmit="return validateJoinForm();">

      <div class="signup_header_big" style="padding-top: 15px; padding-right: 14px; text-align: right; background-image: url({url_tmpl_main}images/join_top.jpg); background-repeat: no-repeat;">Sign up for free! </div>
      <div id="join" style="padding-bottom: 10px; padding-top: 5px; background-image: url({url_tmpl_main}images/join_content.jpg);">
      <div style="color: #FF0000; font-weight: bold; font-size: 11px; padding-right: 10px;">{join_message}</div><br />
      <label for="username">{l_username}:</label><input type="text" id="username" name="join_handle" value="{join_handle}" /><br />
      <label for="create-password">{l_create_password}:</label><input type="password" id="create-password" name="join_password" value="{join_password}" /><br />
      <label for="re-password">{l_reenter_password}:</label><input type="password" id="re-password" name="verify_password" value="{join_password}" /><br />
      <label for="email">{l_email}:</label><input type="text" id="email" name="email" value="{email}" /><br />
      <label for="re-email">{l_reemail}:</label><input type="text" id="re-email" name="verify_email" value="{email}" /><br />
      <label for="iam">{l_i_am}:</label>
      <select name="orientation" id="iam">
      {orientation_options}
      </select>
      <br />
      <label for="from">{l_from}:</label>
      <select name="country" id="from">
      <option value="-1" selected="selected">{l_country_select}</option>
      {country_options}
      </select>
      <br />
      <label for="month">{l_born_on}:</label>
      <select name="month" id="month" onchange="updateDay('month','JoinForm','year','month','day')">
      {month_options}
      </select>
      <select name="day" id="day">
      {day_options}
      </select>
      <select name="year" id="year" onchange="updateDay('year','JoinForm','year','month','day')">
      {year_options}
      </select>
      <br />
      </div>
      <div id="security"><img src="../../../Code/security-image.php?width=180" width="180" height="60" alt="Security Image" /></div>
      <label for="code">Security Image:</label><input type="text" name="code" id="code" value="" />
      </div>
      <div id="terms" style="padding-right: 10px; width: 352px; background-image: url({url_tmpl_main}images/join_content.jpg);"><input name="privacy_policy" type="checkbox" value="true" id="agree" checked> <label for="agree"> {l_i_agree} <a href="java script:winpop('{url_tmpl_main}popup/term_cond.html','960','600','yes');">{l_terms_and_con ditions}</a> and <a href="java script:winpop('{url_tmpl_main}popup/priv_policy.html','960','600','yes');">{l_privacy_pol icy}</a> <br /></label></div><div id="terms" style="padding-right: 10px; height: 50px; width: 352px; background-image: url({url_tmpl_main}images/join_bottom.jpg); background-repeat: no-repeat;"><input type="button" value="" onclick="submitJoinForm();" class="button-join" style=" margin-right: 13px; margin-top: 5px; cursor: pointer; cursor: hand;" />
      </form>
        • 1. form security
          Lucy4 Level 1

          and it has a JavaScript validator which is:

          <script language="JavaScript" type="text/javascript">
          function onValidateJoinForm() {
          var form = document.forms['JoinForm'];
          if (!(validateRequiredField(form['join_handle'], '{l_username}'))) {
          return false;
          }
          if (!(validateMinLength(form['join_handle'], '{l_username}','4'))) {
          return false;
          }
          if (!(validateMaxLength(form['join_handle'], '{l_username}','20'))) {
          return false;
          }
          if (!(validateAlphaNumeric(form['join_handle'], '{l_username}'))) {
          return false;
          }
          if (!(validateRequiredField(form['join_handle'], '{l_username}'))) {
          return false;
          }
          if (!(validateMinLength(form['join_handle'], '{l_username}','4'))) {
          return false;
          }
          if (!(validateMaxLength(form['join_handle'], '{l_username}','20'))) {
          return false;
          }
          if (!(validateAlphaNumeric(form['join_handle'], '{l_username}'))) {
          return false;
          }
          if (!(validateRequiredField(form['join_password'], '{l_password}'))) {
          return false;
          }
          if (!(validateMinLength(form['join_password'], '{l_password}','6'))) {
          return false;
          }
          if (!(validateMaxLength(form['join_password'], '{l_password}','15'))) {
          return false;
          }
          if (!(validateAlphaNumeric(form['join_password'], '{l_password}'))) {
          return false;
          }
          if (!(validateRequiredField(form['join_password'], '{l_password}'))) {
          return false;
          }
          if (!(validateMinLength(form['join_password'], '{l_password}','6'))) {
          return false;
          }
          if (!(validateMaxLength(form['join_password'], '{l_password}','15'))) {
          return false;
          }
          if (!(validateAlphaNumeric(form['join_password'], '{l_password}'))) {
          return false;
          }
          if (!(validateNotTwoFields(form['join_password'],'{l_password}',form['join_handle'],'{l_user name}'))) {
          return false;
          }
          if (!(validateTwoFields(form['verify_password'],'{l_verify_password}',form['join_password'], '{l_password}'))) {
          return false;
          }
          if (!(validateRequiredField(form['email'], '{l_email_address}'))) {
          return false;
          }
          if (!(validateMaxLength(form['email'], '{l_email_address}','100'))) {
          return false;
          }
          if (!(validateEmailField(form['email'], '{l_email_address}'))) {
          return false;
          }
          if (!(validateRequiredField(form['verify_email'], '{l_verify_email}'))) {
          return false;
          }
          if (!(validateMaxLength(form['verify_email'], '{l_verify_email}','100'))) {
          return false;
          }
          if (!(validateEmailField(form['verify_email'], '{l_verify_email}'))) {
          return false;
          }
          if (!(validateTwoFields(form['verify_email'],'{l_verify_email}',form['email'],'{l_email_addr ess}'))) {
          return false;
          }
          if (!(validateRequiredSelect(form['orientation'],'{l_orientation}','00'))) {
          return false;
          }
          if (!(validateRequiredField(form['orientation'], '{l_orientation}', '00'))) {
          return false;
          }
          if (!(validateRequiredSelect(form['country'],'{l_country}','-1'))) {
          return false;
          }
          if (!(validateRequiredField(form['country'], '{l_country}', '-1'))) {
          return false;
          }
          if (!(validateRequiredField(form['month'], '{l_month}'))) {
          return false;
          }
          if (!(validateRequiredField(form['day'], '{l_day}'))) {
          return false;
          }
          if (!(validateRequiredField(form['year'], '{l_year}'))) {
          return false;
          }
          if (!(validateRequiredCheckbox(form['privacy_policy'],'','{l_agree_privete_policy}'))) {
          return false;
          }
          return true;
          }

          function validateJoinForm() {
          blockSubmission = true;
          if (typeof beforeJoinFormValidation != 'undefined') {
          beforeJoinFormValidation();
          }
          var validated = onValidateJoinForm();
          if (validated && (typeof uponSuccessfulJoinFormValidation != 'undefined')) {
          validated = uponSuccessfulJoinFormValidation();
          }
          else if (!validated && (typeof uponUnsuccessfulJoinFormValidation != 'undefined')) {
          uponUnsuccessfulJoinFormValidation();
          }
          if (!validated) {

          }
          return validated;
          }

          function submitJoinForm() {
          if (validateJoinForm()) document.JoinForm.submit();
          else return false;
          }
          </script>

          I can't see any reason why the form isn't working so would be grateful for any help.

          I don't know how to do this but I think that what needs to happen is the JS validator needs to check the security image somehow then send the results.

          Thanks