Как сделать валидацию телефона при оформлении заказа в битриксе?

Question

[strify_25]

Добавил маску ввода телефона, она работает корректно. Но если пользователь введет телефон не полностью, так и останется, например, +7 (920) 333-__-__
Пробую в свойствах заказа в админке ввести регулярное выражение для проверки

/^[+][0-9] [(][0-9]{3}[)] [0-9]{3}[-][0-9]{2}[-][0-9]{2}$/

но появляется сообщение "Свойство заказа "Телефон" - не соответствует шаблону", хотя введенное значение [phone] полностью соответствует регулярному выражению

Comments

[Антон]

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

Пример

<script>
window.addEventListener("DOMContentLoaded", function() {
function setCursorPosition(pos, elem) {
    elem.focus();
    if (elem.setSelectionRange) elem.setSelectionRange(pos, pos);
    else if (elem.createTextRange) {
        var range = elem.createTextRange();
        range.collapse(true);
        range.moveEnd("character", pos);
        range.moveStart("character", pos);
        range.select()
    }
}

function mask(event) {
    var matrix = "+7 (___) ___-__-__",
        i = 0,
        def = matrix.replace(/\D/g, ""),
        val = this.value.replace(/\D/g, "");
    if (def.length >= val.length) val = def;
    this.value = matrix.replace(/./g, function(a) {
        return /[_\d]/.test(a) && i < val.length ? val.charAt(i++) : i >= val.length ? "" : a
    });
    if (event.type == "blur") {
        if (this.value.length == 2) this.value = ""
    } else setCursorPosition(this.value.length, this)
};
    var input = document.querySelector("#user0");
    input.addEventListener("input", mask, false);
    input.addEventListener("focus", mask, false);
    input.addEventListener("blur", mask, false);
});
  </script>
    <label class="cart-order-form-label col-2">
        <input type="text" name="tel"  id="user0" placeholder="Телефон *" value="<?=$_SESSION['partial_zakaz']['tel']?>" required>
    </label>

в админке ввести регулярное выражение для проверки

ну, зачем если в публичной части сделать проверку?!

Answer 1

[Роман Грицук]

Если маску делали с помощью InputMask, то на фронте можно добавить валидацию поля ПЕРЕД сохранение заказа

if ($(selector).inputmask("isComplete")){
    //do something
}

Можно к этой валидации добавить серверную валидацию поля на событии модуля sale OnSaleOrderBeforeSaved
Приблизительно так может выглядеть обработчик:

<?
function OnSaleOrderBeforeSaved(\Bitrix\Main\Event $event)
{
    /** @var \Bitrix\Sale\Order $order */
    $order = $event->getParameter("ENTITY");

    if ($order->isNew() ) {//Если проверка требуется только для нового заказа, а не при его редактировании
        $propertyCollection = $order->getPropertyCollection();
        $phoneProperty = $propertyCollection->getPhone();
        $isPhoneValid = validatePhone($phoneProperty);

        if (!$isPhoneValid) {
            $event->addResult(new \Bitrix\Main\EventResult(
                \Bitrix\Main\EventResult::ERROR,
                new \Bitrix\Sale\ResultError('Текст ошибки', 'PHONE_PROPERTY_INVALID')
            ));
        }

    }
}

надо только реализовать метод/функцию validatePhone, которая валидирует телефон так как Вам надо

Comments

[strify_25]

благодарю, способ с серверной валидацией работает, только ошибка появляется над всей формой с заказом, а как сделать, чтобы выделялось только неправильное поле?

[Роман Грицук]

Отловить код ошибки и на фронте вывести ошибку там где надо. Универсального решения нет.