HTML5 customValidty - how to draw?

Question

I'm trying to use the HTML 5 validation for user login. However, after the form is submit I use ajax to authenticate on the server. If that fails I use the setCustomValidity(msg) method. However the method does not draw/show the validation message, but rather shows it on the next submit or change. How can I force it to draw immediately?

Additionally, there is a maxlength constraint but is there a minlength?

Below is the HTML form and javascript. At the moment after submit if the form is invalid the message get's set but is not drawn.

$(function() {
    $('form#login_form').submit(function(e) {
        console.log("submit");
        $.post('/auth_user', $(this).serialize(), function (data) {
            console.log(data);
            if(data != "") {
                login_password.setCustomValidity(data);
            }
        });
        e.preventDefault();
    });
});

<form action="/dashboard" id="login_form" method="post">
                    <div class="field-wrap">
                        <label>
                            Email Address<span class="req">*</span>
                        </label>
                        <input type="email" name="email" id="login_email" required autocomplete="off"/>
                    </div>
                    <div class="field-wrap">
                        <label>
                            Password<span class="req">*</span>
                        </label>
                        <input type="password" name="password" id="login_password" required autocomplete="off"/>
                    </div>
                    <p class="forgot"><a href="#">Forgot Password?</a></p>
                    <button type="submit" class="btn btn-lg btn-primary"/>Log In</button>
</form>

Can you include `html`, `css` at Question? _"HTML5 customValidty - how to draw?"_ , _"I'm trying to use the HTML 5 validation for user login."_ Not clear what requirement is. If requirement is to use `html5`, is requirement to also not use `javascript` to achieve expected result? — guest271314, Jan 05 '17 at 21:50
I've added the html form and javascript. I just want to use the built in validation pop ups from HTML5 (e.g. using the customValidity). Otherwise I do use javascript, but don't know how to force show it. — Alex Botev, Jan 05 '17 at 21:52
What is `login_password.setCustomValidity(data)`? Is requirement to use `html5` or `javascript` to achieve expected result? — guest271314, Jan 05 '17 at 21:53
That comes from here: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation_API , data is just a message - Invalid username or password. — Alex Botev, Jan 05 '17 at 21:54
potentially the password. But anyway I want first to draw the validity message. — Alex Botev, Jan 05 '17 at 21:57
This is a bit confusing. It appears as though you're not using your login form to ... log the person in? The semantics of forms are that you submit the form to the `action` defined on the `form` element. That's how the validity stuff was designed; so that invalid forms could not be submitted. You're posting the form to a different action via ajax, then coming back and trying to tell it the form's invalid, but you're cancelling the submission of the form. So of course it doesn't display the validity message, since you're not attempting to submit the form. — Heretic Monkey, Jan 05 '17 at 21:59
@MikeMcCaughan yes, I'm after this going to implement in an else statement to manually post or redirect. The reason is if the username/password are incorrect I want not to referesh the page. Is there any other hook, like validate or smth that is executed before the submit, where I can do this? — Alex Botev, Jan 05 '17 at 22:01
@Belov See http://stackoverflow.com/questions/5272433/html5-form-required-attribute-set-custom-validation-message for `javascript` approaches. You could alternatively use `html`, `css` to display invalid message. Why do you need to refresh page if username or password are not correct? How can validity messages be displayed if page is immediately refreshed if `form` is invalid? — guest271314, Jan 05 '17 at 22:04
if you post the form to the server, and there in the DB they are invalid you will refresh the page for the user. With the current setup the page is not refreshed at all. — Alex Botev, Jan 05 '17 at 22:06
You could try using [`this.reportValidity()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity), but I'm not sure on browser compatability. — Heretic Monkey, Jan 05 '17 at 22:08
Why does page need to be refreshed? You could call `.reset()` on `form` to reset `
` elements. How is refreshing page after `$.post()` call related to description of requirement at original Question? See http://stackoverflow.com/help/how-to-ask — guest271314, Jan 05 '17 at 22:08
@MikeMcCaughan thanks that was what I was looking for. It would have been nice if there is also a customValidator function which one can set, would make custom validators easy. — Alex Botev, Jan 05 '17 at 22:11

score 1 · Accepted Answer · answered Jan 05 '17 at 22:20

Technically, the reportValidity function on the form element should show the appropriate validation messages if any of the elements of the form are invalid.

According to the compatibility matrix at the bottom of that link, though, it does not work in Internet Explorer or Safari as of 2017-01-05.

HTML5 customValidty - how to draw?

1 Answers1