Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inline error message #21

Closed
Zmove opened this issue Jan 25, 2017 · 7 comments

Comments

@Zmove
Copy link

commented Jan 25, 2017

Hello,

It would be great to have an option to display error messages just before or just next the field instead of global message in the top of the form.

Just an idea to improve this plugin that is already really great !

Alex

@jajacobs

This comment has been minimized.

Copy link

commented Feb 3, 2017

Hi,
You can just remove your custom error display logic and leave it to the ajax framework. https://octobercms.com/docs/ajax/extras

Btw, nice work!

@skydiver

This comment has been minimized.

Copy link
Owner

commented Mar 2, 2017

I was working on the suggestion by @jajacobs and works fine except por recaptcha validation.

Another idea in #35 is to pass a variable with the errors and add some custom javascript to mark the fields.

@skydiver

This comment has been minimized.

Copy link
Owner

commented Mar 5, 2017

@Zmove or @jajacobs, can you test the branch "inline-errors" ?

There is a variable in the response and javascript (a new js file is loaded) marks the errors fields ...

This is a demo code i was testing

<form data-request="{{ __SELF__ }}::onFormSubmit" data-request-validate data-request-flash>

    {{ form_token() }}

    <div id="{{ __SELF__ }}_forms_flash"></div>

    <div class="form-group">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" class="form-control">
        <div data-validate-for="name"></div>
    </div>

    <div class="form-group">
        <label for="email">Email:</label>
        <input type="text" id="email" name="email" class="form-control">
        <div data-validate-for="email"></div>
    </div>

    <div class="form-group">
        <label for="subject">Subject:</label>
        <input type="text" id="subject" name="subject" class="form-control">
    </div>

    <div class="form-group">
        <textarea id="comments" name="comments" rows="8" cols="80"></textarea>
    </div>

    <button id="simpleContactSubmitButton" type="submit" class="btn btn-default">Submit</button>

</form>

Thanks.-

@jajacobs

This comment has been minimized.

Copy link

commented Mar 20, 2017

Why don't you put <span data-validate-for="g-recaptcha-response"></span> under {% partial '@recaptcha' %} ?

<div class="form-group">
        {% partial '@recaptcha' %}
        <span data-validate-for="g-recaptcha-response"></span>
</div>
@skydiver

This comment has been minimized.

Copy link
Owner

commented Apr 10, 2017

The BETA branch has the inline functionality.
Anyone wants to test before release?

Thanks.-

@skydiver

This comment has been minimized.

Copy link
Owner

commented Apr 14, 2017

Inline errors was release in version 1.3.7

@skydiver skydiver closed this Apr 14, 2017

@skydiver skydiver removed the help wanted label Apr 14, 2017

@ghost

This comment has been minimized.

Copy link

commented Jun 27, 2017

Small question that refer to that issue that was merged with this one.

How do you add an "has-error" class to element that does not validate ?

I red the documentation, was able to display the error message in a div under the field, but I don't see how can I add an error class to the parent div of the field that don't validate.

Thanks for the help

EDIT : And I found a small issue with inline error message (they don't disappears if the form correctly validate a second time). To reproduct :

  • Create a form with inline validation field (required for example)
  • Submit the form with a required field empty, the inline validation message will be displayed
  • Fill that required field, and submit the form again
  • The inline error message will still appears whereas that form element is valid, I think it's a UI issue. The message should disappear.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.