如何控制jQuery验证错误消息

拉贾特·班萨尔(Rajat Bansal)

我有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>
迪帕斯

错误消息显示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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Ruby on Rails在控制器上获取验证错误消息

来自分类Dev

jQuery验证程序如何删除错误消息并添加边框颜色

来自分类Dev

jQuery验证错误消息放置

来自分类Dev

敲除验证-如何显示单个错误消息

来自分类Dev

如何在jQuery中动态更改“电子邮件验证”错误消息

来自分类Dev

jQuery验证远程错误消息

来自分类Dev

jQuery Mobile:如何验证表单并在页面上显示错误消息

来自分类Dev

jQuery验证,如何将错误消息挂接到div

来自分类Dev

如何在Symfony的控制器中自定义验证错误消息

来自分类Dev

jQuery验证与动态错误消息

来自分类Dev

如何验证并显示git commit消息的错误?

来自分类Dev

如何更改Laravel验证错误消息

来自分类Dev

如何获取角度形式验证错误消息?

来自分类Dev

密码的失败验证逻辑时如何读取验证错误消息

来自分类Dev

如何使用Kendo网格在控制器中显示验证错误消息?

来自分类Dev

如何更改身份验证错误消息?

来自分类Dev

从验证中验证,如何解决验证功能错误消息?

来自分类Dev

如何显示错误消息,如果字段留空或jQuery中的默认值验证

来自分类Dev

如何更改默认验证错误消息?

来自分类Dev

如何通过jQuery使验证消息警报

来自分类Dev

jQuery验证错误消息到位

来自分类Dev

如何在jQuery中动态更改“电子邮件验证”错误消息

来自分类Dev

jQuery验证插件错误消息布局

来自分类Dev

jQuery验证,如何将错误消息挂接到div

来自分类Dev

jQuery在输入下验证发布错误消息

来自分类Dev

jQuery验证上的不同错误消息

来自分类Dev

jQuery验证错误消息的错误类与输入字段的关系

来自分类Dev

如何在弹出窗口中显示jquery验证错误消息?

来自分类Dev

jQuery表单验证中的错误消息

Related 相关文章

  1. 1

    Ruby on Rails在控制器上获取验证错误消息

  2. 2

    jQuery验证程序如何删除错误消息并添加边框颜色

  3. 3

    jQuery验证错误消息放置

  4. 4

    敲除验证-如何显示单个错误消息

  5. 5

    如何在jQuery中动态更改“电子邮件验证”错误消息

  6. 6

    jQuery验证远程错误消息

  7. 7

    jQuery Mobile:如何验证表单并在页面上显示错误消息

  8. 8

    jQuery验证,如何将错误消息挂接到div

  9. 9

    如何在Symfony的控制器中自定义验证错误消息

  10. 10

    jQuery验证与动态错误消息

  11. 11

    如何验证并显示git commit消息的错误?

  12. 12

    如何更改Laravel验证错误消息

  13. 13

    如何获取角度形式验证错误消息?

  14. 14

    密码的失败验证逻辑时如何读取验证错误消息

  15. 15

    如何使用Kendo网格在控制器中显示验证错误消息?

  16. 16

    如何更改身份验证错误消息?

  17. 17

    从验证中验证,如何解决验证功能错误消息?

  18. 18

    如何显示错误消息,如果字段留空或jQuery中的默认值验证

  19. 19

    如何更改默认验证错误消息?

  20. 20

    如何通过jQuery使验证消息警报

  21. 21

    jQuery验证错误消息到位

  22. 22

    如何在jQuery中动态更改“电子邮件验证”错误消息

  23. 23

    jQuery验证插件错误消息布局

  24. 24

    jQuery验证,如何将错误消息挂接到div

  25. 25

    jQuery在输入下验证发布错误消息

  26. 26

    jQuery验证上的不同错误消息

  27. 27

    jQuery验证错误消息的错误类与输入字段的关系

  28. 28

    如何在弹出窗口中显示jquery验证错误消息?

  29. 29

    jQuery表单验证中的错误消息

热门标签

归档