发生验证错误时，提交按钮样式更改

Question

我有一个表单，用于收集一些个人数据并使用Foundation Framework构建整个网站。昨天我意识到我的表单字段验证不够好，所以我决定使用jQuery Validator插件。它验证确定，但现在我的提交按钮出现样式问题，它会消失到右侧。这可能是因为我的表格div没有灵活的高度。看看：

表单相当长，所以我创建了一个带有相关编码的JSFiddle（参见此处：http://jsfiddle.net/w7vsxdqs/2/）。

HTML：

<p>
    <input id="submit-button" type="submit" name="submit" value="Submit"> 
</p>

CSS：

#submit-button {
  text-indent:-9999px;
  display:block;
  background:url('../img/get-free-quote.png') no-repeat; 
  border: medium none;
  height: 56px;
  width: 222px;
  margin: 0 auto;
  margin-top: 300px; }

JS：

<script type="text/javascript">
                $("#form").validate(
              {
                rules:
                {
                  x_C1Forename:
                  {
                    required: true
                  },
                    x_C1Surname:
                  {
                    required: true
                  },
                  x_C1Email:
                  {
                    required: true,
                    email: true
                  },
                  x_C1HomeTel:
                  {
                     required: true,
                     number: true  
                  },
                  x_C1Street:
                  {
                     required: true
                  },
                  x_C1Postcode:
                  {
                     required: true
                  }
                },
                messages:
                {
                  x_C1Forename:
                  {
                    required: "Please enter your first name"
                  },
                  x_C1Surname:
                  {
                    required: "Please enter your surname"
                  },    
                  x_C1Email:
                  {
                    required: "Please enter your email address.",
                    email: "Please enter a valid email address."   
                  },
                  x_C1HomeTel:
                  {
                     required: "Please enter your phone number.",
                     number: "Please enter a valid phone number."
                  },
                  x_C1Street:
                  {
                     required: "Please enter your street's name."
                  },
                  x_C1Postcode:
                  {
                     required: "Please enter your postcode"
                  }    
                }
              });   
            </script>

小提琴的结果对你没什么帮助，但是人们可以得到基本的想法。 我真的很感谢有关哪种方法可以使其正常工作的建议，以便验证发挥作用，按钮也保持在其位置。 提前致谢！ 丹尼尔