I'm developing a custom theme for Magento and I have my product page with two select drop downs. My question is add to cart form validates with prototype client side validation but does not give any error or notification on the form. It just stays the way it stays and when I select a options from the select drop down the form submits. If you have any suggestions it would be appreciated.
/app/design/frontend/mytheme/default/template/catalog/product/view.phtml
form
<form action="<?php echo $this->getSubmitUrl($_product) ?>" method="post" id="product_addtocart_form"<?php if ($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
<?php echo $this->getBlockHtml('formkey') ?>
<div class="no-display">
<input type="hidden" name="product" value="<?php echo $_product->getId() ?>"/>
<input type="hidden" name="related_product" id="related-products-field" value=""/>
</div>
<div class="col-md-6 col-sm-6">
<span class="product-main-title"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></span>
<?php echo $this->getChildHtml('media') ?>
<?php echo $this->getChildHtml('alert_urls') ?>
<?php echo $this->getChildHtml('extrahint') ?>
</div>
<div class="col-md-6 col-sm-6 prod-wrapper">
<?php echo $this->getChildHtml('other'); ?>
<?php if ($_product->isSaleable() && $this->hasOptions()): ?>
<?php echo $this->getChildChildHtml('container2', '', true, true) ?>
<?php endif; ?>
<!-- for display review and instock section for simple products -->
<?php if ($_product->isSaleable() && !$this->hasOptions()): ?>
<div class="review-section">
<div class="review">
<?php
$storeId = Mage::app()->getStore()->getId();
$summaryData = Mage::getModel('review/review_summary')
->setStoreId($storeId)
->load($_product->getId());
if ($summaryData['rating_summary']):?>
<div class="ratings ratings-summery">
<div class="rating-box">
<div class="rating" style="width:<?php echo $summaryData['rating_summary']; ?>%"></div>
</div>
</div>
<?php endif; ?>
<span><a href="#customer-reviews" class="select-tab" value="4">Reviews</a> | <a href="#review-form" class="select-tab" value="4">Write a new review</a></span>
</div>
<div class="text-right in-stock-lable">
<?php if ($this->displayProductStockStatus()): ?>
<?php if ($_product->isAvailable()): ?>
<img src="<?php echo $this->getSkinUrl('images/instock.png'); ?>">
<span class="stock-text">In Stock.</span>
<?php else: ?>
<img src="<?php echo $this->getSkinUrl('images/instock.png'); ?>">
<span class="stock-text">Out of stock.</span>
<?php endif; ?>
<?php endif; ?>
<?php echo $this->getChildHtml('product_type_data_extra') ?>
</div>
</div>
<?php endif; ?>
<?php if ($_product->isSaleable()): ?>
<div class="qty">
<?php if (!$_product->isGrouped()): ?>
<span>Quantity</span>
<a id="down"><span class="upper-arrow">-</span></a>
<input type="text" name="qty" id="qty" maxlength="12" value="<?php echo $this->getProductDefaultQty() * 1 ?>" title="<?php echo $this->__('Qty') ?>" class="input-text qty"/>
<a id="up"><span class="down-arrow">+</span></a>
<?php endif; ?>
</div>
<?php endif; ?>
<div class="prod-price">
<?php
$_coreHelper = $this->helper('core');
$_taxHelper = $this->helper('tax');
$priceIncTax = $_taxHelper->getPrice($_product, $_product->getPrice(), true);
$priceIncTax = Mage::helper('core')->currency(number_format($priceIncTax, 2));
?>
<span id="hidden-price"><?php echo $this->getPriceHtml($_product) ?></span>
<span id="main-price" class="main-price"></span><span class="vat"> INC VAT (<span id="vat-price"></span> net)</span>
</div>
<?php echo $this->getLayout()->createBlock('catalog/product_view')->setTemplate('catalog/product/view/addtocart.phtml')->toHtml(); ?>
<div class="line-break">
<hr>
</div>
<div id="sort-info" class="prod-short-desc">
<article>
<?php echo nl2br($this->htmlEscape($_product->getDescription())); ?>
<!-- --><?php //echo nl2br($_product->getDescription()); ?>
</article>
</div>
<?php //echo $this->getChildChildHtml('addtocartcontainer', '', true, true) ?>
<?php if ($_product->getSpecialOfferText()): ?>
<a class="off-anchor" href="<?php echo $_product->getSpecialOfferLink(); ?>">
<div class="offer-banner">
<span class="offer-title">Special Offer</span>
<div>
<span><?php echo $_product->getSpecialOfferText(); ?></span>
</div>
</div>
</a>
<?php endif; ?>
</div>
</form>
javascript
var productAddToCartForm = new VarienForm('product_addtocart_form');
productAddToCartForm.submit = function (button, url) {
if (this.validator.validate()) {
var form = this.form;
var oldUrl = form.action;
if (url) {
form.action = url;
}
var e = null;
try {
this.form.submit();
} catch (e) {
}
this.form.action = oldUrl;
if (e) {
throw e;
}
if (button && button != 'undefined') {
button.disabled = true;
}
}
}.bind(productAddToCartForm);
productAddToCartForm.submitLight = function (button, url) {
if (this.validator) {
var nv = Validation.methods;
delete Validation.methods['required-entry'];
delete Validation.methods['validate-one-required'];
delete Validation.methods['validate-one-required-by-name'];
// Remove custom datetime validators
for (var methodName in Validation.methods) {
if (methodName.match(/^validate-datetime-.*/i)) {
delete Validation.methods[methodName];
}
}
if (this.validator.validate()) {
if (url) {
this.form.action = url;
}
this.form.submit();
}
Object.extend(Validation.methods, nv);
}
}.bind(productAddToCartForm);
/app/design/frontend/mytheme/default/template/catalog/product/view/type/options/configurable.phtml
select
<select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry validate-select super-attribute-select">
<?php if (count($_attributes) > 1) {
?>
<option><?php echo $this->__('SELECT OPTION 1') ?></option>
<?php
}
?>
</select>
