jQuery 可排序验证

Question

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

Answer 1

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

  });
});

Answer 2

您可以添加一个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>