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

Question

我做了一些练习的数独板，但在jQuery验证方面遇到了麻烦。 验证效果很好，但是默认格式很丑陋，会使板变形。

有没有办法获得覆盖验证消息？

小提琴在这里（ 小提琴 ）。 输入一个大于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验证，但要防止它扭曲Sudoku板。 也许像使用提交按钮的普通HTML表单验证那样的叠加层。

这是问题的图像：

Answer 1

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

例：-

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

。

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

小提琴

然后，您可以使用此错误将错误附加到您选择的popup / tooltip / etc中，并从那里显示错误。