jQuery排序验证

jQuery Sortable validation

本文关键字：验证 排序 jQuery      更新时间：2023-09-26

我是javascript&jquery，但我正试图了解如何实现一个验证表单，当用户按正确的顺序放置/拖动图像时，就可以提交表单。我有按不同顺序拖动的图像，以及一个在数组中输出顺序的警告框，但我该如何设置一个值，让用户在其中排列图像数组？我有最新版本的jQuery链接到页面和jQuery UI。

我正试图在代码中实现一个if-else语句。我只是不确定哪里出了问题。这是我到目前为止得到的。。

$(window).load(function(){
  $(function() {
    //$('#submit').on('click', function() {
    //var valid = true,
    //message = '';
    $( "#sortable" ).sortable({
      placeholder: "ui-state-highlight",
      cursor: 'crosshair',
      update: function(event, ui) {
        var order = $("#sortable").sortable("toArray");
        $('#image_order').val(order.join(","));
        alert($('#image_order').val());
      }
    });
    
    $( "#sortable" ).disableSelection();
    //if('#image_order').val { != [4,3,2,1];
    //valid = false; }
    //else {
    //window.location.href = "http://google.com"
    //}
  });
});
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<form action="" method="post">
  <input type="hidden" id="image_order" name="image_order" value="" />
  <ul id="sortable" style="width: 524px;">
    <li id="1" class="ui-state-default"><img src="http://placehold.it/100x90/ff0000/000000.png&text=1" /></li>
    <li id="2" class="ui-state-default"><img src="http://placehold.it/100x90/ffff00/000000.png&text=2" /></li>
    <li id="3" class="ui-state-default"><img src="http://placehold.it/100x90/00ff00/000000.png&text=3" /></li>
    <li id="4" class="ui-state-default"><img src="http://placehold.it/100x90/00ffff/000000.png&text=4" /></li>  
  </ul>
  <div style="clear:both;"></div>
  <input name="Submit" value="RE-ORDER" type="submit" />
</form>

$(window).load(function(){
  $(function() {

    $( "#sortable" ).sortable({
      placeholder: "ui-state-highlight",
      cursor: 'crosshair',
      update: function(event, ui) {
        var order = $("#sortable").sortable("toArray");
        order = JSON.stringify(order);
        correct = JSON.stringify(["4","3","2","1"]);
        if (order==correct){
            //ENABLE WHATEVER HERE
        }
      }
    });
    $( "#sortable" ).disableSelection();
  });
});

您可以添加一个validate()函数，用于检查排序和提交表单的时间。

<input name="Submit" value="RE-ORDER" type="submit" onclick="return validate();"/>

您可以返回一个布尔值来判断表单是否有效，以阻止onClick函数的传播。

在允许用户继续操作之前，只需浏览字段并确保顺序正确即可。

var expectedOrder = ["4", "3", "2", "1"];
var currentOrder = [];
window.validate = function() {
  if ($('#username').val().trim() === '') {
    return false;
  }
  if (!isEqual(currentOrder, expectedOrder)) {
    return false;
  }
  return true;
}
$(document).ready(function () {
  $('#sortable').sortable({
    placeholder: 'ui-state-highlight',
    cursor: 'crosshair',
    update: function (event, ui) {
      currentOrder = $("#sortable").sortable("toArray");
      if (validate()) {
        alert('Navigating to http://www.google.com...');
      }
      $('#sortable').disableSelection();
    }
  });
});
function isEqual(arr1, arr2) {
  return arr1.join('').localeCompare(arr2.join('')) === 0;
}
body {
  padding: 8px;
}
.req {
  color: #FF0000;
  font-weight: bold;
}
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<form action="" method="post">
  <label>Username:<span class="req" title="Field Required">*</span></label> 
  <input id="username" name="username" type="text" />
  <br />
  <input type="hidden" id="image_order" name="image_order" value="" />
  <ul id="sortable" style="width: 524px;">
    <li id="1" class="ui-state-default">
      <img src="http://placehold.it/100x90/ff0000/000000.png&text=1" />
    </li>
    <li id="2" class="ui-state-default">
      <img src="http://placehold.it/100x90/ffff00/000000.png&text=2" />
    </li>
    <li id="3" class="ui-state-default">
      <img src="http://placehold.it/100x90/00ff00/000000.png&text=3" />
    </li>
    <li id="4" class="ui-state-default">
      <img src="http://placehold.it/100x90/00ffff/000000.png&text=4" />
    </li>
  </ul>
  <div style="clear:both;"></div>
  <input name="Submit" value="RE-ORDER" type="submit" onclick="return validate();"/>
</form>

相关文章：