使用jQuery驗證HTML表單修復格式問題

Question

我爲一些練習做了一點數獨板，並且遇到了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表單驗證使用提交按鈕覆蓋。

這是問題的一個形象：

Answer 1

您可以將使用errorPlacement任何地方的錯誤消息。

例如： -

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

。

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

FIDDLE

然後你可以使用這個在您選擇彈出/提示/等附加誤差，並從那裏表現出來。