为什么我的表单会出错？

Question

我有一个使用jquery validation的表单。我正在使用带引导程序的表单，但每次显示错误时表单都会被推到右侧。谁能告诉我如何制止这个？我做了demo here。

jquery的

$(document).ready(function(){
  $("#message").hide();

  //Define your validation rules.
  $("#bill_cost").validate({
    expression: "if (!isNaN(VAL) && VAL) return true; else return false;",
    message: "Should be a number"
  });

  //Define the event that will occur when the entire form is validated (on form submission)
  $('#myform').validated(function(){
    var formdata = $('#myform').serialize();

    //Post form data
    $.post('#', formdata, function(data){
      //Process post response
      $("#message").html(data);
      $("#message").fadeIn(500); 
      $("#message").fadeOut(500); 
    });

    //Reset Form
    $('#myform')[0].reset(); 
  });

});

表格

<form class="form-inline" action="" id="myform" method="post">

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="bill_cost"></label>  
  <div class="col-md-8">
  <input id="bill_cost" name="bill_cost" type="text" placeholder="Bill Cost" class="form-control input-lg" required>

  </div>
</div>


<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="submit1"></label>
  <div class="col-md-4">
    <button type="submit" id="submitButtonId" name="submit1"  class="btn btn-primary btn-xl">Submit</button>
  </div>
</div>
</form>