如何控制jquery验证错误消息

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

试试这个：CSS：#ipv4Address_0-error{ &nbsp;&nbsp;&nbsp;position:&nbsp;absolute&nbsp;; &nbsp;&nbsp;&nbsp;margin-left:&nbsp;-200px&nbsp;; &nbsp;&nbsp;&nbsp;color:&nbsp;#fff&nbsp;; &nbsp;&nbsp;&nbsp;background-color:&nbsp;#222&nbsp;; &nbsp;&nbsp;&nbsp;padding:&nbsp;3px&nbsp;;}jQuery的：$(document).on("click","#ipv4Address_0-error",function(){ &nbsp;&nbsp;&nbsp;$(this).hide();});