How to validation in jquery sortable?

Question

My Validation Code is like this :

$('#myForm').submit(function() {
    if ($("li.msg").length && $("li.msg ol li").length) {
        alert('success');
        return false;
    }
    else if (!$("li.msg").length && !$("li.msg ol li").length) {
        alert('You do not add a room type');
        return false;
    }
    else {
        alert('Please drop customer to a room type');
        return false;
    }
});
});

Here is an example of the HTML that is not working correctly:

<form id="myForm" action="" method="POST">
  box 2 (Room Type)
  <br>
  <select id="room_type">
    <option value="1">Single Room</option>
    <option value="2">Double Room</option>
    <option value="3">Twin Room</option>
  </select>
  <input type="button" value="Add" style="margin-top: -10px;" id="add_room">

  <ol class="example areaDROP vertical" id="room_list">
    <li class="room_number msg" data-id="1" data-name="Single Room">
      Single Room
      <ol>
        <li class="">Lionel Messi</li>
      </ol>
    </li>
    <li class="room_number msg" data-id="1" data-name="Single Room">
      Single Room
      <ol>
      </ol>
    </li>
  </ol>

    <button type="submit">Save</button>
</form>

Demo & Complete Code is like this : https://jsfiddle.net/oscar11/mL7qr5z1/

My validation is working in some cases, but in certain cases like the form above, it is showing success when it should be showing, "Please drop customer to a room type".

Any suggestions to solve this problem?

Thank you

Answer 1

You may change your validation to:

$('#myForm').submit(function(){
    var isSuccess = true;
    $("li.msg").each(function(index, element) {
        if ($(this).find("ol > li").length == 0) {
            isSuccess = false;
            return false;
        }
    });
    if ($("li.msg").length > 0 && isSuccess){
        alert('success');
        return false;
    }
    else if (!$("li.msg").length && !$("li.msg > ol > li").length){
        alert('You do not add a room type');
        return false;
    }
    else {
        alert('Please drop customer to a room type');
        return false;
    }
});

The snippet:

$(function () {
  $("ol.mauDIDROP").sortable({
    group: '.example'
  });

  $("ol.areaDROP").sortable({
    group:  '.example',
    drop: false,
    drag: false,
  });

  $("ol.areaDROP>li>ol").sortable({
    group:  '.example',
    drop: true,

  });

  $('#add_room').click(function(){
    var text = $("#room_type option:selected").html();
    var room_type_id = $.trim($('#room_type').val());

    $('#room_list').append('<li class="room_number msg" data-id="'+room_type_id+'" data-name="'+text+'">'+text+'<ol></ol></li>');

    $("ol.mauDIDROP").sortable({
      group: '.example'
    });

    $("ol.areaDROP").sortable({
      group:  '.example',
      drop: false,
      drag: false,
    });

    $("ol.areaDROP>li>ol").sortable({
      group:  '.example',
      drop: true,

    });

  });



  $('#myForm').submit(function(){
    var isSuccess = true;
    $("li.msg").each(function(index, element) {
      if ($(this).find("ol > li").length == 0) {
        isSuccess = false;
        return false;
      }
    });
    if ($("li.msg").length > 0 && isSuccess){
      alert('success');
      return false;
    }
    else if (!$("li.msg").length && !$("li.msg > ol > li").length){
      alert('You do not add a room type');
      return false;
    }
    else {
      alert('Please drop customer to a room type');
      return false;
    }

  });
});

ol.nested_with_switch li, ol.simple_with_animation li, ol.default li {
  cursor: pointer;
}
ol.vertical {
  margin: 0 0 9px 0;
}
/* line 12, jquery-sortable.css.sass */
ol.vertical li {
  display: block;
  margin: 5px;
  padding: 5px;
  border: 1px solid #cccccc;
  color: #0088cc;
  background: #eeeeee;
}
/* line 19, jquery-sortable.css.sass */
ol.vertical li.placeholder {
  position: relative;
  margin: 0;
  padding: 0;
  border: none;
}
/* line 24, jquery-sortable.css.sass */
ol.vertical li.placeholder:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  margin-top: -5px;
  left: -5px;
  top: -4px;
  border: 5px solid transparent;
  border-left-color: red;
  border-right: none;
}

/* line 32, application.css.sass */
ol {
  list-style-type: none;
}

/* line 34, application.css.sass */
ol i.icon-move {
  cursor: pointer;
}

/* line 36, application.css.sass */
ol li.highlight {
  background: #333333;
  color: #999999;
}

/* line 39, application.css.sass */
ol li.highlight i.icon-move {
  background-image: url("../img/glyphicons-halflings-white.png");
}


.content{
  float: left;
  width: 300px;
  border: 2px solid #999999;
  margin-right: 10px;
}

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://johnny.github.io/jquery-sortable/js/jquery-sortable.js"></script>


<div class="content">
    box 1 (Customer)
    <ol class='example mauDIDROP vertical'>
        <li>Valentino Rossi</li>
        <li>David Beckham</li>
        <li>Eden Hazard</li>
        <li>Lionel Messi</li>
        <li>Christiano Ronaldo</li>
        <li>Frank Lampard</li>
    </ol>
</div>

<div class="content">
    <form id="myForm" action="" method="POST">
        box 2 (Room Type)
        <br>
        <select id="room_type">
            <option value="1">Single Room</option>
            <option value="2">Double Room</option>
            <option value="3">Twin Room</option>
        </select>
        <input type="button" value="Add" style="margin-top: -10px;" id="add_room">

        <ol class="example areaDROP vertical" id="room_list">
            <!-- <li class="room_number msg1">Deluxe Room<ol><li>John Terry</li></ol></li>
              <li class="room_number msg1">Family Room<ol><li>Jose Mourinho</li></ol></li> -->
        </ol>

        <button type="submit">Save</button>
    </form>

</div>