Magento come with a great form validator : VarienForm. These is a lot of existing validator, for every usage and you can easyly add some. This is how you can do it with a commun example, how to check RIB bank account.
First, our html code
<ul class="inlineblockli"> <li> <label for="code_bank_pb"><?php echo $this->__('bank code') ?></label> <input type="text" class="inputText inputTextB validate-digits required-entry validate-length minimum-length-5 maximum-length-5" id="code_bank_pb" maxlength="5" name="prelevement[code_bank_pb]"> </li> <li> <label for="code_guichet_pb"><?php echo $this->__('branch code') ?></label> <input type="text" class="inputText inputTextB validate-digits required-entry validate-length minimum-length-5 maximum-length-5" id="code_guichet_pb" maxlength="5" name="prelevement[code_guichet_pb]"> </li> <li> <label for="num_compte"><?php echo $this->__('Account number to be debited') ?></label> <input type="text" class="inputText inputTextBig3 validate-digits required-entry validate-length minimum-length-11 maximum-length-11" id="num_compte" maxlength="11" name="prelevement[num_compte]"> </li> <li> <label for="key_rib"><?php echo $this->__('RIB key') ?></label> <input type="text" class="inputText inputTextSm3 validate-digits required-entry validate-compte validate-length minimum-length-2 maximum-length-2" id="key_rib" maxlength="2" name="prelevement[key_rib]"> </li> </ul>
We first do a lenght validation with these 3 class : validate-length minimum-length-11 maximum-length-11
Then we validate the rib with this class : validate-compte
You will tell me this validator doesn’t exeist. That’s right, let’s create it.
<script type="text/javascript"> //<![CDATA[ Validation.addAllThese( [ ['validate-compte', '<?php echo Mage::helper('rating')->__('Please check your RIB account') ?>', function(v) { var code_banque = jQuery('#code_bank_pb').val(); var code_guichet = jQuery('#code_guichet_pb').val(); var numero_compte = jQuery('#num_compte').val(); var cle = jQuery('#key_rib').val(); var CompteTmp = code_banque + code_guichet + numero_compte + cle; while(CompteTmp.length > 9) { var CompteTmp2 = CompteTmp.substr(0,9) % 97; CompteTmp = CompteTmp2 + CompteTmp.substr(9,CompteTmp.length); } var CompteTmp2 = CompteTmp.substr(0,9) % 97; if(CompteTmp2 % 97 == 0) { return true; } return false; }] ] ); //]]> </script>
Some explainations :
jQuery('#code_bank_pb').val();
Magento use prototype, tu use jQuery, use jQuery instead of $
For the multi field validation, I grab the different fields from this
var code_banque = jQuery('#code_bank_pb').val(); var code_guichet = jQuery('#code_guichet_pb').val(); var numero_compte = jQuery('#num_compte').val(); var cle = jQuery('#key_rib').val();
I don’t know if this is the cleaner way to do (not really usable for another code) but it works.
If you always use the same input id, you can reuse this code on another site.