search

dragonofmercy / Tokenize2

Tokenize2 is a plugin which allows your users to select multiple items from a predefined list or ajax, using autocompletion as they type to find each item. You may have seen a similar type of text entry when filling in the recipients field sending messages on facebook or tags on tumblr.
https://dragonofmercy.github.io/Tokenize2/
BSD 3-Clause "New" or "Revised" License
83 stars 25 forks source link

HTML5 'required' constraint validation fails on Safari #54

Closed raoulsullivan closed 6 years ago

raoulsullivan commented 6 years ago

If a select element has the required attribute then changing the token in tokenize2 results in the select element being invalid (.checkValidity() returns false), even though an option has the selected attribute set correctly and .value returns the correct value. Selecting the value directly in the select element works fine.

I'm guessing this could well be a Safari issue instead! Safari versions 10.1.2 and 11.1.2.

HTML

<body>
  <form action="" method="POST">
    <select id="broken" required="required" multiple="multiple">
      <option value="" select="selected"></option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <button type="submit">Submit</button>
  </form>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script type="text/javascript" src="<Link to Tokenize2 v1.1>"></script>
  <script type="text/javascript">$('#broken').tokenize2({'dataSource': 'select', 'tokensMaxItems': 1});</script>
</body>

Investigating in console after setting token "1"

> $('#broken').find('option:selected')
jQuery [<option>] 
> $('#broken').val()
["1"] 
> document.getElementById('broken').value
1
> document.getElementById('broken').checkValidity()
false
dragonofmercy commented 6 years ago

I don't have to problem on my version, here is my testing code

$('#broken').tokenize2({
    tokensMaxItems: 1
});

$('#btn_validation').on('click', function(e){
    e.preventDefault();
    console.log($('#broken').get(0).checkValidity());
});
raoulsullivan commented 6 years ago

Thanks for taking the time to look into this - could I confirm you were testing this with Safari? I didn't have similar problems with any builds of Chrome or Firefox that I tried.

I'll ask my mac-wielding colleagues to take a deeper look and I'll report back here either way.

maxkarl commented 6 years ago

@zellerda Same issue for me with the latest Safari version 12.0 @raoulsullivan FYI

raoulsullivan commented 6 years ago

Thanks, Max. @zellerda this is now on our project bug tracker and we'll do a PR back here if we fix it. Or at least let you know if we find out it's something else ;)