CODEWITHSUNDEEP
javascriptvalidationparsley.js
Phil Gyford
Phil Gyford

Reputation: 14664

How to display Parsley error messages before inputs instead of after?

Parsley.js appends error messages to the end of the specified error container element. But I want error messages to appear before inputs, rather than after:

<div class="form-group">
    <ul>
        <li>This value is required.</li>
    </ul>
    <div class="btn-group" data-toggle="buttons">
        <label><input type="radio" name="myButton" value="yes" required="required">Yes</label>
        <label><input type="radio" name="myButton" value="no" required="required">No</label>
    </div>
    <!-- This is where the error message would go by default. -->
</div>

Is this possible? I can't find mention of anything similar in the docs.

(I'm changing the error container class along these lines.)

Upvotes: 2

Views: 2955

Answers (1)

Peter Jewicz
Peter Jewicz

Reputation: 666

Old question, but for people who come across this question as I did there is a solution. Parsley allows you to define custom containers for error messages.

A simple example: 

<form class="quoteForm" data-parsley-validate>
   <div class="nameError"></div>
   <input type="text" name="name" placeholder="Name*" data-parsley-required="true" data-parsley-errors-container=".nameError"/>
</form>

The key is the: 

data-parsley-errors-container=".nameError"

Which specifies a custom box to hold the error message. Since this is above the form input you'll end up with the error nicely above it.

Upvotes: 4

Related Questions