JQuery驗證使用不同的divs爲不同的輸入元素的錯誤和多個錯誤類

我在我的窗體上使用JQuery驗證，我試圖讓輸入元素顯示紅色邊框，如果輸入無效，並在相應的輸入元素下方顯示錯誤消息。JQuery驗證使用不同的divs爲不同的輸入元素的錯誤和多個錯誤類

我的HTML代碼基本上是這樣的：

<div id="formContainer"> 
<form id="mainForm" action="action.php" method="post"> 
    <input class="formTextBox" type="url" name="website" placeholder="website" required /> 
    <input class="formTextBox" type="email" name="email" placeholder="e-mail" required /> 
    <button type="submit" class="buttonForm" id="submitBtn"> <span id="buttonContent">Snapshot my site</span> </button> 
</form> 
</div>

我已經試過形式（仍在#formContainer），將得到填充使用errorPlacement選項錯誤後添加特定的DIV。在函數內部，我檢查元素的name屬性，並將錯誤追加到相應的div中，但是當我繼續輸入或在輸入之間單擊時，錯誤消息不斷重複並重復，並且沒有任何錯誤被清除（我看到相同錯誤信息多次，一個在另一個下面）。

我試過把每個輸入元素放在它自己的div（具有固定寬度）內，並將errorElement設置爲DIV，因此當JQuery驗證創建新div並將其附加到輸入元素旁邊時，推下...但這導致了一些設計問題，我更喜歡2錯誤容器在＃formContainer div（這樣做似乎有點奇怪）。

另外，如果需要同時輸入輸入元素上的錯誤和錯誤消息DIV，我該怎麼辦？

這裏是什麼，我腦子裏想的一個小例證： enter image description here

謝謝！

來源

2014-03-04 itai alter

看到http://jsfiddle.net/arunpjohny/txE5P/2/ –

嘿，謝謝束。這幫助我找出了一些東西:)我早些時候嘗試過這種方法，但有一些佈局問題。在看到你提出了同樣的方法之後，我做了更多的挖掘，並且我在CSS中修正了一些問題，現在紅色條顯示在輸入字段下正確。如果有人知道如何做到這一點，仍然想知道造型2個不同的錯誤類。再次感謝。 –

分享你已經完成的任務....編輯小提琴 –

嘗試

<div id="formContainer"> 
    <form id="mainForm" action="action.php" method="post" novalidate> 
     <div class="input-control"> 
      <input class="formTextBox" type="url" name="website" placeholder="website" required /> 
     </div> 
     <div class="input-control"> 
      <input class="formTextBox" type="email" name="email" placeholder="e-mail" required /> 
     </div> 
     <button type="submit" class="buttonForm" id="submitBtn"> <span id="buttonContent">Submit</span> 
     </button> 
    </form> 
</div>

然後

#formContainer { 
    vertical-align: top; 
} 
.input-control { 
    display: inline-block; 
    vertical-align: top; 
} 
div.error { 
    display: block; 
    background-color: red; 
    color: white; 
} 
input.error { 
    border: 1px solid red; 
} 
.formTextBox { 
    width: 210px; 
    background-color: white; 
    color: black; 
}

和

jQuery(function ($) { 
    var validator = $('#mainForm').validate({ 
     rules: {}, 
     messages: {}, 
     errorElement: "div" 
    }); 
});

演示：Fiddle

來源

2014-03-04 17:11:15

JQuery驗證使用不同的divs爲不同的輸入元素的錯誤和多個錯誤類

回答

相關問題