You should really provide a demo for a remote constraint in action. I frequently have some validations that I can only run serverside, so remote validation is a requirement, but I can't tell if parsley.js fits my needs or not.

Does it provide validation promises? Does it handle making submit button disabled until all validations (remote or local) pass? These questions should be addressed in the documentation.

The built in types are a great start, but almost immediately I find myself wanting, say, a phone number type. Adding a phone number type to the library would be great, but it'd be nice if the built-in types utilized some public API that was relatively easy to add to externally.

hi,
i dont know what happened suddenly the form fields are always valid and no error messags even though i don't meet the rules defined wither i use data-validate="parsley" or $( '#form' ).parsley( 'validate' );

for example

<form id="#form" >
<input type="text" data-bind="value: Title " data-trigger="keyup" data-mianlength="6" data-raequired="true" />
</form>

Hi it's me again.

I think it could be helpful, sometimes you want to hide the parsley error in order to make your own UI for one field in your form.

Then you may add data-showerror (default true) and if false, do not append the ul element. :)

In case of #39 for instance.

Regards

Anyone knows how to validate multi select? Single select with data-required="true" works fine but with multiple selection, it does not do anything. i have it triggered on keyup and change.

here is jsbin for the example
http://jsbin.com/eqozes/1/edit

Hi guy, at first, thanks for this awesome jQuery plugin...

I tried to make sure that the first option of my select will not passed (it's something to say user to choose an option...) so i put an empty value and tried "data-notblank", "required", "data-regexp" but nothing seems to work at the moment.

I looked in the code but i don't understand all of it ;) is there a simple way to do that ?

Cordially,

I am using parsley to validate my forms and the validations are great. However, my submit buttons no longer do anything. When I click the submit button (<input type="submit" ... />) nothing happens and even when I do $('form').submit() with jQuery there is still no reaction. Both of these behaviors work on all of my non-parsley validated forms.

If it's of interest, all of my forms are generated using Rails form_for helpers.

I'll just throw this out there. It would be nice if the error class could be added to the .control-group containing div to use twitter bootstraps classes. Or an example of how to implement it.

.control-group.error {
  @include formFieldState($errorText, $errorText, $errorBackground);
}

In console I get this error:

TypeError: str is undefined
[Break On This Error]

return str.replace(/::/g, '/')

If I use jQuery is working as expected.
Is this a Zepto issue or Parsley issue?
I use this version of Zepto: http://zeptojs.com/zepto.js (v1.0rc1)
Error is on line 94

The getName method will cause an error here if the name attribute isn't defined on the element (since it's trying to call replace on undefined).

