JQuery Forms Validation for OSCommerce

JQuery Forms Validation for OSCommerce allows users to recieve error messages ‘on the fly’ as they fill out forms on OSCommerce, without having to wait for page submit and refresh. In addition the error message appears on the field that is incorrectly filled out. Jquery provides unique messages for simple text forms, login, password and email forms. This replaces the older original OSCommerce javascript popup messages, but works alongside and in conjunction with the OSCommerce php messagestack-> function.

adapted from: Bassistance:Jquery Validation Plugin

See screenshots below:

Installation

1) Upload these files to the folder catalog/js on your website:
jquery.login.js

jquery.validate.js

jquery.js or jquery.min.4.2.js
(note:If you are already using Jquery on your site, you probably already have one of these two files installed. Only one is needed.)

-Links to the files jquery.validate.js and jquery.js can be found on the Bassistance site –


2) Place these references in the head of the catalog page that contains the form to validate. For example, login.php and account_password.php. If you are using OSC to CSS , this would look like:

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jquery.login.js" type="text/javascript"></script>
<?php require(DIR_WS_INCLUDES . 'template-top.php'); ?>

(placing it just above the reference to template-top in login.php places these references just above the closing head tag, </head>, but only on login.php.)


3) Place this CSS selector in your stylesheet. Style as desired:

/*jquery validation errors*/
label.error {
/* remove the next line when you have trouble in IE6 with labels in list */
color: red;
font-style: italic;
font-family: 'lucida grande', helvetica, verdana, arial, sans-serif
}


4) Add these id and classes to the forms and text fields on the forms to validate, for example here in login.php and account_password.php.
On login.php

  1. find:
    <?php echo tep_draw_form('login', tep_href_link(FILENAME_LOGIN, 'action=process', 'SSL')); ?>
    Change to:
    <?php echo tep_draw_form('login', tep_href_link(FILENAME_LOGIN, 'action=process', 'SSL'),'post','id="signupForm"'); ?>
  2. find:
    <?php echo tep_draw_input_field('email_address'); ?>
    change to:
    <?php echo tep_draw_input_field('email_address','','class="required email" '); ?>
  3. find:
    <?php echo tep_draw_password_field('password'); ?>
    change to:
    <?php echo tep_draw_password_field('password','','id="password"'); ?>

On account_password.php>

  1. find:
    <?php echo tep_draw_form('account_password', tep_href_link(FILENAME_ACCOUNT, '', 'SSL')', 'onSubmit="return check_form(account_password);"') . tep_draw_hidden_field('action', 'process'); ?>
    Change to:
    <?php echo tep_draw_form('account_password', tep_href_link(FILENAME_ACCOUNT_PASSWORD, '', 'SSL'), 'post','id="passwordForm"', 'onSubmit="return check_form(account_password);"') . tep_draw_hidden_field('action', 'process'); ?>
  2. find:
    <?php echo tep_draw_password_field('password_current')
    change to:
    <?php echo tep_draw_password_field('password_current','','class="required"')
  3. find:
    <?php echo tep_draw_password_field('password_new')
    change to:
    <?php echo tep_draw_password_field('password_new','','id="password_new" ')
  4. find:
    <?php echo tep_draw_password_field('confirmation')
    change to:
    <?php echo tep_draw_password_field('confirmation','','id="confirmation" ')


The Jquery file jquery.validate.js also has ‘rules’ and classes for credit card fields and more. Using the pattern above, you can easily adapt JQuery forms validation to contact.php, create_account.php, account_edit.php, checkout_payment.php and other OSCommerce pages that use text forms, or even checkbox and drop-down menus. For a complete set of examples, demos and necessary files visit Bassistance:Jquery Validation Plugin