<<BACK    HOME    CNCPT    TTRL    JSsf.net/projects/validateformjs[ U | s | m | ? ]
   rqd dec eml int len mcr bss trm sifAll Concepts
   frm txt pwd txa rdo sl1 chk slmAll Object Types

validate_form.js
Tutorial  [8/8]: Realistic Usage

[<<  <  >  >>]     view the code

Your job: Create a page so internet users can sign up for your company's online services.

This is a realistic usage of validate_form.js, putting it all together. Turn on diagnostics on by adding '?vfpd' to the url.

Sign up for our website, woodjuh. * marks required fields.


* First name
* Last name
* Address
* City
*
* Zip
* Phone
  Fax
* Email
* Username
* Password (must be at least six characters in length)
* Password confirm
Yes No * Sign me up for your email newsletter

TOP     The code [8/8]   (try it)     [<<  <  >  >>]

 
 

<HTML><HEAD>

<SCRIPT LANGUAGE="JavaScript1.3" SRC="../../../js_uncompressed/validate_form.js" TYPE="text/javascript"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.3">
//<!---
   loadVF('../../../js_uncompressed/', "../../../secondary_js/si_fmt_CONFIGURATION_default.js", false);
   configVF("CIBC_OFF", -1);
   configVFPD("OFF", "CIBC_OFF", "NO_ON_LNK",
      "OFF_LNK", "RESET_LNK", "SUCCESS_DDB", "CIBC_SCTN", "CIBC_CRSH_DDB",
      [5, 1, 2, 3, 4, 6, 7, 8, 9, 10, 15], ['RESET', 'Good', 'Bad', 'ClearSignup']);

   function submitGoodValues(f_orm)  {
      //REQUIRED
         f_orm.first_name.sMsgRequired= 'What is your first name?';
         f_orm.last_name.sMsgRequired=  'What is your last name?';
         f_orm.address.sMsgRequired= 'What is your address?';
         f_orm.city.sMsgRequired= 'What is your city?';
         f_orm.state.sMsgRequired= 'What is your state?';
         f_orm.zip.sMsgRequired= 'What is your zip code?';
         f_orm.phone.sMsgRequired= 'What is your phone number?';
         f_orm.email.sMsgRequired= 'What is your email address?';
         f_orm.username.sMsgRequired= 'What username do you want to register as?';
         f_orm.password.sMsgRequired = 'What password would you like to use?';
         f_orm["signup_email_nwsltr.sMsgRequired"] = 'Do you want to recieve our email newsletter?';

      //SPECIAL STRING TYPES
         f_orm.zip.sMsgTxtZip5p4 = 'A valid zip code contains exactly five or nine digts, where at least one digit is non-zero.';
         f_orm.phone.sMsgTxtPhone10 = 'A valid phone number contains exactly ten digits.';
         f_orm.fax.sMsgTxtPhone10 = 'A valid fax number contains exactly ten digits.';
         f_orm.email.sMsgTxtEmail = 'Email address is invalid.';
         f_orm.password.sMsgBadLength = 'The password must be at least six characters in length.';
            f_orm.password.iMinLength = 6;

         f_orm.asGlobalBadSubStrs = ["\\", "'"];
         var sBSSPost = " contains at least one of the following illegal items:  ['" + f_orm.asGlobalBadSubStrs.join("', '") + "']";
            f_orm.first_name.sMsgBadSubStr = "First name" + sBSSPost;
            f_orm.last_name.sMsgBadSubStr = "Last name" + sBSSPost;
            f_orm.address.sMsgBadSubStr = "Address" + sBSSPost;
            f_orm.city.sMsgBadSubStr = "City" + sBSSPost;
            f_orm.email.sMsgBadSubStr = "Email address" + sBSSPost;
            f_orm.username.sMsgBadSubStr = "Username" + sBSSPost;
            f_orm.password.sMsgBadSubStr = "Password" + sBSSPost;

            f_orm.password_confirm.bsNoBadSubStrs = 'true';

      var sErrors = getFormErrorMsgs(f_orm, '   - ');


      //SPECIAL RULE
         if(f_orm.password.value != f_orm.password_confirm.value)  {
            sErrors += '\n   - Passwords do not match.';
         }

      if(sErrors)  {
         alert('OOPS!\n\n' + sErrors);
         return false;

      }  else if(!doSubmitOnSuccess(f_orm))  {
         alert('HOORAY!\n\nForm would be submitted successfully.\n\n(Not submitted because Permanent VF Diagnostics are on and doSubmitOnSuccess(f_orm) equals false.)');
         return false;

      }  else  {
         return true;
      }
   }

   //Permanent vf-diagnostic testing values...START
      function vfpdtf__RESET()  {
         var f = document.web_reg;
         f.salutation.selectedIndex = 0;
         f.first_name.value = '';
         f.last_name.value = '';
         f.address.value = '';
         f.city.value = '';
         f.state.selectedIndex = 0;
         f.zip.value = '';
         f.phone.value = '';
         f.fax.value = '';
         f.username.value = '';
         f.email.value = '';
         f.password.value = '';
         f.password_confirm.value = '';
         f.signup_email_nwsltr[0].checked = false;
         f.signup_email_nwsltr[1].checked = false;
      }

      function vfpdtf__Good()  {
         var f = document.web_reg;
         f.salutation.selectedIndex = 0;
         f.first_name.value = 'Jane';
         f.last_name.value = 'Doe';
         f.address.value = '123 Sesame Street';
         f.city.value = 'Burbank';
         f.state.selectedIndex = 5;
         f.zip.value = '87878';
         f.phone.value = '(878)  938-8478';
         f.fax.value = '';
         f.email.value = 'bla@bla.com';
         f.username.value = 'my_username';
         f.password.value = 'blablabla';
         f.password_confirm.value = 'blablabla';
         f.signup_email_nwsltr[0].checked = false;
         f.signup_email_nwsltr[1].checked = true;
      }

      function vfpdtf__Bad()  {
         var f = document.web_reg;
         f.salutation.selectedIndex = 0;
         f.first_name.value = '';
         f.last_name.value = '';
         f.address.value = '';
         f.city.value = "Slash \\\\ single-quote ' city";
         f.state.selectedIndex = 0;
         f.zip.value = 'Not nearly a zip code';
         f.phone.value = '302  777 097';
         f.fax.value = '(302) 777-09718098[98[98[';
         f.email.value = '';
         f.username.value = '';
         f.password.value = 'blab';
         f.password_confirm.value = '';
         f.signup_email_nwsltr[0].checked = false;
         f.signup_email_nwsltr[1].checked = false;
      }

      function vfpdtf__ClearSignup()  {
         document.web_reg.signup_email_nwsltr[0].checked = false;
         document.web_reg.signup_email_nwsltr[1].checked = false;
      }
   //Permanent vf-diagnostic testing values...END
