Prompt form validation differs between key submit and mouse submit

[Tilogorn]

I have a numerical prompt validating the input for a specific range.

bootbox.prompt({
    title: 'Your age?',
    inputType: 'number',
    min: 18,
    max: 99,
    required: true,
    callback: function(result) {
        if (result !== null) {
            console.log('Your age is ' + result);
        }
    }
});

When the prompt is submitted by the enter key, the form validation message from the browser shows up, when the value is out of range:

(this is german for "Please choose a value not lower than 18")

Submitting the same input by clicking the "OK"-button just leads to a red border around the input, no message:

You can try it out on this codepen.

Tested in latest Firefox (screenshots) and Chrome. Is this the desired behaviour? I'd expect to see the message too when clicking the "OK" button.

[tiesont]

Is this the desired behaviour?

Not really, but native validation is not easy to deal with. You can see what we're doing here: https://github.com/makeusabrew/bootbox/blob/master/bootbox.js#L609 - checkValidity() is enough to let Bootstrap's styles kick in, but doesn't (as far as I know) trigger the native messages to display.

I suppose I could take a crack at building out Bootstrap's validation markup when building the dialog, but that won't be anytime soon (and probably not here).

[tiesont]

Hmmmmmm. reportValidity might actually work. Problem is, it's not supported in Internet Explorer, which we (I, really) are still trying to support.

So, you could always fork this repo and see if reportValidity works for you. Otherwise... possibly checking for reportValidity, then failing to checkValidity might be an option. But I'm just riffing here - going to be a bit before I can spend some time testing that one way or another.

[tiesont]

So... that does actually seem to work. https://jsfiddle.net/0oz5x94y/

Like I mentioned, though, it won't work in IE, so I can't just make that change and publish. I'd need to spend some time thinking about the best route to make that work.

[Tilogorn]

@tiesont Thanks for your time and the insights. I indeed need to support IE (glad you keep on supporting it!) so patching your source to use just reportValidity() is no workaround (quick googling: there are some polyfills around, though).

I still didn't get why key and click lead to different behaviours until i recognized that the "OK"-button is of type="button" instead of type="submit". When I change that directly in the HTML in the dev console, the message shows up on both events! Is there a reason you don't use type="submit" on that button?

[Tilogorn]

I changed the property in line 291 of your fiddle so you know what I mean (I don't know if that is the correct position for all use cases, but it works for the fiddle).

https://jsfiddle.net/gv2ey0m3/

It surely has to be tested on all browers/with all input possibilities, but as you supported submitting the form by enter key earlier, there should be no difference to that by just clicking that submit-typed button.

[tiesont]

The buttons for alert, confirm, and prompt are all generated by the same helper, and it doesn't really make sense for alert and confirm to have a submit button.

Might make sense to override the button's type when building a prompt. Worth thinking about.

That being said, I'm not sure how much more development I'll be putting in here. The owner of this repo hasn't been around in a while, and there's stuff I can't do without admin privileges (like adding more collaborators). The plan at this point is to (kinda/sorta) fork this into an organization version, and then start building out a Typescript version compatible with the upcoming Bootstrap 5 release. That means anything I do here has to be portable to that repo (when/if it gets started), so...

That feels like I went off on a tangent. Sorry. I'll think about if this is worth investigating and implementing, but as I noted, you can always fork your own copy and use that, if it works well enough for you.

[Tilogorn]

Stupid me: the solution with type="submit" doesn't work. I took your fiddle without removing your own workaround with reportValidity. Using my initial codepen (and my personal project) leaves me unsuccessful.

That said and regarding your last comment there won't be a fix soon.

[tiesont]

It all depends on a combination of motivation and opportunity - I'd like the validation parts to work consistently, if I can do it without a significant investment of time. Not because I think it would be a waste, but rather because I've actually been pretty busy with work.

You might want to checkout bootprompt - it's essentially a rewrite of bootbox in Typescript, plus some tweaks/improvements. The author of that project might have solved the validation issue. Not 100% sure what the IE support would be - think it uses some ES6 or ES7 features, the latter of which IE11 can't handle.

[tiesont]

Think I may have something workable, here: https://jsfiddle.net/vyd7re2m/

Branch: https://github.com/bootboxjs/bootbox/tree/prompt-validation-fix