1

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>
  • Please provide code. First guess is you have to give you field the right classes like "required-entry". – Stefan Gregori Apr 10 '15 at 7:51
  • sorry about that. code added. – Janaka Dombawela Apr 10 '15 at 8:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.