javascript - 如何控制 jquery 验证错误消息

Question

我有 4 个字段并使用 jquery 验证错误消息。

当我在左侧的 input 框中输入无效值时，错误消息立即出现在右侧，从而扰乱了右侧字段的对齐，反之亦然。

我想要的是错误消息出现在下一行而不影响任何静态元素的对齐。

我不确定在这种情况下哪些 css 类有助于控制错误消息

这是一个fiddle

这是我的 HTML:

 <form  id="ethernetForm">
 <table style="width:100%">
    <tr>
    <td valign="top">
        <label for="ipv4Address_0">IPv4 Address</label>
        <input class="ipv4editable" type="text" name="ipv4Address" id="ipv4Address_0">
    </td>
    <td valign="top">
        <label for="ipv6Address_0">IPv6 Address/Mask</label>
        <input class="ipv6editable" type="text" name="ipv6Address" id="ipv6Address_0">
    </td>
    </tr>
     <tr>
    <td valign="top">
        <label for="ipv4Mask_0">Subnet Mask v4</label>
        <input class="ipv4editable" type="text" name="ipv4Mask" id="ipv4Mask_0">
    </td>
    </tr>
    <tr>
    <td valign="top">
        <label for="ipv4Gateway_0">Gateway v4</label>
        <input class="ipv4editable" type="text" name="ipv4Gateway" id="ipv4Gateway_0">
    </td>
    <td valign="top">
        <label for="ipv6Gateway_0">Gateway v6</label>
        <input class="ipv6editable" type="text" name="ipv6Gateway" id="ipv6Gateway_0">
    </td>
    </tr>
    </table>
    </form>

Answer 1

错误消息显示在 label 中，它是一个内联元素，因此将其设置为 block 级别，并设置 display:block

  $("#ethernetForm").validate({

    rules: {
      ipv4Address: {
        ipv4validate: true
      },
      ipv4Mask: {
        ipv4validate: true
      },
      ipv4Gateway: {
        ipv4validate: true
      },
      ipv6Address: {
        ipv6validate: true
      },
      ipv6Mask: {
        ipv6validate: true
      },
      ipv6Gateway: {
        ipv6validate: true
      }
    },
    messages: {
      ipv4Address: "Please enter a valid IPv4 address",
      ipv4Mask: "Please enter valid v4 mask",
      ipv4Gateway: "Please enter valid v4 gateway",
      ipv6Address: "Please enter a valid IPv6 address",
      ipv6Mask: "Please enter valid v6 mask",
      ipv6Gateway: "Please enter valid v6 gateway"
    }
  });

  //Validate the IP addresses
  $.validator.addMethod("ipv4validate", function(value, element) {
    return this.optional(element) || /^(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)$/i.test(value);
  });

  $.validator.addMethod("ipv6validate", function(value, element) {
    return this.optional(element) || /^((([0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}:[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){5}:([0-9A-Fa-f]{1,4}:)?[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){4}:([0-9A-Fa-f]{1,4}:){0,2}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){3}:([0-9A-Fa-f]{1,4}:){0,3}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){2}:([0-9A-Fa-f]{1,4}:){0,4}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(([0-9A-Fa-f]{1,4}:){0,5}:((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(::([0-9A-Fa-f]{1,4}:){0,5}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|([0-9A-Fa-f]{1,4}::([0-9A-Fa-f]{1,4}:){0,5}[0-9A-Fa-f]{1,4})|(::([0-9A-Fa-f]{1,4}:){0,6}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){1,7}:))$/i.test(value);
  });

label.error {
  padding-bottom: -20px;
  color: red;
  width: 100%;
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>

<form id="ethernetForm">
  <table style="width:100%">
    <tr>
      <td valign="top">
        <label for="ipv4Address_0">IPv4 Address</label>
        <input class="ipv4editable" type="text" name="ipv4Address" id="ipv4Address_0">
      </td>
      <td valign="top">
        <label for="ipv6Address_0">IPv6 Address/Mask</label>
        <input class="ipv6editable" type="text" name="ipv6Address" id="ipv6Address_0">
      </td>
    </tr>
    <tr>
      <td valign="top">
        <label for="ipv4Mask_0">Subnet Mask v4</label>
        <input class="ipv4editable" type="text" name="ipv4Mask" id="ipv4Mask_0">
      </td>
    </tr>
    <tr>
      <td valign="top">
        <label for="ipv4Gateway_0">Gateway v4</label>
        <input class="ipv4editable" type="text" name="ipv4Gateway" id="ipv4Gateway_0">
      </td>
      <td valign="top">
        <label for="ipv6Gateway_0">Gateway v6</label>
        <input class="ipv6editable" type="text" name="ipv6Gateway" id="ipv6Gateway_0">
      </td>
    </tr>
  </table>
</form>