Validation jQuery not validating data correctly

Question

I only want the user to be capable of submitting the form when the values in the text boxes have been filled in and the JSON array for the I only want the user to be capable of submitting the form when the values in the text boxes have been filled in and the JSON array of images have been dragged into the correct order.

The code is requiring the image_order as well as the text box inputs. Is this because it is also labelled name? How can I avoid this but still require both fields and order to be correct before submission?

Sorry I'm very new to all of this.

The JavaScript

$(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){
      var valid = true
        console.log(':)');
    }
  }
});

$( "#sortable" ).disableSelection();

$('#submit').on('click', function() {
var valid = true,
    message = '';

$('form input').each(function() {
    var $this = $(this);

    if(!$this.val()) {
        var inputName = $this.attr('name');
        valid = false;
        message += 'Please enter your ' + inputName + '\n';
    }
});

if(!valid) {
    alert(message);
}
else {
  window.location.href = "http://stackoverflow.com";
}
});
});
});

The HTML

Name : <input type="text" class="text" name="name" id="name" /> <br/>
Address : <input type="text" class="text" name="address" id="address" /> <br/>
email : <input type="text" class="text" name="email" id="email" /> <br/>

<input type="hidden" id="image_order" name="image_order" value="order" />

<ul id="sortable" style="width: 524px;">
<li id="1" class="ui-state-default"><img src="1.png" width="100" height="90" /></li>
<li id="2" class="ui-state-default"><img src="2.png" width="100" height="90" /></li>
<li id="3" class="ui-state-default"><img src="3.png" width="100" height="90" /></li>
<li id="4" class="ui-state-default"><img src="4.png" width="100" height="90" /></li>  
</ul>

<div style="clear:both;"></div>
<input name="Submit" value="RE-ORDER" type="submit" />
<input type="button" id="submit" value="Submit" name="submit" />
</form>
</body>

Answer 1

尝试这个：

$('form input').not('#image_order').each( //...