Magento 2, как проверить регистрационную форму клиента на мероприятии keyup - PullRequest
Новая
       31

Magento 2, как проверить регистрационную форму клиента на мероприятии keyup

0 голосов
/ 30 апреля 2018

Я работаю над проектом, в котором мне нужно подтвердить регистрационную форму клиента как тип клиента. Я хочу использовать событие Keyup для ввода. Я хочу изменить сообщения по умолчанию также. Прямо сейчас я делаю проверку, как показано ниже 

$("#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();
    }
});

Я думаю, это не очень хороший способ сделать это. Но мне нужно будет сделать это для всех полей. Затем я посмотрел на этот файл vendor \ magento \ magento2-base \ lib \ web \ mage \ validation.js примерно в строке 1735. Я видел код ниже 

$.widget('mage.validation', {
        options: {
            meta: 'validate',
            onfocusout: false,
            onkeyup: false,
            onclick: false,
            ignoreTitle: true,
            errorClass: 'mage-error',
            errorElement: 'div',
    ...

Видя это, я подумал, что, может быть, есть лучший способ сделать это. Так что, если есть какой-то простой способ, пожалуйста, дайте мне знать.

1 Ответ

0 голосов
/ 02 мая 2018

После некоторых копаний я придумал это решение. Для решения все, что вам нужно сделать, это добавить новые js, используя requirejs-config.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\etc\module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vky_Core" setup_version="0.0.1"/>
</config>

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

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

app\code\Vky\Core\view\frontend\web\js\vky_custom.js

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>

А затем, например, вы хотите проверить электронную почту. Найдите тег ввода для электронной почты и добавьте класс v-validate. Как это 

<input type="email" name="email" autocomplete="email" id="email_address" value="<?= $block->escapeHtmlAttr($block->getFormData()->getEmail()) ?>" title="<?= $block->escapeHtmlAttr(__('Email')) ?>" class="input-text v-validate" data-validate="{required:true, 'validate-email':true}">

Таким образом, любой ввод с классом v-validate будет проверен на такие события, как keyup, change, click, focusout и т. Д. Я добавил класс для всех входных тегов.

Для firstname и lastname в register.phtml над этой строкой var dataForm = $('#form-validate'); Я добавил 

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

Это все, что я сделал, чтобы решить мою проблему. И это работает. Вот почему выкладываю мой ответ. Может быть, это может кому-то помочь.

...