An invalid form control with name='' is no

Question

I have an acute problem on my website. In Google Chrome some customers are not able to proceed to my payment page. When trying to submit a form I get this error:

An invalid form control with name='' is not focusable.

This is from the JavaScript console.

I read that the problem could be due to hidden fields having the required attribute. Now the problem is that we are using .net webforms required field validators, and not the html5 required attribute.

It seems random who gets this error. Is there anyone who knows a solution for this?

Answer 1

For Select2 Jquery problem

The problem is due to the HTML5 validation cannot focus a hidden invalid element. I came across this issue when I was dealing with jQuery Select2 plugin.

Solution You could inject an event listener on and 'invalid' event of every element of a form so that you can manipulate just before the HTML5 validate event.

$('form select').each(function(i){
this.addEventListener('invalid', function(e){            
        var _s2Id = 's2id_'+e.target.id; //s2 autosuggest html ul li element id
        var _posS2 = $('#'+_s2Id).position();
        //get the current position of respective select2
        $('#'+_s2Id+' ul').addClass('_invalid'); //add this class with border:1px solid red;
        //this will reposition the hidden select2 just behind the actual select2 autosuggest field with z-index = -1
        $('#'+e.target.id).attr('style','display:block !important;position:absolute;z-index:-1;top:'+(_posS2.top-$('#'+_s2Id).outerHeight()-24)+'px;left:'+(_posS2.left-($('#'+_s2Id).width()/2))+'px;');
        /*
        //Adjust the left and top position accordingly 
        */
        //remove invalid class after 3 seconds
        setTimeout(function(){
            $('#'+_s2Id+' ul').removeClass('_invalid');
        },3000);            
        return true;
}, false);          
});

Answer 2

For Angular use:

ng-required="boolean"

This will only apply the html5 'required' attribute if the value is true.

<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />

Answer 3

In case anyone else has this issue, I experienced the same thing. As discussed in the comments, it was due to the browser attempting to validate hidden fields. It was finding empty fields in the form and trying to focus on them, but because they were set to display:none;, it couldn't. Hence the error.

I was able to solve it by using something similar to this:

$("body").on("submit", ".myForm", function(evt) {

    // Disable things that we don't want to validate.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", true);

    // If HTML5 Validation is available let it run. Otherwise prevent default.
    if (this.el.checkValidity && !this.el.checkValidity()) {
        // Re-enable things that we previously disabled.
        $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);
        return true;
    }
    evt.preventDefault();

    // Re-enable things that we previously disabled.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);

    // Whatever other form processing stuff goes here.
});

Also, this is possibly a duplicate of "Invalid form control" only in Google Chrome

Answer 4

Yet another possibility if you're getting the error on a checkbox input. If your checkboxes use custom CSS which hides the default and replaces it with some other styling, this will also trigger the not focusable error in Chrome on validation error.

I found this in my stylesheet:

input[type="checkbox"] {
    visibility: hidden;
}

Simple fix was to replace it with this:

input[type="checkbox"] {
    opacity: 0;
}

Answer 5

I came here to answer that I had triggered this issue myself based on NOT closing the </form> tag AND having multiple forms on the same page. The first form will extend to include seeking validation on form inputs from elsewhere. Because THOSE forms are hidden, they triggered the error.

so for instance:

<form method="POST" name='register' action="#handler">


<input type="email" name="email"/>
<input type="text" name="message" />
<input type="date" name="date" />

<form method="POST" name='register' action="#register">
<input type="text" name="userId" />
<input type="password" name="password" />
<input type="password" name="confirm" />

</form>

Triggers

An invalid form control with name='userId' is not focusable.

An invalid form control with name='password' is not focusable.

An invalid form control with name='confirm' is not focusable.

Answer 6

Alternatively another and foolproof answer is to use HTML5 Placeholder attribute then there will be no need to use any js validations.

<input id="elemID" name="elemName" placeholder="Some Placeholder Text" type="hidden" required="required">

Chrome will not be able to find any empty, hidden and required elements to focus on. Simple Solution.

Hope that helps. I am totally sorted with this solution.