如何在 Parsley js 错误期间添加类？

Question

Now my form looks like this:

When you click on the send button, if any input is not filled in, then this exclamation mark should come out exactly under the input that is not filled in as here:

Self written verification is not suitable I need to use Parsley

Answer 1

parsely already adds parsley-error class (and style it with red border, background etc.)

If the task is to add the exclamation mark, depends on your design, there are some ways to do it, but I prefer the css only approach.

For doing this, you need to change the html a bit. For every input, this is the html

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

The .validation is holds the exclamation mark, and the .input-wrapper is the positioning container (because .validation has position: absolute

And here is the result

 $('#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>

If your design / html is different than the example, the code above might should be adjusted.