HTML5 form validation

Question

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?

Answer 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.

Answer 2

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.