Magento: Why doesn't login and registration forms validation work when combined on one page - forms

Question

EDIT 051012:
Turns out that the issue was less to do with the forms being on one page but more to conflicts between prototype and jQuery; there was a inclusion of jQuery right at the bottom of the footer which was not set to no conflict. I simply added this after the inclusion of that particular jQuery:
<script type="text/javascript">
//<![CDATA[
$.noConflict();
//]]>
</script>
I'm accepting Pavel Novitsky's answer below because he mentioned, "If assuming that you have no form embedding or JavaScript errors your code should work.." and that made me realize that it might have something to do with Javascript.
I'm currently building an e-commerce site with Magento which requires for both the registration and login forms to sit on one page.
I have successfully integrated both forms on a single page but was not able to login or register.
Here's a very brief overview of how the forms are structured
<!--registration-->
<form action="<?php echo $this->getPostActionUrl() ?>" method="post" id="form-validate">
<!--// form input fields go here-->
</form>
<script type="text/javascript">
//<![CDATA[
var dataForm = new VarienForm('form-validate', true);
//]]>
</script>
<!--login-->
<form action="<?php echo $this->getPostActionUrl() ?>" method="post" id="login-form">
<!--// form input fields go here-->
</form>
<script type="text/javascript">
//<![CDATA[
var dataForm = new VarienForm('form-validate', true);
//]]>
</script>
I noticed that the variable dataForm was being defined twice over so I switched one of them to dataForm02 to see if the submissions would go through - neither did. So after almost 6 hours of prodding, I decided to remove the javascript validation and to my surprise, the submission on both forms worked.
Does anyone have an idea why this is happening? It is good that I got the submissions on both forms through but this is definitely not ideal because there'd be no form of validations employed on the 2 forms. I'm close to throwing my computer out my 20th storey apartment.

Answer 1

you have one and the same form action for both login and register forms:
<?php echo $this->getPostActionUrl() ?>
This method is defined in different blocks for templates.
If assume that you have no form embedding or JavaScript errors your code should work.Hard to say something without real code.
Just one guess: do you have
//<![CDATA[
var dataForm = new VarienForm('login-form', true);
//]]>
or
<script type="text/javascript">
//<![CDATA[
var dataForm = new VarienForm('login-form', true);
//]]>
</script>
?

Answer 2

Make sure you are using different id for forms in both registration and login forms and also make sure you are using same id in scripts. Seems like you have problem with login form ids. Use this for your login script.
<!--login-->
<form action="<?php echo $this->getPostActionUrl() ?>" method="post" id="login-form">
<!--// form input fields go here-->
</form>
<script type="text/javascript">
//<![CDATA[
var dataForm = new VarienForm('login-form', true);
//]]>
</script>

Answer 3

You can alternatively using xml you can achieve this functionality. Just you will need to edit customer.xml file. Replace with this one.
<customer_account_login translate="label">
<label>Customer Account Login Form</label>
<!-- Mage_Customer -->
<remove name="right"/>
<remove name="left"/>
<reference name="root">
<action method="setTemplate"><template>page/1column.phtml</template></action>
</reference>
<reference name="content">
<block type="customer/form_login" name="customer_form_login" template="customer/form/login.phtml" />
<block type="customer/form_register" name="customer_form_register" template="customer/form/register.phtml">
<block type="page/html_wrapper" name="customer.form.register.fields.before" as="form_fields_before" translate="label">
<label>Form Fields Before</label>
</block>
</block>
</reference>
</customer_account_login>

Answer 4

