Unexpected default behavior for browsers that don't support required input fields / form validation

[ahx]

rails.js adds a behavior to forms so that these don't get submitted if there is a blank required input field. This results in unexpected behavior for browsers that don't support form validation.

The following demo uses jQuery 1.9.1 and the current rails.js.
Open http://jsfiddle.net/wqWMf/4/ in the current version of Safari (6.0.3) and hit the submit button.

Current behavior: Nothing happens

Expected behavior:
Either a) the form should get submitted although the required field is missing
or b) jquery-ujs should add some default styling to highlight the missing fields.

Everything works as expected with browsers that support form validation.

I think the behavior should either be removed or we should have to opt-in explicitly like we are doing with the data-remote, data-confirm,… attributes.

Living in Railsland we know hot show error-messages coming from the server-side validations in forms. The current behavior breaks this, because the form does not get submitted and no error-messages get rendered.

[JangoSteve]

It's meant to act as a polyfill for browsers that don't prevent the form from being submitted. Since some do, it's always a good idea to handle it yourself. What we don't want is someone assuming that the form can be submitted with blank required fields just because the browser they're using to develop and test happens to allow it (thus not realizing that their site would be broken in other browsers). This way, they'll see it no matter what, whether their browser of choice supports it or not.

[ahx]

What we don't want is someone assuming that the form can be submitted with blank required fields[…].

Why would any developer add required attributes to input fields and still assume that the form can be submitted with blank fields?
If i mark a field as required, i would never assume that it really isn't – unless the browser does not support form validation.
If this is meant as a polyfill, i think it's not a good one, because it breaks the UX on some browsers (see above).

The demo shows a bug, caused by rails.js and me trusting my assumptions how required fields would work (or not work). You are right that it's always a good idea to handle form validation yourself, but making the form act in unexpected ways does not help.
This behavior also works around showing custom errormessages coming from the Rails app, SimpleForm, Formtastic or the like. It's still useful to add these error messages on the server-side, so why break this?

Basically i just can't think of a use case for this to be the default behavior.

[JangoSteve]

Why would any developer add required attributes to input fields and still assume that the form can be submitted with blank fields?

Because some browsers don't prevent the forms from being submitted. In fact, from your original post:

Expected behavior:
Either a) the form should get submitted although the required field is missing

It's not that we're making the form act in unexpected ways, it's that we're making it act the same way in all browsers.

Basically i just can't think of a use case for this to be the default behavior.

The thing is, it is the default behavior in some browsers, we didn't make it that way.

We could possible add some sort of default styling to complete the polyfill, but that wasn't part of the required field spec, so it wasn't implemented initially.

[bcm]

We could possible add some sort of default styling to complete the polyfill

👍 to that. we've had instances of developers going down rabbit holes trying to figure out why a form won't submit before putting the clues together. something obvious would be a big help.

[ahx]

You are not making it act the same way in all browsers, because it lacks the visual feedback, which is essential.
I would rather like that behavior to be removed, instead of completing the polyfill. There are enough polyfills already out there.
Looking forward to hearing some more opinions about this.

[JangoSteve]

I'm definitely all ears if anyone else has opinions on this. I'd prefer not to remove it, because like I said, browsers then act really differently, and it'd be easy to push out an app that's broken in some browsers due to the difference in behavior, and never know, which violates the element of least surprise.

[eheikes]

I ran into this issue as well, and I completely agree with @ahx. If this is meant to be a polyfill, it needs to include the visual feedback. As it currently stands, forms are broken in browsers that don't support validation natively.

[j-manu]

Please remove this behaviour. I wasted so much time trying to debug what was causing the form submission to fail.

1. The intention is to make all browsers act the same. But this goes only half the way and hence make it very confusing.
   In browsers which support required attributes, there is a visual indicator on the field giving immediate feedback. jquery-ujs just aborts the submit event with no visual feedback (or even a message to console). So if someone wants to make use of this, they will have implement the UI part. At that point it is better to use something like jquery-validate which is well tested.
2. Also why is this the default? jquery-ujs should not be modifying an ordinary form. If this is retained, this should be opt-in
3. "push out an app that's broken in some browsers" - How? Do you mean to say, people will not include error messages because the browser they are using will not allow form submission with blank required fields?

[michrome]

@JangoSteve super to hear you're all ears! As the other commenters have already suggested, the lack of any visual feedback brakes the principle of least surprise (for us at least). My vote would be to implement some sort of visual feedback, even if it were an alert.

Is there a quick way for developers to disable this in the meantime?

[derekprior]

@michrome , I'm late to the party, but came across this issue as I was researching an article I wrote on UJS. If the form is marked as novalidate then both this polyfill and native browser validation will not run. If you want to disable only the polyfill, you should be able to override $.rails.requiredInputSelector to be a selector that will be empty. I think this is the easiest, least impactful way to do this but I haven't actually tested it.

[gflateman]

For anyone else running into this, you can get the form to respond like so:

$('#my_form').on('ajax:aborted:required', handleErrors)

[itskingori]

I stumbled on this thread from @thoughtbot's article on 'jQuery UJS'. I must confess it's been months ... this has been baffling me. Forms on Safari wouldn't not submit ... on Chrome there's visual feedback on required fields.

I share @j-manu's sentiments.

[asafbrukarz]

We just ran into this issue as well.

Firstly it baffled us that Safari 8 does not implement HTML5 validations, but when we created a jsFiddle we were noticing different behaviour. When we started to track down the dozens of javascript widgets on our site, we narrowed it down to jquery_ujs.

My initial thought was "Why on earth is jquery.rails trying to implement browser behaviour?". If I wanted a polyfill, I would have added one. My preference is to at least have the browser default behaviour occur. On Safari, that would mean a form is submitted, the validation errors are returned by rails in the response and the user can action them.

In the current implementation, the user clicks 'Submit' and nothing happens. Not even a log to the console telling the developer why the submit was cancelled.

I think this is clearly a case of a library going beyond its expected behaviour.

[dnagir]

I agree that this behaviour shouldn't be part of jquery-ujs.

This little library is supposed to be "unobtrusive" (from the description itself).
But it is extremely obtrusive changing the default behaviour.

If this is a shim/polyfill then it should be explicitly stated that way.

If it IS a polyfill, then why doesn't it implement all other HTML5 built in validations?

There are plenty of validation libraries and it's not the responsibility of "unbotrisuve" UJS to deal with form validations.