Magento – Password doesn’t validate when there are three forms on one page

form-validationpassword

I've got three forms on one page (checkout, step 1): login form, register form and form for people who doesn't want to create account. I've got a problem with password validation in register form "please make sure your passwords match". I guess it's because it take other password field from login form. I add in validation.js 'validate-cpassword-checkout-register' and I add that class to fields in register form but I don't know what stands for $('confirmation') and $('password') in

`['validate-cpassword', 'Please make sure your passwords match.',function(v) {
                var conf = $('confirmation') ? $('confirmation') : $$('.validate-cpassword')[0];
                var pass = false;
                if ($('password')) {
                    pass = $('password');
                }
                var passwordElements = $$('.validate-password');
                for (var i = 0; i < passwordElements.size(); i++) {
                    var passwordElement = passwordElements[i];
                    if (passwordElement.up('form').id == conf.up('form').id) {
                        pass = passwordElement;
                    }
                }
                if ($$('.validate-admin-password').size()) {
                    pass = $$('.validate-admin-password')[0];
                }
                return (pass.value == conf.value);
            }],`

These are not id's of inputs (id is id="billing:customer_password").

So my question is: How can I validate few forms on one page? Any help appreciated.

[EDIT]

I use login.phtml template to add tabs. For the next two forms I create blocks

login.phtml

<div class="box-checkout-status box-info">
    <div id="checkout-tabs-content" class="tab-content">
        <div id="checkout-login" class="tab-pane active">
            <form id="login-form" action="<?php echo $this->getPostAction() ?>" method="post">
                <div class="fieldset">
                    <?php echo $this->getBlockHtml('formkey'); ?>
                    <ul class="form-list">
                        <li>
                            <label for="login-email" class="required"><em>*</em><?php echo $this->__('Email Address') ?></label>
                            <div class="input-box">
                                <input type="email" spellcheck="false" class="input-text required-entry validate-email" id="login-email" name="login[username]" value="<?php echo $this->escapeHtml($this->getUsername()) ?>" />
                            </div>
                        </li>
                        <li>
                            <label for="login-password" class="required"><em>*</em><?php echo $this->__('Password') ?></label>
                            <div class="input-box">
                                <input type="password" class="input-text validate-password required-entry" id="login-password" name="login[password]" />
                            </div>
                        </li>
                        <?php echo $this->getChildHtml('form.additional.info'); ?>
                    </ul>
                    <input name="context" type="hidden" value="checkout" />
                </div>
            </form>
            <div class="buttons-set">
                <button type="submit" class="btn button-green pull-right" onclick="onepageLogin(this)">
                    <i class="fa fa-lock"></i>
                </button>
            </div>
        </div>

        <div id="checkout-register" class="tab-pane">
            <?php echo $this->getLayout()->createBlock('checkout/onepage_billing')->setTemplate('checkout/onepage/billing.phtml')->toHtml(); ?>
        </div>

        <div id="checkout-guest" class="tab-pane">
            <!-- TODO -->
        </div>
    </div>
</div>

billing.phtml – it's an exactly copied file from base/checkout/onepage/billing.phtml

Best Answer

I found the answer. var con and var pass are the names of inputs so I made new two validators and code looks like this

['validate-password-checkout-register', 'Please enter 6 or more characters. Leading or trailing spaces will be ignored.', function(v) {
    var pass=v.strip(); /*strip leading and trailing spaces*/
    return !(pass.length>0 && pass.length < 6);
}],

And

['validate-cpassword-checkout-register', 'Please make sure your passwords match.', function(v) {
            var conf = $('billing[confirm_password]') ? $('billing[confirm_password]') : $$('.validate-cpassword-checkout-register')[0];
            var pass = false;
            if ($('billing[customer_password]')) {
                pass = $('billing[customer_password]');
            }
            var passwordElements = $$('.validate-password-checkout-register'); //used my validator for password
            for (var i = 0; i < passwordElements.size(); i++) {
                var passwordElement = passwordElements[i];
                if (passwordElement.up('form').id == conf.up('form').id) {
                    pass = passwordElement;
                }
            }
            if ($$('.validate-admin-password').size()) {
                pass = $$('.validate-admin-password')[0];
            }
            return (pass.value == conf.value);
        }],

And I also add class validate-password-checkout-register to password input and validate-cpassword-checkout-register to confirming password input.