invalid form control with name='' is not focusable

[1DMF]

Hi,

This is doing my head in.

Yes, I've researched and all the threads I can find waffle on about a hidden form field causing the problem.

But I don't have one?

I've done a console.log($(':hidden')) and none of the elements are part of the form and definitely none matching $('[required]')

It's not happening when I run my validation ..

function checkValid(ele)
{

  try
  {
    if($(ele).prop('tagName') == 'TEXTAREA')
    {
      validateTextarea.call(ele);
    }    
    
    if($(ele).prop('validity').valid)
    {
      var remove = 'invalid';
      var add = 'valid';
      
      if($(ele).attr('minlength') && $(ele).attr('minlength') > $(ele).val().length)
      {                   
        var remove = 'valid';
        var add = 'invalid';
      }
      else if ($(ele).attr('maxlength') && $(ele).attr('maxlength') < $(ele).val().length)
      {                     
        var remove = 'valid';
        var add = 'invalid';
      }
        
      $(ele).removeClass(remove);
      $(ele).addClass(add);
    }
    else
    {               
      $(ele).removeClass('valid');
      $(ele).addClass('invalid');
    }
  }
  catch(e){};

  if(!$(ele).prop('required') && $(ele).val() == '')
  {
    $(ele).removeClass('valid');
  }

  // trigger validate event
  $( document ).trigger('validated');          
}


function validateTextarea()
{         
  var errorMsg = "Please match the format requested.";
  var textarea = this;
  var pattern = new RegExp('^' + $(textarea).attr('pattern') + '$');
  var rev_pattern =  new RegExp($(textarea).attr('pattern').replace(/^\[/,'[^'));
  $(textarea).val($(textarea).val().replace(rev_pattern, ''));
  
  // check each line of text
  $.each($(textarea).val().split("\n"), function () {
    // check if the line matches the pattern
    var hasError = !this.match(pattern);
    if (typeof textarea.setCustomValidity === 'function')
    {
      textarea.setCustomValidity(hasError ? errorMsg : '');
    }
    else
    {
      // Not supported by the browser, fallback to manual error display...
      $(textarea).toggleClass('invalid', !!hasError);
      $(textarea).toggleClass('valid', !hasError);
      if (hasError)
      {
        $(textarea).attr('title', errorMsg);
      }
      else
      {
        $(textarea).removeAttr('title');
      }
    }
   return !hasError;
  });
}

My validation icons all work fine, but when the form is submitted, if there is a visible, but not valid element, that error occurs in the console. but the in-built browser validation message still appears 'Please fill in this field'.. blah blah ..

What is causing this error? Is it a bug in Chrome on Linux or am I going blind?



"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[1DMF]

I found the answer....

It is a bug in Chrome related to the first <fieldset>. If you remove it then the error doesn't appear. Even if you give the fieldset a name Chrome will still give the error.

https://code.google.com/p/chromium/issues/detail?id=498668

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music