Этот сайт лучше всего просматривать в современном браузере с включённым JavaScript.

lovata.Buddies Вывод message из Ajax ответа

404

Всем привет, ранее с october не сталкивался. Начал понемногу учиться, но споткнулся в самом начале. Установил плагин Buddies. Его документация рассчитана на наличие определенных знаний. Всё что в ней имеется по AJAX - $('form').request('Registration::onAjax');.
Я создал такую форму и если все значения корректны, пользователь появляется в базе.

[Registration]
mode = "ajax"
redirect_on = 1
redirect_page = "registration_success"
activation = "activation_on"
force_login = 0
==

<form  data-request="Registration::onAjax" data-request-validate>
	<label for="field-email">Email</label>
	<input type="email" id="field-email" placeholder="Email" name="email">

	<label for="field-company-name">Company name</label>
	<input type="text" id="field-company-name" placeholder="My company" name="property[company_name]" value="{{ arForm.property.company_name }}">

	<label for="field-password">Password</label>
	<input type="password" id="field-password" name="password">

	<label for="field-password-confirmation">Password confirmation</label>
	<input type="password" id="field-password-confirmation" name="password_confirmation">

	<button type="submit">Submit</button>
</form>

Проблема в том, что я не понимаю, как вывести на страницу сообщения по типу "Введён неверный email, Введите пароль, Пароли не совпадают".
В консоле ajax возвращает такой ответ:

JSON	
status	false
data	{…}
field	password
message	The Password field is required.
code	0
Полезная нагрузка ответа	
{"status":false,"data":{"field":"password"},"message":"The Password field is `required.","code":0}

В обработчике это выглядит примерно так:

if (empty($arUserData) || !is_array($arUserData)) {
            $sMessage = Lang::get('lovata.toolbox::lang.message.e_not_correct_request');
            Result::setFalse()->setMessage($sMessage);
            return null;
        }

Вопрос в том, как выводить на страницу регистрации сообщения "message" полученные из ответа ajax?

reazzon

404 C Buddies видимо надо работать через JS код.

Пример работы форм через JS. https://octobercms.com/docs/ajax/javascript-api

404

reazzon Спасибо за ответ. Я изначально пытался делать через JS, но у меня не получалось, скорее всего я что-то делаю неправильно.
1 вариант у меня был такой:
<form onsubmit="$(this).request('Registration::onAjax');">
2 вариант - я пробовал добавить скрипт на страницу после формы:

<form>
    ...
</form>
<script>$('form').request('Registration::onAjax');</script>

Но это не дало никаких результатов и ajax в принципе не работал в форме.

reazzon

404 конструкции не правильные. Попробуй эти

$.request('Registration::onAjax')

<form onsubmit="$.request('Registration::onAjax')">
</form>

<form id="formid">
</form>
<script>
    $('#formid').submit(function(event){ 
        event.preventDefault();
        $.request('Registration::onAjax')
    });
</script>

404

reazzon Спасибо, получилось отправить форму через такой скрипт:

<script>
    $('#register').submit(function(event){
        event.preventDefault();
        $(this).request('Registration::onAjax');
    });
</script>

Теперь что бы вытащить сообщения об ошибках из ответа сервера, мне нужно использовать средства october data-request-validate?

reazzon

404 мне нужно использовать средства october data-request-validate?

Так ты выше писал что ошибка и так возвращается через json, ты ее хватай и обрабатывай через JS

404

В общем, пока делал регистрацию, решил, что будет проще связать Rainlab.User с шопоголиком, чем Buddies с остальными плагинами и блогом. Если кому-нибудь пригодится, был такой код, недоделанный, но поля проходили валидацию, ошибки выводились под полями, а регистрация работала.

title = "registerold"
url = "/registerold"
layout = "default"
description = "registerold"
is_hidden = 0

[Registration]
mode = "ajax"
redirect_on = 1
redirect_page = "/"
activation = "activation_on"
force_login = 0
==
<?php
use October\Rain\Exception\ValidationException;
use Plugins\Lovata\Buddies\Components\Registration;

