oc-shopaholic / oc-buddies-plugin

👥 October CMS user system
https://octobercms.com/plugin/lovata-buddies
GNU General Public License v3.0
31 stars 15 forks source link

Use validationException with ajax forms #56

Open PubliAlex opened 3 years ago

PubliAlex commented 3 years ago

Hello,

When I'm working with octoberCMS, I used to use inline field validation with ajax forms triggered with data-attribute API.

I'm discovering buddies, and the whole shopaholic ecosystem, I can't figure out how to make it works. Here is the code of my page.

title = "Inscription"
url = "/inscription"
layout = "default"
is_hidden = 0

[Registration]
mode = "ajax"
flash_on = 1
redirect_on = 1
redirect_page = "compte/connexion"
activation = "activation_on"
force_login = 1
==
{% set arError = Registration.getErrorMessage %}
{% set arForm = Registration.getOldFormData %}

<section id="inscription" class="pb-3 pt-3">
    <div class="container">
        <form data-request="Registration::onAjax" data-request-validate>

            <div class="form-floating mb-3">
                <input class="form-control" type="text" id="field-email" name="email" placeholder="&nbsp;" value="{{ arForm.email }}" />
                <label class="form-label" for="field-email">{{ 'Email'|_ }}</label>
                <div class="invalid-feedback" data-validate-for="email"></div>
            </div>

            <div class="form-floating mb-3">
                <input class="form-control" type="password" id="field-password" name="password" placeholder="&nbsp;" />
                <label class="form-label" for="field-password">{{ 'Mot de passe'|_ }}</label>
                <div class="invalid-feedback" data-validate-for="password"></div>
            </div>

            <div class="form-floating mb-3">
                <input class="form-control" type="password" id="field-password-confirmation" name="password_confirmation" placeholder="&nbsp;" />
                <label class="form-label" for="field-password-confirmation">{{ 'Confirmez le mot de passe'|_ }}</label>
                <div class="invalid-feedback" data-validate-for="password_confirmation"></div>
            </div>

            <button class="btn btn-primary" type="submit">{{ 'Créer un compte'|_ }}</button>
        </form>
    </div>
</section>

I created that issue on Buddies plugin cause I'm testing with registration page first, but I believe it's a more global request as, for what I understood, it rely on Toolbox classes to handle form submission.

So maybe it's a toolbox request, but I think we should be able to use the octobercms way to handle fields error, using data-request-validate on form, and data-validate-for on elements.

Thank you