javascript - jQuery Sortable validation -

javascript - jQuery Sortable validation -

i'm new javascript & jquery i'm attempting head around how implement validation form when user places/drags images in right order form can submitted. have images dragging in different orders , alert box outputting order in array how go setting value user order array of images in? have latest version of jquery linked page , jquery ui.

i'm trying implement if else statement in code. i'm not sure i'm going wrong. heres got far..

class="snippet-code-js lang-js prettyprint-override">$(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" //} }); }); class="snippet-code-html lang-html prettyprint-override"><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); right = json.stringify(["4","3","2","1"]); if (order==correct){ //enable whatever here } } }); $( "#sortable" ).disableselection(); }); });

javascript jquery html jquery-ui validation