Replace your theme/template/presistent/customer/form/register.phtml with this code and let me know the result.
<?php $login = new Mage_Customer_Block_Form_Login(); ?>
<div class="account-login">
<div class="page-title">
<h1><?php echo $login->__('Login or Create an Account') ?></h1>
</div>
<?php //echo $login->getMessagesBlock()->getGroupedHtml() ?>
<form action="<?php echo $login->getPostActionUrl() ?>" method="post" id="login-form">
<div class="col2-set">
<div class="col-1 new-users">
<div class="content">
<h2><?php echo $login->__('New Customers') ?></h2>
<p><?php echo $login->__('By creating an account with our store, you will be able to move through the checkout process faster, store multiple shipping addresses, view and track your orders in your account and more.') ?></p>
</div>
</div>
<div class="col-2 registered-users">
<div class="content">
<h2><?php echo $login->__('Registered Customers') ?></h2>
<p><?php echo $login->__('If you have an account with us, please log in.') ?></p>
<ul class="form-list">
<li>
<label for="email" class="required"><em>*</em><?php echo $login->__('Email Address') ?></label>
<div class="input-box">
<input type="text" name="login[username]" value="<?php echo $login->htmlEscape($login->getUsername()) ?>" id="email" class="input-text required-entry validate-email" title="<?php echo $login->__('Email Address') ?>" />
</div>
</li>
<li>
<label for="pass" class="required"><em>*</em><?php echo $login->__('Password') ?></label>
<div class="input-box">
<input type="password" name="login[password]" class="input-text required-entry validate-password" id="pass" title="<?php echo $login->__('Password') ?>" />
</div>
</li>
<?php echo $login->getChildHtml('form.additional.info'); ?>
<?php echo $login->getChildHtml('persistent.remember.me'); ?>
</ul>
<?php echo $login->getChildHtml('persistent.remember.me.tooltip'); ?>
<p class="required"><?php echo $login->__('* Required Fields') ?></p>
</div>
</div>
</div>
<div class="col2-set">
<div class="col-1 new-users">
<div class="buttons-set">
<button type="button" title="<?php echo $login->__('Create an Account') ?>" class="button" onclick="window.location='<?php echo Mage::helper('persistent')->getCreateAccountUrl($login->getCreateAccountUrl()) ?>';"><span><span><?php echo $login->__('Create an Account') ?></span></span></button>
</div>
</div>
<div class="col-2 registered-users">
<div class="buttons-set">
<?php echo $login->__('Forgot Your Password?') ?>
<button type="submit" class="button" title="<?php echo $login->__('Login') ?>" name="send" id="send2"><span><span><?php echo $login->__('Login') ?></span></span></button>
</div>
</div>
</div>
<?php if (Mage::helper('checkout')->isContextCheckout()): ?>
<input name="context" type="hidden" value="checkout" />
<?php endif; ?>
</form>
<script type="text/javascript">
//<![CDATA[
var dataForm = new VarienForm('login-form', true);
//]]>
</script>
</div>
<div class="account-create">
<div class="page-title">
<h1><?php echo $this->__('Create an Account') ?></h1>
</div>
<?php echo $this->getChildHtml('form_fields_before')?>
<?php echo $this->getMessagesBlock()->getGroupedHtml() ?>
<form action="<?php echo $this->getPostActionUrl() ?>" method="post" id="form-validate">
<div class="fieldset">
<input type="hidden" name="success_url" value="<?php echo $this->getSuccessUrl() ?>" />
<input type="hidden" name="error_url" value="<?php echo $this->getErrorUrl() ?>" />
<h2 class="legend"><?php echo $this->__('Personal Information') ?></h2>
<ul class="form-list">
<li class="fields">
<?php echo $this->getLayout()->createBlock('customer/widget_name')->setObject($this->getFormData())->setForceUseCustomerAttributes(true)->toHtml() ?>
</li>
<li>
<label for="email_address" class="required"><em>*</em><?php echo $this->__('Email Address') ?></label>
<div class="input-box">
<input type="text" name="email" id="email_address" value="<?php echo $this->escapeHtml($this->getFormData()->getEmail()) ?>" title="<?php echo $this->__('Email Address') ?>" class="input-text validate-email required-entry" />
</div>
</li>
<?php if ($this->isNewsletterEnabled()): ?>
<li class="control">
<div class="input-box">
<input type="checkbox" name="is_subscribed" title="<?php echo $this->__('Sign Up for Newsletter') ?>" value="1" id="is_subscribed"<?php if($this->getFormData()->getIsSubscribed()): ?> checked="checked"<?php endif; ?> class="checkbox" />
</div>
<label for="is_subscribed"><?php echo $this->__('Sign Up for Newsletter') ?></label>
</li>
<?php endif ?>
<?php $_dob = $this->getLayout()->createBlock('customer/widget_dob') ?>
<?php if ($_dob->isEnabled()): ?>
<li><?php echo $_dob->setDate($this->getFormData()->getDob())->toHtml() ?></li>
<?php endif ?>
<?php $_taxvat = $this->getLayout()->createBlock('customer/widget_taxvat') ?>
<?php if ($_taxvat->isEnabled()): ?>
<li><?php echo $_taxvat->setTaxvat($this->getFormData()->getTaxvat())->toHtml() ?></li>
<?php endif ?>
<?php $_gender = $this->getLayout()->createBlock('customer/widget_gender') ?>
<?php if ($_gender->isEnabled()): ?>
<li><?php echo $_gender->setGender($this->getFormData()->getGender())->toHtml() ?></li>
<?php endif ?>
</ul>
</div>
<?php if($this->getShowAddressFields()): ?>
<div class="fieldset">
<input type="hidden" name="create_address" value="1" />
<h2 class="legend"><?php echo $this->__('Address Information') ?></h2>
<ul class="form-list">
<li class="fields">
<div class="field">
<label for="company"><?php echo $this->__('Company') ?></label>
<div class="input-box">
<input type="text" name="company" id="company" value="<?php echo $this->escapeHtml($this->getFormData()->getCompany()) ?>" title="<?php echo $this->__('Company') ?>" class="input-text <?php echo $this->helper('customer/address')->getAttributeValidationClass('company') ?>" />
</div>
</div>
<div class="field">
<label for="telephone" class="required"><em>*</em><?php echo $this->__('Telephone') ?></label>
<div class="input-box">
<input type="text" name="telephone" id="telephone" value="<?php echo $this->escapeHtml($this->getFormData()->getTelephone()) ?>" title="<?php echo $this->__('Telephone') ?>" class="input-text <?php echo $this->helper('customer/address')->getAttributeValidationClass('telephone') ?>" />
</div>
</div>
</li>
<?php $_streetValidationClass = $this->helper('customer/address')->getAttributeValidationClass('street'); ?>
<li class="wide">
<label for="street_1" class="required"><em>*</em><?php echo $this->__('Street Address') ?></label>
<div class="input-box">
<input type="text" name="street[]" value="<?php echo $this->escapeHtml($this->getFormData()->getStreet(1)) ?>" title="<?php echo $this->__('Street Address') ?>" id="street_1" class="input-text <?php echo $_streetValidationClass ?>" />
</div>
</li>
<?php $_streetValidationClass = trim(str_replace('required-entry', '', $_streetValidationClass)); ?>
<?php for ($_i = 2, $_n = $this->helper('customer/address')->getStreetLines(); $_i <= $_n; $_i++): ?>
<li class="wide">
<div class="input-box">
<input type="text" name="street[]" value="<?php echo $this->escapeHtml($this->getFormData()->getStreet($_i)) ?>" title="<?php echo $this->__('Street Address %s', $_i) ?>" id="street_<?php echo $_i ?>" class="input-text <?php echo $_streetValidationClass ?>" />
</div>
</li>
<?php endfor; ?>
<li class="fields">
<div class="field">
<label for="city" class="required"><em>*</em><?php echo $this->__('City') ?></label>
<div class="input-box">
<input type="text" name="city" value="<?php echo $this->escapeHtml($this->getFormData()->getCity()) ?>" title="<?php echo $this->__('City') ?>" class="input-text <?php echo $this->helper('customer/address')->getAttributeValidationClass('city') ?>" id="city" />
</div>
</div>
<div class="field">
<label for="region_id" class="required"><em>*</em><?php echo $this->__('State/Province') ?></label>
<div class="input-box">
<select id="region_id" name="region_id" title="<?php echo $this->__('State/Province') ?>" class="validate-select" style="display:none;">
<option value=""><?php echo $this->__('Please select region, state or province') ?></option>
</select>
<script type="text/javascript">
//<![CDATA[
$('region_id').setAttribute('defaultValue', "<?php echo $this->getFormData()->getRegionId() ?>");
//]]>
</script>
<input type="text" id="region" name="region" value="<?php echo $this->escapeHtml($this->getRegion()) ?>" title="<?php echo $this->__('State/Province') ?>" class="input-text <?php echo $this->helper('customer/address')->getAttributeValidationClass('region') ?>" style="display:none;" />
</div>
</div>
</li>
<li class="fields">
<div class="field">
<label for="zip" class="required"><em>*</em><?php echo $this->__('Zip/Postal Code') ?></label>
<div class="input-box">
<input type="text" name="postcode" value="<?php echo $this->escapeHtml($this->getFormData()->getPostcode()) ?>" title="<?php echo $this->__('Zip/Postal Code') ?>" id="zip" class="input-text validate-zip-international <?php echo $this->helper('customer/address')->getAttributeValidationClass('postcode') ?>" />
</div>
</div>
<div class="field">
<label for="country" class="required"><em>*</em><?php echo $this->__('Country') ?></label>
<div class="input-box">
<?php echo $this->getCountryHtmlSelect() ?>
</div>
</div>
</li>
</ul>
<input type="hidden" name="default_billing" value="1" />
<input type="hidden" name="default_shipping" value="1" />
</div>
<?php endif; ?>
<div class="fieldset">
<h2 class="legend"><?php echo $this->__('Login Information') ?></h2>
<ul class="form-list">
<li class="fields">
<div class="field">
<label for="password" class="required"><em>*</em><?php echo $this->__('Password') ?></label>
<div class="input-box">
<input type="password" name="password" id="password" title="<?php echo $this->__('Password') ?>" class="input-text required-entry validate-password" />
</div>
</div>
<div class="field">
<label for="confirmation" class="required"><em>*</em><?php echo $this->__('Confirm Password') ?></label>
<div class="input-box">
<input type="password" name="confirmation" title="<?php echo $this->__('Confirm Password') ?>" id="confirmation" class="input-text required-entry validate-cpassword" />
</div>
</div>
</li>
<?php echo $this->getChildHtml('form.additional.info'); ?>
<?php echo $this->getChildHtml('persistent.remember.me'); ?>
</ul>
<?php echo $this->getChildHtml('persistent.remember.me.tooltip'); ?>
</div>
<div class="buttons-set">
<p class="required"><?php echo $this->__('* Required Fields') ?></p>
<p class="back-link"><small>« </small><?php echo $this->__('Back') ?></p>
<button type="submit" title="<?php echo $this->__('Submit') ?>" class="button"><span><span><?php echo $this->__('Submit') ?></span></span></button>
</div>
<?php if (Mage::helper('checkout')->isContextCheckout()): ?>
<input name="context" type="hidden" value="checkout" />
<?php endif; ?>
</form>
<script type="text/javascript">
//<![CDATA[
var dataForm = new VarienForm('form-validate', true);
<?php if($this->getShowAddressFields()): ?>
new RegionUpdater('country', 'region', 'region_id', <?php echo $this->helper('directory')->getRegionJson() ?>, undefined, 'zip');
<?php endif; ?>
//]]>
</script>
</div>