Required fields can not be focusable

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 😅

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

same here

Also experiencing this

Same here.

Seeing this in Chrome 42 as well.

Same here on Chrome 43.

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

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.

@brianreavis

@brianreavis any thoughts on this?

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

work around required form field bug

Fix unfocusable required select fields selectize#733

Add dist files selectize#733

any updates on this?

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

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.

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

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
.

We got a winner!

STR

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

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

A fix is committed, would someone confirm?

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.

@kmarcisz

@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.

@joallard

@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.

Refactor and clean-up validity features to fix selectize#733

Navigation Menu

Repository navigation

Required fields can not be focusable #733

3 remaining items

STR

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Required fields can not be focusable #733

Description

Activity

scaytrase commented on Mar 12, 2015

conarwelsh commented on Mar 18, 2015

therocode commented on Mar 25, 2015

rudymacias commented on Mar 29, 2015

seanodotcom commented on May 5, 2015

chibicode commented on Jun 5, 2015

Alex-Sokolov commented on Oct 6, 2015

dexcell commented on Oct 16, 2015

oswaldoacauan commented on Oct 23, 2015

sintro commented on Oct 28, 2015

bogdancss commented on Jun 2, 2016

3 remaining items

joallard commented on Jul 20, 2016

kmarcisz commented on Jul 29, 2016

joallard commented on Jul 29, 2016

oswaldoacauan commented on Jul 29, 2016

joallard commented on Aug 1, 2016

STR

joallard commented on Aug 1, 2016

kmarcisz commented on Aug 1, 2016

joallard commented on Aug 1, 2016

fgagne commented on Aug 18, 2016

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions