Validation Magento 2如何在keyup事件中验证客户注册表_Validation_Magento2_Jquery Widgets_Magento2.2

Validation Magento 2如何在keyup事件中验证客户注册表

validation magento2

Validation Magento 2如何在keyup事件中验证客户注册表,validation,magento2,jquery-widgets,magento2.2,Validation,Magento2,Jquery Widgets,Magento2.2,我正在进行一个项目，我需要验证客户登记表作为客户类型。我想使用事件键控进行输入。我还想更改默认消息。现在我正在做如下验证 $("#firstname").keyup(function(){ $('input[name="firstname"]').validation(); if(!$('input[name="firstname"]').validation('isValid')){ $("#firstname-error").remove();

我正在进行一个项目，我需要验证客户登记表作为客户类型。我想使用事件键控进行输入。我还想更改默认消息。现在我正在做如下验证

$("#firstname").keyup(function(){
    $('input[name="firstname"]').validation();
    if(!$('input[name="firstname"]').validation('isValid')){
        $("#firstname-error").remove();
        $("#firstname").after('<div for="firstname" generated="true" class="mage-error" id="firstname-error">Please enter your firstname</div>');
    }else{
        $("#firstname-error").remove();
    }
});

看到这一点，我想也许有更好的方法。因此，如果有任何简单的方法，请告诉我。

经过一些挖掘，我想出了这个解决方案。对于解决方案，您只需使用

requirejs config.js

添加新的js即可。但我创建了一个新模块。模块文件如下所示

app\code\Vky\Core\registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vky_Core',
    __DIR__
);

app\code\Vky\Core\view\frontend\requirejs config.js

var config = {
    map: {
        '*': {
            vky_customjs:      'Vky_Core/js/vky_custom'
        }
    }
};

define([
    "jquery",
    "jquery/ui",
    'mage/validation'
], function($) {
    "use strict";
    console.log('vky_custom.js is loaded!!');
        //creating jquery widget
        $.widget('vky_custom.js', {
            _create: function() {
                this._bind();
            },

            /**
             * Event binding, will monitor change, keyup and paste events.
             * @private
             */
            _bind: function () {
                this._on(this.element, {
                    'change': this.validateField,
                    'keyup': this.validateField,
                    'paste': this.validateField,
                    'click': this.validateField,
                    'focusout': this.validateField,
                    'focusin': this.validateField,
                });
            },

            validateField: function () {
                $.validator.validateSingleElement(this.element);
            },

        });

    return $.vky_custom.js;
});

app\code\Vky\Core\view\frontend\web\js\Vky\u custom.js

var config = {
    map: {
        '*': {
            vky_customjs:      'Vky_Core/js/vky_custom'
        }
    }
};

define([
    "jquery",
    "jquery/ui",
    'mage/validation'
], function($) {
    "use strict";
    console.log('vky_custom.js is loaded!!');
        //creating jquery widget
        $.widget('vky_custom.js', {
            _create: function() {
                this._bind();
            },

            /**
             * Event binding, will monitor change, keyup and paste events.
             * @private
             */
            _bind: function () {
                this._on(this.element, {
                    'change': this.validateField,
                    'keyup': this.validateField,
                    'paste': this.validateField,
                    'click': this.validateField,
                    'focusout': this.validateField,
                    'focusin': this.validateField,
                });
            },

            validateField: function () {
                $.validator.validateSingleElement(this.element);
            },

        });

    return $.vky_custom.js;
});

现在，无论您的

register.phtml

文件在哪里，都可以打开它。添加以下内容。在文件末尾添加以下内容

<script type="text/x-magento-init">
    { ".v-validate": { "Vky_Core/js/vky_custom": {} } }
</script>

因此，任何带有class

v-validate

的输入都将在诸如keyup、change、click、focusout等事件上进行验证。我在所有输入标记中添加了一个类

对于该行上方的

register.phtml

中的

firstname

和

lastname

（“#表单验证”）我添加了

$('#firstname').addClass('v-validate');
$('#lastname').addClass('v-validate');

这就是我为解决问题所做的一切。它是有效的。这就是为什么张贴我的答案。也许这可以帮助别人。

经过一番挖掘，我想出了这个解决方案。对于解决方案，您只需使用

requirejs config.js