javascript - How to validation in jquery sortable? -

my validation code :

$('#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 not add room type');         return false;     }     else {         alert('please drop customer room type');         return false;     } }); }); 

here example of html 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 : https://jsfiddle.net/oscar11/ml7qr5z1/

my validation working in cases, in cases form above, showing success when should showing, "please drop customer room type".

any suggestions solve problem?

thank you

you may change 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 not add room type');         return false;     }     else {         alert('please drop customer 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 not add room type');        return false;      }      else {        alert('please drop customer 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>