2

In app/design/frontend/rwd/default/template/catalog/product/view/addtocart.phtml we can find the following code:

<?php $_product = $this->getProduct(); ?>
<?php $buttonTitle = Mage::helper('core')->quoteEscape($this->__('Add to Cart')); ?>
<?php if($_product->isSaleable()): ?>
    <div class="add-to-cart">
        <?php if(!$_product->isGrouped()): ?>
        <div class="qty-wrapper">
            <label for="qty"><?php echo $this->__('Qty:') ?></label>
            <input type="text" pattern="\d*(\.\d+)?" name="qty" id="qty" maxlength="12" value="<?php echo $this->getProductDefaultQty() * 1 ?>" title="<?php echo Mage::helper('core')->quoteEscape($this->__('Qty')) ?>" class="input-text qty" />
        </div>
        <?php endif; ?>
        <div class="add-to-cart-buttons">
            <button type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span><?php echo $buttonTitle ?></span></span></button>
            <?php echo $this->getChildHtml('', true, true) ?>
        </div>
    </div>
<?php endif; ?>

To me, these two (shortend) lines are at the moment of interest:

  1. <input type="text" pattern="\d*(\.\d+)?" name="qty" id="qty" maxlength="12" [...] />
  2. <button type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart" onclick="productAddToCartForm.submit(this)">[...]</button>

Can anyone tell me about why the button type is set to button rather than submit which in return will prevent the nicely added HTML5 validation? The main concern for my question is that I'm actually in need of HTML5 validation (or better, I'd prefer to use it over even more custom validation in my case) for some custom custom options (i.e. custom option of type number where I'd like to use min="", max="", step="", ...). When I change the button type to submit I haven't seen any issue so far (HTML5 and the validation implemented by Magento both are working). Even though I can understand that from a design point of view it may make sense to suppress HTML5 validation, but is it actually worth it? Has anyone tried to change the button type already and can name experienced issues?

1

I am not sure whether I get your question correctly. But anyway I will put my 2 cents here just because I love your contribution here.

The button type button and submit has some differences in it's behaviour. Basically if you find a button with the type button, then most probably, it's action will be "managed" by javascript. Whereas the submit type button, if we include inside a form will simply fire the submit action when it is get clicked.

Here you can see that, the button fires a javascript action productAddToCartForm.submit(this). So as you can see in Furman's answer, this allows to do some url managements along with validation.

So in general, if you want to do only form validation while submit the form, then just use button type submit and if you have some more things to do before the submissions, then use the button type button.

2
  • Glad to hear from you. The difference in the button and submit is actually why I got curious on this topic. Especially due to the fact that HTML5 validation will not be usable in case of type="button". Reading between your lines I am tempt to assume that changing the button type would be a valid approach and I think I can let it rest at this point for now (also since I understand that SO's format/rules in general may conflict with my initial indention of gathering feedback on a broader range/discussion as it is - and this is ok and good the way it is - not a forum-like environment). Jan 8 '18 at 12:01
  • 1
    Glad you find it's helpful and keep up the good work here (thumbs up) Jan 8 '18 at 12:05
1

The answer is little bit below by page code:

<script type="text/javascript">
    //<![CDATA[
        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);
    //]]>
    </script>

Your interest - is this.validator.validate() this prototype.js function validates your form. Use this tutorial for changing validation behaviour.

Hope, this is helpful.

2
  • thanks for your reply - but, my interest is still HTML5 (in particular why there are HTML5 attributes in the source that can not work since the button type is not submit and whether there is a reason why the button type should not get changed [as said, I can not find any problems when so far when doing so]) even though you try to tell me it's not ;) Jan 6 '18 at 9:21
  • Furman, my apologies - @RajeevKTomy pointed out correctly, that your reply got certainly a valid point. I think I got misguided due to the type of your reply as I was looking for some more descriptive literature or some sort of pro/contra on the usage of HTML5 in Magento 1 in general. Jan 8 '18 at 11:50

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.