Skip to content

On checkout cart submit, pattern regex validation fails #23766

Closed
@vahir2016

Description

@vahir2016

Preconditions (*)

  1. Magento ver. 2.2.6

Steps to reproduce (*)

  1. On checkout cart page, use input type text for quantity and use pattern like "[0-9]"
  2. Bind jquery submit to submit form on input change
  3. In broswer console, you will see : "param.test is not a function"
  4. The form will not submit

<input id="cart-<?= /* @escapeNotVerified */ $_item->getId() ?>-qty" name="cart[<?= /* @escapeNotVerified */ $_item->getId() ?>][qty]" data-cart-item-id="<?= $block->escapeHtml($_item->getSku()) ?>" value="<?= /* @escapeNotVerified */ $block->getQty() ?>" type="text" size="4" pattern="^(0|[1-9][0-9]*)$" title="<?= $block->escapeHtml(__('Qty')) ?>" class="input-text qty" data-validate="{required:true,'validate-greater-than-zero':true}" data-role="cart-item-qty"/>

require([ 'jquery', ], function($) { $('#form-validate .input-text.qty').on('change', function() { console.log('here'); $('#form-validate').submit(); }); });

Expected result (*)

  1. Form submits

Actual result (*)

  1. Uncaught TypeError: param.test is not a function
    at $.validator. (validation.js:541)
    at $.validator.check (jquery.validate.js:556)
    at $.validator.checkForm (jquery.validate.js:372)
    at $.validator.form (jquery.validate.js:359)
    at jQuery.fn.init.valid (jquery.validate.js:108)
    at $...isValid (validation.js:1845)
    at $...isValid (jquery-ui.js:402)
    at HTMLFormElement. (jquery-ui.js:494)
    at Function.each (jquery.js:370)
    at jQuery.fn.init.each (jquery.js:137)

Sélection_078

I fixed the problem with this solution :
in magento/lib/web/mage/validation.js line 538

replace :

/* eslint-enable max-len */ 'pattern': [ function (value, element, param) { return this.optional(element) || param.test(value); }, $.mage.__('Invalid format.') ],

by
/* eslint-enable max-len */ 'pattern': [ function (value, element, param) { return this.optional(element) || new RegExp(param).test(value); }, $.mage.__('Invalid format.') ],

I am doing a pull request for this.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Component: CheckoutIssue: Clear DescriptionGate 2 Passed. Manual verification of the issue description passedIssue: ConfirmedGate 3 Passed. Manual verification of the issue completed. Issue is confirmedIssue: Format is validGate 1 Passed. Automatic verification of issue format passedIssue: Ready for WorkGate 4. Acknowledged. Issue is added to backlog and ready for developmentReproduced on 2.3.xThe issue has been reproduced on latest 2.3 release

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions