0

i want to use the 

<script type="text/javascript">
  require([
            'jquery'
        ], function(jQuery) {
           jQuery('input[name="telephone"]').keydown(function(event) {
            // Allow special chars + arrows 
            if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 
                || event.keyCode == 27 || event.keyCode == 13 
                || (event.keyCode == 65 && event.ctrlKey === true) 
                || (event.keyCode >= 35 && event.keyCode <= 39)){
                    return;
            }else {
                // If it's not a number stop the keypress
                if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                    event.preventDefault(); 
                }   
            }
        });

        });

</script>

this script in the knockout .html file how cant i use this script ? can any one please help me out this ?

Thanks

Improve this question

2 Answers 2

Reset to default
0

Basically you just need to apply custom validation to the telephone field and that you can achieve using standard way instead of doing it with javascript. do the following to achieve your goal

app/design/frontend/VENDOR/THEME_NAME/Magento_Checkout/layout/checkout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="shipping-address-fieldset" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="telephone" xsi:type="array">
                                                                    <item name="validation" xsi:type="array">
                                                                        <item name="validate-telephone" xsi:type="string">true</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

copy rule.js file from vendor/magento/module-ui/view/base/web/js/lib/validation/rules.js and paste it in your theme at app/design/frontend/VENDOR/THEME_NAME/Magento_Ui/js/lib/validation/rules.js now just add below code in the overridden file at around line no 237 as mention here

* * *
'time12h': [
    function (value) {
        return utils.isEmpty(value) || /^((0?[1-9]|1[012])(:[0-5]\d){0,2}(\s[AP]M))$/i.test(value);
    },
    $.mage.__('Please enter a valid time, between 00:00 am and 12:00 pm')
],

// add this code anywhere in this file like this
'validate-phonenumber': [
    function(value) {
        if (value.length < 10) {
            return false;
        } else {
            return utils.isEmptyNoTrim(value) || !/[^\d\+\-\(\) ]/.test(value);
        }
    }
    $.mage.__('Custom Error Message')
],

'phoneUS': [
    function (value) {
        value = value.replace(/\s+/g, '');

        return utils.isEmpty(value) || value.length > 9 &&
            value.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
    },
    $.mage.__('Please specify a valid phone number')
],
* * *
Improve this answer
0

i found a answer of my query and the solution is the the we need to do using the knockout js we need to define event in the file of out custom module /var/www/html/magento226/app/code/VENDOR/MODULE/view/frontend/web/template/form/element/telephone.html

<input class="admin__control-text" type="text"
data-bind="
    event: {change: userChanges},
    value: value,
    hasFocus: focused,
    valueUpdate: valueUpdate,
    attr: {
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': noticeId,
        id: uid,
        disabled: disabled
},
event: {keydown: userkeydown(event)}"

/>

and define the event userkeydown in the file

/var/www/html/magento226/app/code/VENDOR/MODULE/view/frontend/web/js/form/element/telephone.js

/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/

/**
* @api
*/
define([
'jquery',
'Magento_Ui/js/form/element/abstract'
], function (jQuery,Abstract) {
'use strict';

return Abstract.extend({
    defaults: {
        elementTmpl: 'VENDOR_MODULE/form/element/telephone'
    },

    userkeydown: function (event) {
                    // Allow special chars + arrows 
        if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 
            || event.keyCode == 27 || event.keyCode == 13 
            || (event.keyCode == 65 && event.ctrlKey === true) 
            || (event.keyCode >= 35 && event.keyCode <= 39)){
                return;
        }else {
            // If it's not a number stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                event.preventDefault(); 
            }   
        }
    }
})
});

and i solve my query

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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