function onSubmit()
{
	Validator::extend('login_first_letter', function($attribute, $value, $parameters) {
		return (preg_match("/^[a-zA-Z].*$/", $_POST['nickname']));
	});
	Validator::extend('login_last_letter', function($attribute, $value, $parameters) {
		return (preg_match("/^.*[a-zA-Z0-9]$/", $_POST['nickname']));
	});
	Validator::extend('login_char_letter', function($attribute, $value, $parameters) {
		return (preg_match("/^[A-Za-z0-9_]*$/", $_POST['nickname']));
	});
	Validator::extend('pass_char_letter', function($attribute, $value, $parameters) {
		return (preg_match("/^[^а-яА-ЯёЁіІЇїєЄ\s]+$/", $_POST['password']));
	});

	$rules = [
		'nickname' => 'required|login_char_letter|login_first_letter|login_last_letter|between:3,20',
		'email' => 'required|email',
		'password' => 'required|confirmed|min:6|pass_char_letter'
	];

	$messages = [
		'login_first_letter' => 'Логин должен начинаться с латинской буквы.',
		'login_last_letter' => 'Логин должен заканчиваться латинской буквой, или цифрой.',
		'login_char_letter' => 'Логин может содержать только латинские буквы, цифры и подчёркивания (_).',
		'pass_char_letter' => 'Пароль не допускает использования кириллицы и пробелов.'
	];

	// запускаем валидатор
	$validator = Validator::make(post(), $rules, $messages);

	// если нашли ошибки, то создаём исключение
	if ($validator->fails()) {
		throw new ValidationException($validator);
	} else {

	}

}
?>
==
<div class="uk-container uk-container-large">
	<h1>Регистрация</h1>
	<form id="register" class="uk-light1" data-request data-request-validate novalidate>
		<div class="uk-margin">
			<label class="uk-form-label" for="field-email">Email*</label>
			<div class="uk-form-controls">
				<input data-track-input id="field-email" class="uk-input uk-form-width-large" name="email" type="email" placeholder="Email">
				<div class="uk-text-danger" data-validate-for="email"></div>
			</div>
		</div>
		<div class="uk-margin">
			<label class="uk-form-label" for="field-nickname">Login*</label>
			<div class="uk-form-controls">
				<input id="field-nickname" class="uk-input uk-form-width-large" name="nickname" type="text" placeholder="Login">
				<div class="uk-text-danger" data-validate-for="nickname"></div>
			</div>
		</div>
		<div class="uk-margin">
			<label class="uk-form-label" for="field-password">Password*</label>
			<div class="uk-form-controls">
				<input id="field-password" class="uk-input uk-form-width-large" name="password" type="password" placeholder="Password">
				<div class="uk-text-danger" data-validate-for="password"></div>
			</div>
		</div>
		<div class="uk-margin">
			<label class="uk-form-label" for="field-password-confirmation">Password confirmation*</label>
			<div class="uk-form-controls">
				<input id="field-password-confirmation" class="uk-input uk-form-width-large" name="password_confirmation" type="password" placeholder="Password confirmation">
				<div class="uk-text-danger"></div>
			</div>
		</div>
		<button class="uk-button uk-background-primary" type="submit">Зарегистрироваться</button>
	</form>
</div>
<script>
    $(document).on('ajaxSetup', function(event, context) {
        context.options.loading = $.oc.stripeLoadIndicator
    });
    $('#register').submit(function(event, context){
        event.preventDefault();
        $(this).request('onSubmit', {
            success: function() {
				$(this).request('Registration::onAjax', {
                    success: function(data) {
						let type = data.data.field;
						let div = $("#field-"+type);
						let message = data.message;
							if(data.status) {
								div.removeClass('uk-form-danger');
							} else {
								div.addClass('uk-form-danger');
								div.next().text(message);
							}
            }
    	});
            }
        });
    });
    $(document).on('ajaxFail', function() {
        alert('Критическая ошибка!')
    });
    $(window).on('ajaxInvalidField', function(event, fieldElement, fieldName, errorMsg, isFirst) {
        alert('ошибка');
        var $field = $(fieldElement).closest('.uk-input');

        if (!$field.length) {
            return
        }

        event.preventDefault();

        $field.addClass('uk-form-danger');

        $(window).one('ajaxErrorMessage', function(event, message){
            event.preventDefault()
        })
    });
    $(document).on('ajaxPromise', '[data-request]', function() {
        alert('успешно');
        var $form = $(this).closest('form');

        if (!$form.length)
            return;

        $('.uk-input.uk-form-danger', $form).removeClass('uk-form-danger')
    });
</script>