如何验证jQuery可排序？

Question

我的验证码是这样的：

$('#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;
    }
});
});

这是无法正常工作的HTML的示例：

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

演示和完整代码是这样的： https : //jsfiddle.net/oscar11/mL7qr5z1/

我的验证在某些情况下有效，但在某些情况下（如上述表格），应在显示“请让客户选择房型”时显示成功。

有解决这个问题的建议吗？

谢谢

Answer 1

您可以将验证更改为：

$('#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;
    }
});

片段：

 $(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>