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

Required fields can not be focusable #733

Closed
oswaldoacauan opened this issue Mar 10, 2015 · 21 comments
Closed

Required fields can not be focusable #733

oswaldoacauan opened this issue Mar 10, 2015 · 21 comments

Comments

@oswaldoacauan
Copy link

Error: An invalid form control with name=''" is not focusable.
File: /examples/required.html
Browsers: Chrome v40 and Chrome Canary v43
SO: Windows 7

Ref.: #63 and #136

Seems that the issue is back 😅

@scaytrase
Copy link

Confirm, required inputs become hidden and unfocusable (which leads to submit fail). Also I cannot make the selectized input required.

@conarwelsh
Copy link

same here
image

@therocode
Copy link

Also experiencing this

@rudymacias
Copy link

Same here.

@seanodotcom
Copy link

Seeing this in Chrome 42 as well.

@chibicode
Copy link

Same here on Chrome 43.

@Alex-Sokolov
Copy link

Some sort of workaround...

Let style invalid selects with red border

.selectize-control.invalid > .selectize-input {
    border-color: red;
}

And in init of each select add code for checking validation

$('select').each(function() {
    var $select = $(this).selectize(options);
    selectizeValidationFix($select);
});

function selectizeValidationFix($select) {

    var self = $select[0].selectize;

    self.$input.on('invalid', function (event) {
        event.preventDefault();
        self.focus(true);
        self.$wrapper.addClass('invalid');
    });

    self.$input.on('change', function (event) {
        if (event.target.validity && event.target.validity.valid) {
            self.$wrapper.removeClass('invalid');
        }
    });

}

Result: no error message in console about "not focusable" and styling invalid selects with red border. But if on page few selects - all opened together

@dexcell
Copy link

dexcell commented Oct 16, 2015

Yeah, hopefully this bug is going to fixed soon.

I did a quick dirty fix since i also need it. At least it worked for me.
On selectize.js (un-minified) line 2655.

Change the code from

self.$control_input.prop('required', invalid);

to

self.$control_input.prop('required', self.$input.val() == '');
self.$input.prop('required', false);

Use at your own risk. Only tested aganist dropdown style of selectizejs.
Hopefully it help someone.

@oswaldoacauan
Copy link
Author

@brianreavis any thoughts on this?

@sintro
Copy link

sintro commented Oct 28, 2015

Same problem, "is not focusable" problem is still here

pkarman pushed a commit to 18F/C2 that referenced this issue Nov 27, 2015
selectize.js has known bug with form fields marked as required being ignored.
selectize/selectize.js#733

This workaround patches vendor copy in-place per selectize/selectize.js#733 (comment)
ricobonfim added a commit to dotser/selectize.js that referenced this issue Mar 24, 2016
ricobonfim added a commit to dotser/selectize.js that referenced this issue Mar 24, 2016
ricobonfim added a commit to dotser/selectize.js that referenced this issue Mar 24, 2016
@bogdancss
Copy link

any updates on this?

@joallard
Copy link
Member

joallard commented Jun 6, 2016

It's not being actively worked on. A PR with tests is most welcome, and '+1' votes (not comments) help determine what's a priority.

@joallard joallard added this to the 0.12.3 milestone Jun 6, 2016
@joallard
Copy link
Member

I can't repro this in Chrome 52 (Mac). Is this still happening?

@joallard joallard removed this from the 0.12.3 milestone Jul 27, 2016
@kmarcisz
Copy link

This is still an issue. Just tried the examples/required.html on a Mac in Chrome 52, getting the An invalid form control with name='' is not focusable. error.

@joallard
Copy link
Member

Getting the error just loading the page? I'm definitely not getting that. It loads without any error.

@oswaldoacauan
Copy link
Author

I think you need to submit the form.

On Fri, Jul 29, 2016 at 2:16 PM Jonathan Allard notifications@github.com
wrote:

Getting the error just loading the page? I'm definitely not getting that.
It loads without any error.


You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#733 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABNbJsqJIpYW5LK-f1AqyCXc9aLKo3dTks5qajVugaJpZM4DsUkO
.

@joallard
Copy link
Member

joallard commented Aug 1, 2016

We got a winner!

STR

  1. In Chrome (using v51), go to examples/required.html
  2. Using the "Required element" example, make sure no option is selected
  3. Click Submit

Actual: Thrown "An invalid form control with name='' is not focusable."
Expected: No exception; browser indicates empty field error.

@joallard joallard added this to the 0.12.3 milestone Aug 1, 2016
@joallard
Copy link
Member

joallard commented Aug 1, 2016

A fix is committed, would someone confirm?

@kmarcisz
Copy link

kmarcisz commented Aug 1, 2016

Bug still present on the master branch. Same error, trying to submit an empty form in examples/required.html throws the same exception in console.

@joallard
Copy link
Member

joallard commented Aug 1, 2016

@kmarcisz Are you sure you're running the code in src/selectize.js and running the above STR? Because running STR in Chrome 52 doesn't return reported behavior for me.

@fgagne
Copy link

fgagne commented Aug 18, 2016

@joallard the fix is working on Chrome 52.0.2743.116 m (64-bit) on Windows 10.

I've build the master branch and I don't get the error.
I've build the 0.12.2 tag, I do get the error.

Thanks for fixing this.

bwilson-ux pushed a commit to bwilson-ux/selectize.js that referenced this issue Oct 4, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests