Jquery 验证在提交时丢失样式

Question

我正在使用 jquery validate 插件，提交表单时，样式会丢失。

他们只是变得古怪!

我希望表单保持提交表单之前的样子。

附上截图和代码:

<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>

<style>
.label {
  width:100px;
  text-align:right;
  float:left;
  padding-right:10px;
  font-weight:bold;
}
#ats_fellow_application_payment_form label.error {
  color:#FB3A3A;
  font-weight:bold;
  padding: 10px;
}

#ats_fellow_application_payment_form input.error {
  color:#FB3A3A;
  font-weight:bold;
  padding: 0px;
}

h1 {
  font-family: Helvetica;
  font-weight: 100;
  color:#333;
  padding-bottom:20px;
}
</style>


<script type="text/javascript">
// Wait for the DOM to be ready
$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("form[name='ats_fellow_application_payment_form']").validate({
    // Specify validation rules
    rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        // Specify that email should be validated
        // by the built-in "email" rule
        email: true
      }
    },
    // Specify validation error messages
    messages: {
      firstname: "Please enter your firstname",
      lastname: "Please enter your lastname",

      email: "Please enter a valid email address"
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });
});
</script>


<form  method="POST" name="ats_fellow_application_payment_form" id="ats_fellow_application_payment_form" novalidate="novalidate">   
    <div class="label">First Name</div><input type="text" id="firstname" name="firstname" /><br />
    <div class="label">Last Name</div><input type="text" id="lastname" name="lastname" /><br />
    <div class="label">Email</div><input type="text" id="email" name="email" /><br />
    <div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div>
</form>

Answer 1

您的代码有效。这是一个CSS问题。我建议删除 label.error 上的顶部/底部填充，然后删除或更新 input.error。根据您的图片，您提供的代码中未包含的错误标签中添加了额外的样式。

或者，您可以更改错误消息的位置，方法是使用 errorContainer、errorLabelContainer 和 validate 的 wrapper 选项将它们添加到错误容器中。您还可以将错误消息附加到元素以使用以下方法控制样式和位置:

errorPlacement: function (error, element) {
    error.appendTo(element.siblings('span.errorMsg'));
}

关于这些选项的更多信息可以在 docs 中找到

工作 fiddle