Invalid form control only in Google Chrome

Question

The code below works well in Safari but in Chrome and Firefox the form will not submit   Chrome console logs the error An invalid form control with name    is not focusable   Any ideas   Note that whilst the controls below do not have names  they should have names at the time of submission  populated by the Javascript below   The form DOES work in Safari    lt form method  POST  action   add bundle  gt    lt p gt        lt input type  text  name  singular  placeholder  Singular Name  required gt        lt input type  text  name  plural  placeholder  Plural Name  required gt    lt  p gt    lt h4 gt Asset Fields lt  h4 gt    lt div class  template-view  id  template row  style  display none  gt        lt input type  text  data-keyname  name  placeholder  Field Name  required gt        lt input type  text  data-keyname  hint  placeholder  Hint  gt        lt select data-keyname  fieldtype  required gt            lt option value    gt Field Type    lt  option gt            lt option value  Email  gt Email lt  option gt            lt option value  Password  gt Password lt  option gt            lt option value  Text  gt Text lt  option gt        lt  select gt           lt input type  checkbox  data-keyname  required  value  true  gt  Required      lt input type  checkbox  data-keyname  search  value  true  gt  Searchable      lt input type  checkbox  data-keyname  readonly  value  true  gt  ReadOnly      lt input type  checkbox  data-keyname  autocomplete  value  true  gt  AutoComplete      lt input type  radio  data-keyname  label  value  label  name  label  gt  Label      lt input type  radio  data-keyname  unique  value  unique  name  unique  gt  Unique      lt button class  add  type  button  gt   lt  button gt        lt button class  remove  type  button  gt - lt  button gt    lt  div gt     lt div id  target list  gt  lt  div gt        lt p gt  lt input type  submit  name  form submitted  value  Submit  autofocus gt  lt  p gt    lt  form gt    lt script gt   function addDiv         var pCount       template-view     target list   length      var pClone       template row   clone           select  input  textarea   pClone  each function idx  el            el     this           if   el  type     radio                 el attr  value   pCount          el data  keyname                       else                el attr  name   pCount          el data  keyname                                target list   append pClone       pClone show       function removeDiv elem       var pCount       template-view     target list   length      if  pCount    1                  elem  closest   template-view   remove                  add   live  click   function        addDiv             remove   live  click   function        removeDiv this          document  ready addDiv     lt  script gt

User · Answer

If you don t care about HTML5 validation  maybe you are validating in JS or on the server   you could try adding  novalidate  to the form or the input elements

User · Answer

I was getting this error  and determined it was actually on a field that was not hidden   In this case  it was a type  number  field  that is required  When no value has ever been entered into this field  the error message is shown in the console  and the form is not submitted  Entering a value  and then removing it means that the validation error is shown as expected   I believe this is a bug in Chrome  my workaround for now was to come up with an initial default value

User · Answer

Chrome wants to focus on a control that is required but still empty so that it can pop up the message  Please fill out this field    However  if the control is hidden at the point that Chrome wants to pop up the message  that is at the time of form submission  Chrome can t focus on the control because it is hidden  therefore the form won t submit   So  to get around the problem  when a control is hidden by javascript  we also must remove the  required  attribute from that control

User · Answer

replace required by required  required

User · Answer

I had the error      An invalid form control with name  telefono  is not focusable    This was happening because I was not using the required field correctly  which enabled and disabled when clicking on a checkbok  The solution was to remove the required attribute  whenever the checkbok was not marked and mark it as required when the checkbox was marked   var telefono   document getElementById  telefono      telefono removeAttribute  required

User · Answer

this error get if add decimal format  i just add  step  0 1

User · Answer

I have to do something like this to fix the bug  since I have some type  number  with min  0 00000001    HTML    lt input type  number  min  0 00000001  step  0 00000001  name  price  value    price      gt    JS      input type  submit     click function e          prevent chrome bug        input hidden   val null         If I don t set all hidden input field to null chrome will still try to validate the input

User · Answer

It will show that message if you have code like this    lt form gt     lt div style  display  none   gt       lt input name  test  type  text  required  gt     lt  div gt      lt input type  submit   gt   lt  form gt    solution to this problem will depend on how the site should work  for example if you don t want the form to submit unless this field is required you should disable the submit button   so the js code to show the div should enable the submit button as well  you can hide the button too  should be disabled and hidden because if it s hidden but not disabled the user can submit the form with others way like press enter in any other field but if the button is disabled this won t happen  if you want the form to submit if the div is hidden you should disable any required input inside it and enable the inputs while you are showing the div  if someone need the codes to do so you should tell me exactly what you need

User · Answer

No validate will do the job    lt form action  whatever  method  post  novalidate gt

User · Answer

attr  required    and          removeAttr  required       didn t work for me until I putted all my jQuery code between that     document  ready function           jQuery code goes here

User · Answer

I had this issue when I had class  hidden  on the input fields because I was using buttons instead of radio bullets - and changing the  active  state via JS    I simply added an extra radio input field part of the same group where i wanted the msg to appear    lt input type  radio  id  thenorm  name  ppoption  value     required style  opacity 0   gt    the other 2 active bullets are invisible  this one isnt and this triggers the validation message and no console errors - bit of a hack but what isnt these days

User · Answer

try to use proper tags for HTML5 controls Like for Number integers    lt input type  number  min  0  pattern    0-9    step  1   gt    for Decimals or float    lt input type  number  min  0  step  Any   gt    step  Any  Without this you cannot submit your form entering any decimal or float value like 3 5 or 4 6 in the above field   Try fixing the pattern   type for HTML5 controls to fix this issue

User · Answer

I got this error message when I entered a number  999999  that was out of the range I d set for the form    lt input type  number  ng-model  clipInMovieModel  id  clipInMovie  min  1  max  10000  gt

[html] "Invalid form control" only in Google Chrome

Examples related to html

Examples related to google-chrome