//--->
</SCRIPT>

</HEAD><BODY onLoad="completeVFLoad();">


<SCRIPT LANGUAGE="JavaScript1.3">
//<!---
   wrtVFPDToolbar();
   document.write('Sign up for our website, woodjuh.  <I><B>*</B> marks required fields.</I></P>');
//--->
</SCRIPT>
      <FORM NAME="web_reg" onSubmit="return submitGoodValues(this);" METHOD="post">
         <SELECT NAME="salutation">
            <OPTION VALUE="" SELECTED>--  Salutation  --</OPTION>
            <OPTION VALUE="dr">Dr.</OPTION>
            <OPTION VALUE="mrs">Mrs.</OPTION>
            <OPTION VALUE="ms">Ms.</OPTION>
            <OPTION VALUE="miss">Miss</OPTION>
            <OPTION VALUE="mr">Mr.</OPTION>
         </SELECT>

         <BR><INPUT TYPE="text" NAME="first_name" MAXLENGTH="100" size="20"> * First name
         <BR><INPUT TYPE="text" NAME="last_name" MAXLENGTH="100" size="20"> * Last name
         <BR><INPUT TYPE="text" NAME="address" MAXLENGTH="100" size="20"> * Address
         <BR><INPUT TYPE="text" NAME="city" MAXLENGTH="100" size="20"> * City

         <BR><SELECT NAME="state">
            <OPTION VALUE="" SELECTED>-- State --</OPTION>
            <OPTION VALUE="al">Alabama</OPTION>

            <OPTION VALUE="ak">Alaska</OPTION>
            <OPTION VALUE="az">Arizona</OPTION>
            <OPTION VALUE="ar">Arkansas</OPTION>
            <OPTION VALUE="ca">California</OPTION>
            <OPTION VALUE="co">Colorado</OPTION>
            <OPTION VALUE="ct">Connecticut</OPTION>
            <!-- The rest of the states... -->
         </SELECT> *

         <BR><INPUT TYPE="text" NAME="zip" MAXLENGTH="100" size="20"> * Zip
         <BR><INPUT TYPE="text" NAME="phone" MAXLENGTH="100" size="20"> * Phone
         <BR><INPUT TYPE="text" NAME="fax" MAXLENGTH="100" size="20"> &nbsp; Fax

         <BR><INPUT TYPE="text" NAME="email" MAXLENGTH="100" size="20"> * Email
         <BR><INPUT TYPE="text" NAME="username" MAXLENGTH="100" size="20"> * Username
         <BR><INPUT TYPE="password" NAME="password" MAXLENGTH="100" size="20"> * Password (must be at least six characters in length)
         <BR><INPUT TYPE="password" NAME="password_confirm" MAXLENGTH="100" size="20"> * Password confirm
         <BR>Yes <INPUT TYPE="radio" NAME="signup_email_nwsltr" VALUE="yes">  No  <INPUT TYPE="radio" NAME="signup_email_nwsltr" VALUE="no">  * Sign me up for your email newsletter


         <P><INPUT TYPE="Submit" VALUE="Register Me">
      </FORM>


</BODY></HTML>































SourceForge.net Logo

Copyright (C) 2003-2005, Jeff Epstein.   All rights reserved.