field validation on click of the disabled submit button

[StefanHoutzager]

I see that validations on fields are executed when you leave them. Is it possible to validate all fields when clicking on the disabled submit button? Maybe it would be good to have this as default behaviour.

[zackurben]

@StefanHoutzager whats your use case for this functionality? Validations happen on the blur event, as you correctly mentioned, but I don't feel good about giving a disabled button any functionality.

[StefanHoutzager]

I've seen the fuctionality at least in https://github.com/1000hz/bootstrap-validator (lots of stars). Some discussion wherein the functinality is named: https://github.com/1000hz/bootstrap-validator/issues/443. Usecase is that a user, which maybe did not touch every input with a validation, should be able to see what's wrong. That the submit button is disabled indicates the input is not ok, but not what is not ok.

[zackurben]

@StefanHoutzager do you not see field level error messages on incorrect inputs?

[StefanHoutzager]

Yes I see them, that's is not what my isssue is about. For that see the first description.

[zackurben]

@StefanHoutzager okay, if you see field level messages and the submit button is disabled, what do you want to happen when clicking the disabled submit button?

Are new error messages/notifications created and where are they shown?

[StefanHoutzager]

I like the https://github.com/1000hz/bootstrap-validator functionality (try it if you're interested). When you click on the submitbutton with that validator you see the error messages for single field validations just like all of them would have been on blur of the field on which the validation was defined.

[zackurben]

@StefanHoutzager, gotcha. Seems like a pretty cool idea, I'll float it by the team, thanks!

[tridnguyen]

@StefanHoutzager / @zackurben I ran into this same issue. If this is the same issue that is caused by error messages displayed on "focus out" of the input (pushing the submit button out of range of the click), I was able to resolve this by adding a delay on the help-block display. In the Validator.prototype.showErrors function, I wrapped the $block DOM manipulation with a timeout:

        window.setTimeout(function () {
            $block.empty().append(errors);
        }, 100);