validating the tag input when it is not filled

Question

I have a tag input it is working but, without entering the value if I click on submit button, it should display an error message like required field

$('#form-tags-4').tagsInput({
  'autocomplete': {
    source: [
      'apple',
      'banana',
      'orange',
      'pizza'
    ]
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://raw.githubusercontent.com/underovsky/jquery-tagsinput-revisited/master/dist/jquery.tagsinput-revisited.min.css" rel="stylesheet"/>
<script src="https://raw.githubusercontent.com/underovsky/jquery-tagsinput-revisited/master/dist/jquery.tagsinput-revisited.min.js"></script>

<label>Tags input with autocomplete:</label>
<input id="form-tags-4" name="tags-4" type="text" value="">
<button type="submit" id="save" class="btn btn-default ">SAVE</button>

Here is the reference link

Answer 1

Yes, you have this error because Chrome (or other browser) can't focus the element. The original text input is hidden by the plugin.

So you get the error :

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

The plugin uses display: none; on the original field, which is a mistake I think. You can apply this CSS to have the correct validation message :

.form-tags-required {
    position: absolute;
    left: 0;
    opacity: 0;
    display: block !important;
    top: 10px; // depends on your form, adapt it
}

This way, the original input can be focused and receive the "required error".