使用HTML表单的jQuery验证修复格式

时间:2015-11-08 08:54:49

标签: javascript jquery html css validation

我为一些练习做了一个小数独的董事会,我遇到了jQuery验证的麻烦。验证工作得很好,但默认格式非常难看并且会使板变形。

有没有办法获得重叠验证消息?

小提琴在这里(fiddle)。 输入一个大于9的整数并移动到另一个单元格以查看jQuery验证。

HTML表单的基本格式:

<form id="form1">
<table id="table">
  <tr id="row1">
    <td>
      <input type="number" /> </td>
    <td>
      <input type="number" /> </td>
    <td>
      <input type="number" /> </td>
  </tr>
</table>
</form>

jQuery的:

  // adds <input type="number" min:1 max:9 required />
  $('input').attr({
    min: 1,
    max: 9,
  }).prop('required', true);

  $('#form1').validate();

我想知道如何使用jQuery验证,但防止它扭曲数独板。也许像使用提交按钮的普通HTML表单验证一样叠加。

以下是问题的图片: Image of jQuery validation formatting issue

1 个答案:

答案 0 :(得分:1)

您可以使用errorPlacement将错误消息放在任何位置。

示例: -

<div class="error"></div>

$('#form1').validate({
 errorPlacement: function(error, element) {
    error.appendTo($('.error'));
  }   
});

FIDDLE

然后您可以使用它在您选择的弹出/工具提示/等中附加错误并从那里显示它。