magento2-how to use javascript inside knockout in magento2

magento.stackexchange https://magento.stackexchange.com/questions/300934

Question

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

Was it helpful?

Solution 2

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

OTHER TIPS

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')
],
* * *
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top