CODEWITHSUNDEEP
javascripthtmlformsvalidationparsley.js
Alexander Solonik
Alexander Solonik

Reputation: 10230

Parsley js: Form validation for password field(minlength) not working as expected

I have the following form in my HTML:

<form action="" method="POST" accept-charset="utf-8" data-parsley-validate >
    <fieldset>
        <legend>Parsely JS Testing</legend>
        <input type="" name="Full Name" placeholder="Full Name" data-parsley-pattern="[a-z|A-Z]" data-parsley-trigger="focusin focusout" data-parsley-error-message="You need to enter your full name" data-parsley-errors-container="#error-container">
        <input type="" name="Phone" placeholder="Phone" data-parsley-type="digits" data-parsley-min="10" data-parsley-trigger="focusin focusout" data-parsley-error-message="Enter valid phone number" data-parsley-errors-container="#error-container">
        <input type="" name="Email" placeholder="Email" data-parsley-type="email" data-parsley-trigger="focusin focusout" data-parsley-error-message="Enter Valid Email" data-parsley-errors-container="#error-container">
        <input type="" name="password" placeholder="Password" data-parsley-type="alphanum" data-parsley-min="7" data-parsley-trigger="focusin focusout" data-parsley-error-message="Password must be atleast 7 characters" data-parsley-errors-container="#error-container" id="password">
        <input type="" name="confirmpassword" placeholder="Confirm Password"  data-parsley-trigger="focusin focusout" data-parsley-error-message="Password Does not match" data-parsley-errors-container="#error-container" data-parsley-equalto="#password">
    </fieldset>
    <button type="submit">SUBMIT</button>
</form>

I am using parsely.js to validate this form, i am having a slight problem validating the password feild. I have the below HTML for the password feild:

<input type="" name="password" placeholder="Password" data-parsley-type="alphanum" data-parsley-min="7" data-parsley-trigger="focusin focusout" data-parsley-error-message="Password must be atleast 7 characters" data-parsley-errors-container="#error-container" id="password">

The field is validated on focusin and focusout, like so:

data-parsley-trigger="focusin focusout"

For the validation i have 2 rules , the following:

data-parsley-type="alphanum"

And 

data-parsley-min="7"

These two rules don't seem to be working very well in tandem, so if i enter the following password:

gautam007

I get an error in the #error-container, the error get is the one i entered in the error message data attribute.

data-parsley-error-message="Password must be at least 7 characters"

Why am i getting this error and how do i work around this ?

Upvotes: 1

Views: 2190

Answers (2)

Rahul Gupta
Rahul Gupta

Reputation: 10141

Here is the demo how you implement minlength validation and the error message.

You need to use these data attributes on the form element:

data-parsley-minlength="7" 
data-parsley-minlength-message="Name must be at least 7 characters"

Example:

<input type="text" id="name" name="name" data-parsley-minlength="7" data-parsley-minlength-message="Name must be at least 7 characters" data-parsley-required="true" />

Upvotes: 2

Rebecca
Rebecca

Reputation: 25

Try this and see instead of data-parsley-min,

data-parsley-mincheck='7'

Upvotes: 0

Related Questions