CODEWITHSUNDEEP
javascriptjqueryformsvalidationtags
ian
ian

Reputation: 313

Tag-it (UL LI) field not validating correctly

I am trying to validate my form using Jquery validation: https://jqueryvalidation.org/. Below is my code, and I have set up a jsfiddle (http://jsfiddle.net/Z3HDh/62/) to work with.

The validator works correctly on a regular input field, as you can see if you click submit. However, the validator does not work on the "tags" field. More accurately, it works on the "tags" (hidden) input field, but not on the the actual "tags" display, which is inside UL LI tags. If you go into the inspector and "unhide" the following field "input.tagit-hidden-field", you see that the validation works.

My question: How do I get the validation to work on the field where the "tags" actually display, inside the UL LI tags?

I have read one thread on this issue (JQuery.Validate clean way to check if a ul has at least one li item) but haven't been able to figure it out. 

$("#id_material").tagit();

$("#add_idea_form").validate();
input.error,
td.field input.error,
td.field select.error,
tr.errorRow td.field input,
tr.errorRow td.field select {
  /*background-color: #ffffd5;*/
  border: 2px solid #d17877;
  background: #F2DEDE;
  box-shadow: none;
}

#add_idea_form label.error {
  color: red;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://aehlke.github.io/tag-it/js/tag-it.js"></script>
<link rel="stylesheet" type="text/css" href="https://aehlke.github.io/tag-it/css/jquery.tagit.css">
<link rel="stylesheet" type="text/css" href="https://aehlke.github.io/tag-it/css/tagit.ui-zendesk.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>



<form method="post" id="add_idea_form" action="" class="main-form main-form-small addItemForm">

  <div class="form-group">
    <label for="id_title">Add your title here (required)</label>
    <input type="text" id="id_title" name="title" maxlength="75" value="" required data-msg="Please add a title.">
  </div>
  <!-- end form-group -->


  <div class="form-group">
    <label for="id_material">Your tags go here... (required)</label>
    <input type="text" id="id_material" name="material" value="" required data-msg="Add some tags, puhleeeease!">
  </div>

  <div class="form-group-buttons">
    <p class="form_buttons">
      <a href="<?php echo $this->cancel_link . $this->item_type; ?>s" class="dgrey-button cancel-button">Cancel</a>
      <button type="submit">Submit<img id="bigpic" /></button>
    </p>
  </div>
  <!-- end form-group-buttons -->

</form>

Upvotes: 1

Views: 547

Answers (1)

Daidon
Daidon

Reputation: 746

jquery.validate() is not meant to validate ul's, so maybe you should follow another approach.

As you can read here (https://jqueryvalidation.org/validate/) you can pass validate a submithandler with a callback function. This gets executed after the validation. In there, you can add custom code to check for the li's in the ul.

I suggest, instead of

$("#add_idea_form").validate();

You shoud use:

$("#add_idea_form").validate({
    submitHandler: function (form) {
        if($('#add_idea_form ul li').length < 2){
            console.log("No li's in the ul");
            //Display some message to the user here
            return false;
        }
    }
});

Upon validation, the callback function checks if the ul has less than 2 li's. You usually should have at least one at all times, namely the one, that carries the input field for the next tag. So anything that is 1 or 0 should mean you don't have any tags.

return false; prevents the form from being sent, but before that, you should display some message to the user.

I hope this helps. Dai

Oh and here your edited fiddle: http://jsfiddle.net/Z3HDh/84/

EDIT:

Actually, from the link you provided, the solution is very similar to George Siggouroglou's. You might want to give him an upvote. Also, if you want to send the form after post-validation, use form.submit(); as stated in the docs. :-)

Upvotes: 1

Related Questions