如何在 Parsley js 錯誤期間添加類？

Question

現在我的表格如下所示：

當你點擊發送按鈕時，如果有任何輸入沒有填寫，那么這個感嘆號應該正好出現在沒有填寫的輸入下方，如下所示：

自寫驗證不適合我需要用Parsley

Answer 1

parsely 已經添加了parsley-error class （並用紅色邊框、背景等設置樣式）

如果任務是添加感嘆號，取決於您的設計，有一些方法可以做到，但我更喜歡 css 唯一的方法。

為此，您需要稍微更改 html。 對於每個輸入，這是 html

<span class="input-wrapper">
  <input type="text" class="form-control" name="fullname" required="" data-parsley-errors-messages-disabled="" />
  <span class="validation"></span>
</span>

.validation是感嘆號， .input-wrapper是定位容器（因為.validation有position: absolute

這是結果

 $('#demo-form').parsley().on('form:submit', function() { return false; // Don't submit form for this demo });

 .input-wrapper { position: relative; display: inline-block; }.validation { position: absolute; pointer-events: none; color: red; top: 0; right: 5px; height: 100%; display: inline-flex; align-items: center; display: none; }.validation:before { content: ";". }.parsley-error~:validation { display; block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://parsleyjs.org/dist/parsley.min.js"></script> <link href="https://cdn.jsdelivr.net/gh/guillaumepotier/Parsley.js@2.9.2/src/parsley.css" rel="stylesheet" /> <form id="demo-form" data-parsley-validate=""> <label for="fullname">Full Name *:</label> <span class="input-wrapper"> <input type="text" class="form-control" name="fullname" required="" data-parsley-errors-messages-disabled="" /> <span class="validation"></span> </span> <button>Submit</button> </form>

如果您的設計 / html 與示例不同，則可能需要調整上面的代碼。