A simple return (this.$element.attr( 'name' ) || '').replace(/(:|\.|\[|\])/g, '' ); will fix it, but I'm not sure if you'd want to do something different (maybe exit early from the rest of the initMultiple function if it's not defined).

Hi, here is my situation :
One field of my form is mandatory only if a radio button is at a particular value.

So i add/remove the attribute required="required" according to the value of my radio button. I do so using the jquery methods attr() and removeAttr().

When i check my DOM this attributes toogles exactly like I want, but parsley doesn't seems to adapt as it will always ignore the attribute modifications.
(but it is working just fine otherwise, good job btw)

It might come from my code as I am quite a newbie in JS/JQuey but i really dont understand what i got wrong.

Thanks

, removeErrors: function () {
  !this.ulError || $( this.ulError ).remove();
}

can be simplified to (I think!)

, removeErrors: function () {
  $( this.ulError ).remove();
}

because if !this.ulError is falsy then $(this.ulError) is [].

Removed two new Number, at the expense of readability maybe:

  , min: function ( val, min ) {
    return new Number( val ) >= min;
  }

  , max: function ( val, max ) {
    return new Number( val ) <= max;
  }

/**
* Public getHash accessor
*
* @method generateHash
* @returns {String} hash
*/
, getHash: function () {
  return this.hash;
}

"@method generateHash" should be "@method getHash"

It would be great to support HTML5 types for the validation, setting type="email" instead of type="text" data-type="email".
The same applies to data-min and data-max as HTML5 defines dedicated attributes for the number type.

In the examples on parsleyjs.org the URL field requires a protocol like "http://" to be classed as valid.

I feel this could cause confusion with non-technical end users.

I'd prefer no protocol validation, but in addition the set of protocols is also limited and doesn't include file://, gopher://, telnet:// and other valid options.

Hi,

I would like to aware you that sometimes, if your UI isn't "basic", the error messages destroyed the UI, look at the pics:

The UI:

With data-required="true" (for example), then:

May you add a new data attribute to give the "insertAfter" selector?

data-insertafter="selector" then the < ul > error will be put in after that selector.

It's just an idea, be aware that's also the case with multiple select such as birthdate.

Sorry for my bad english.
En fait, pourquoi je te parle en anglais ? ^^

Regards

First of all, love the framework. Thanks. There is a typo in the documentation which would be great to fix. The error is missing an 's'. See attached image.

Thanks again.

Might have discovered a bug on validating non-visible fields...

I'm using the custom onFieldValidate listener example given in the docs on a multi-tab form:

$( '#form' ).parsley( 'addListener', {
    onFieldValidate: function ( elem ) {

        // if field is not visible, do not apply Parsley validation !
        if ( !$( elem ).is( ':visible' ) ) {
            return true;
        }

        return false;
    }
} );

How to repeat what I may have encountered:

1. User switches to an alternate tab (fields become visible)
2. User starts to enter data on a "data-required => true" field, then changes mind and deletes data.
3. Field shows validation error (no data when it's required).
4. User then switches back to the original tab. So now there is a field with an existing validation error in the background (non-visible).
5. All visible fields are correct.
6. User attempts to submit form. Form does not submit because of validation error on non-visible field.

Or perhaps I need to modify my code? What seems to be happening is that if the field is not visible and has not been validated, then the custom validator code correctly ignores the field. But if the field has an existing validation error, then it is NOT being ignored.

Thanks!

Feature request:

It would be excellent if Parsley could be configured to append an element (div, ul, etc.) to the validated input in addition to / instead of changing the class to parsley-success

The use case: I'd like to show visual feedback in the form of a checkbox next to the form input instead of changing the actual input's appearance. Right now I have to make the checkbox appear as an offset background image, which is a bit hack-ey.

Hello!

I found a little french mistake for 'notnull' message.

Instead of:
"Cette valeur ne peux pas être nulle."
you should write:
"Cette valeur ne peut pas être nulle."

In the sample, the field with required length [20,200] throws a validation error after the field has its fourth character typed, while the user is likely entering additional characters in the field. This UX probably can be done better.

For instance these are valid email address types:

[email protected]
username@::1

Notice both the IP v4 and v6 versions are considered to be valid.

Hi,
i have tested and i get this error
SCRIPT438: Object doesn't support property or method 'parsley'
parsley.js, line 772 character 13

thanks in advanced.

Loved this project, i'm thinking of using it on my site to replace the outdated one I have, but is on spanish, I was thinking on contributing the locales, and/or allowing custom messages when declaring validations, is someone already working on this?

This is an awesome utility btw - thank you!

I might be missing something, but I'm trying to use data-notblank = true on a <select> input.

Rails allows you to set the :prompt option on a collection_select_tag, for example, and it sets the first option to something like "Please choose an option" with the value = "" for the first option tag.

Parsley doesn't seem to give a response if that option is left as-is. If it's not supported - no biggie - consider this my request! If it is and I'm doing something wrong, apologies :)

I just found an small issue ..

When i try to validate a input with "data-minlength" => "6" the validation don't work. I mean, the message don't shows up. It only appears if I add another validation, eg: "data-required" => "true"

It is confusing because if the input must be at least 6 characters, he is required, no?

With this problem my input shows two error messages. How do I show only the validation of 6 characters?

On the demo page, the "Not Blank" example displays two error messages -- "This value should not be blank." and "This value is required." when the field is invalid. The documentation also doesn't specify the differences between notblank and required.

Both the IP v4 and v6 versions are considered to be valid.

$( window ).on( 'load', function () {

$( '[data-validate="parsley"]' ).each( function () {
  $( this ).parsley();
})

});

Missing semi-colon, and $( window ).on( 'load', can be replaced by just $.

Hi everyone,

First of all, I think this is great plugin with a robust api.

I would like to know if there is any easy way to animate the error messages or show them inside tooltips?

Validation does not seem to trigger for fields with multiple value. I have tried using data-required, data-mincheck, etc. Any pointers.

Thanks.

What do you think of allowing trigger: true in the options to enable smart automatic triggering? (keyup for inputs, change for selects, radios and selects etc)

Hi,

I would like to exec a custom function when the field is successfully checked, I tried:

$('input[name="username"]', $form).parsley({
    listeners: {
        onFieldValidate: function (elem, constraints) {
            alert(elem);
        },
        onFieldSuccess: function (elem, constraints) {
            alert(elem);
        }
    }
});

But nothing, may you add an example to your doc please?

And how to know if the form is ok?

Regards

hi, i think it would be awesome if we can do this, this shows as a problem, when you have multiple validaters applied to an input, and specially if you have multiple forms, as mentioned in other Issue Issue #48

also is there a way to pass paramaters to the error message so they can be replaced, something like string.format ?
this will give us amazing flexability specially in real world application where this happens a lot
so my humble suggestion is like this

`

thanks in advanced

I would go through the jshint.com tool (put the line /*jshint laxcomma: true */ as first line to remove complaints about your comma syntax). Things it spotted:

Missing semicolons: lines 50, 53, 81, 170, 279, 283, etc.
Unreachable break: line 117
Multiple variable declarations: line 224, etc.
Other stuff.

Another thought / feature request:

Might be useful to allow configuration / customization of the error removal process. Right now I believe the only option is as-described in the "Le UX tips" section:

"when a field is detected and shown as invalid, next checks are done on each keypress to try to quickly remove error(s) message(s) once field is ok."

This makes sense for many cases, but here's an example where some customization might be nice (I'll give example with pictures from the form I've been building).

Start with a blank field:

I have data-validation-minlength set to 0 and a trigger on blur/change, so if leave the field blank or tab out, I get the error message as expected (I have minlength set to 0 because otherwise tabbing out of the field won't trigger the message, which is what I want).

So if I tab back in and start typing a name, because the default behavior is to check for validity on every keypress, as soon as I type the first letter I'm given the positive feedback that the field is now valid:

But I haven't finished typing my name, so that feedback is interruptive. At least in this case, what would make more sense is to allow the user to type the name, and then be able to run a validation check as they move to the next field.

So I guess in other words, what I'm requesting is configuration of the validation-correction check -- instead of a default "keyup" event right away I'd like to be able to configure the validation check to be the same as my initial validation check (in my case, the blur or change event) or whatever event I may choose.

Let me know if this makes sense :)

Here is a generateHash function that avoids the difficult to compress string ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz. Also, it's much more concise. The substring bit is to remove the dot.

, generateHash: function () {
  return = 'parsley-' + (Math.random() + '').substring(2);
}

I need to validate separate forms on the same page. This mostly works, except the custom messages I set in the first Parsley object are shared on the others. Any tips on fixing this?

Thanks! Overall, very cool library.

I was hoping to start a discussion about how make the onFormSubmit more useful especially given it's current use ParsleyForm.validate. As it stands now, Parsley binds validate to the form's onsubmit event and the form will only submit if it validates. I've run into a situation where I want to process the form data after validation and submit the form (arbitrarily) later.

I've made the following change locally to help get around the problem but I'd like to get some feedback and see if we can find a better solution.

--- a/parsley.js
+++ b/parsley.js
@@ -878,9 +878,7 @@
         this.focusedField.focus();
       }

-      this.options.listeners.onFormSubmit( isValid, event, this );
-
-      return isValid;
+      return isValid && this.options.listeners.onFormSubmit( isValid, event, this );
     }

     /**
@@ -980,7 +978,7 @@
       }
     , listeners: {
         onFieldValidate: function ( elem, ParsleyForm ) { return false; } // Executed on validation. Return true to ignore field validation
-      , onFormSubmit: function ( isFormValid, event, ParsleyField ) {}    // Executed once on form validation
+      , onFormSubmit: function ( isFormValid, event, ParsleyField ) { return true; }    // Executed once on form validation
       , onFieldError: function ( elem, constraints, ParsleyField ) {}     // Executed when a field is detected as invalid
       , onFieldSuccess: function ( elem, constraints, ParsleyField ) {}   // Executed when a field passes validation
     }

In this way onFormSubmit has the final "say" as to whether the form should be submitted. Eager to discuss other solutions. Thanks!

Hi

There seems to be no way of dismantling a parsley instance on a form

$('#form').parsley('destroy');

Would be nice to have, and ideally it would be called before trying to setup a new instance if one already exists.

Hi,
awesome library, one of the best i have seen, thanks a lot for it.

i am having an issue, when a form is being injected dynamically to the page the
data-trigger="keyup"
does not work but parsley validation functionality works fine using this command
$( '#form' ).parsley( 'validate' );
then the trigger works, but that defeats the whole purpose of keyup event

thanks in advanced.

    <form id="demo-form" data-validate="parsley">
        <label for="fullname">Full Name * :</label>
        <input type="text" id="fullname" name="fullname" data-required="true" data-trigger="keyup">

        <input type="hidden" name="hidden_form_field" value="any_value">
        <input type="submit" name="submit" value="Submit">
    </form>

The following form will fail to submit because the hidden field fails validation, despite "input[type=hidden]" being in the excluded option.

I tried this on the demo page in the email field:

1. Enter invalid value
2. Click the "Validate button"
   Result: OK - the field is highlighted in red
3. Select the invalid text and remove it using backspace
   Result: OK - the red is cleared upon keyup
4. Enter something invalid again
5. Use the red [x] to remove all the contents of the field
   Result: the field stays highlighted in red
   Expected: same as clearing with keyboard - error is cleared (hitting validate again treats it as empty field and clears the highlight)

On a separate note - why is there an [x] in the field anyways? Is that not against UX guidelines (dangeruos actions should be hard to achieve - can totally see someone accidentally touching the [x] on mobile)? Is it not the same as the good old useless [Reset] buttons on the forms? This is an IE10 feature, apparently, so the questions should go to Microsoft, not Parsley.

Hi,

data-equalTo does not work properly.
here is jsbin to demonstrate it.
http://jsbin.com/uxojiw/2/edit

Repro Steps:

1. enter something in new password field
2. enter different in confirm password field. (this works)
3. enter same as step 1 in confirm password field (this works, error should go away)
4. go back to new password field and change it to something different than confirm password. (THIS DOES NOT WORK!!!. Confirm Password field should be marked as error since it is not equal to new password).

Thanks
zm

del

How to reproduce:

• go to site example
• see email field with white background
• start typing, background turns red
• put a valid email address, background turns green
• delete until it's invalid, background stays green.

Note that on lost focus the background correctly turns red, but since it turns green on keyup I think it should also do the opposite thing for consistency.

excluded: 'input[type=hidden]' // Do not validate input[type=hidded].

input[type=hidden]

this.errorClassHandler.removeClass( this.options.successClass ).removeClass( this.options.errorClass );

could be

this.errorClassHandler.removeClass( this.options.successClass + ' ' + this.options.errorClass);