Twitter Bootstrap Question posted in

validating the tag input when it is not filled-Twitter bootstrap

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

Tags:

4

Answers


  1. 0

    You have to add required='required' on your input first.

    After that you must check during onClick event the value set and decide if it is right or wrong according to autocomplete source values.

    See sample here

    Login or Signup to reply.
  2. 0

    You need to write custom javascript for validation.

     function validateForm()
    {
     
        var a = document.getElementById("form-tags-4").value;
        if (a == "" )
        {
            alert("Please Fill The Required Field");
            return false;
        }
     
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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 " onclick="return validateForm()">SAVE</button>
    Login or Signup to reply.
  3. 0

    Add form tags and add “required” on input.

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

    working fiddle

    Login or Signup to reply.
  4. 0

    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”.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search