Question

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

当我在左侧的input框中输入无效值时，错误消息显示在右侧，从而干扰右侧字段的对齐，反之亦然。

我想要的是错误信息，而不是出现在下一行，而不会干扰任何静态元素的对齐。

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

这是我的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中，这是一个内联元素，因此请将其设置为块级别，并设置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>

Answer 2

消息由.error类标记。用它来控制它们 https://jsfiddle.net/1s2nvp6r/ - 示例小提琴。

.error{
  position: absolute;
}

此外，您可以在大多数现代浏览器中使用HTML-inspector内置来检查div的属性希望能帮助到你。

Answer 3

试试这个：

CSS：

#ipv4Address_0-error{
   position: absolute ;
   margin-left: -200px ;
   color: #fff ;
   background-color: #222 ;
   padding: 3px ;
}

jQuery的：

$(document).on("click","#ipv4Address_0-error",function(){
   $(this).hide();
});

如何控制jquery验证错误消息

3 个答案: