Parsley.js
Validate your forms, frontend, without writing a single line of javascript
Parsley - The ultimate JavaScript form validation library parsley, the ultimate frontend javascript form validation library
I'm using parsley.js in a rails project and it works perfectly fine on my local machine. On Heroku, it's as if it's not there. The javascript file is in app/assets. I looked at the compiled js that is served on heroku and parsley is definitely in there, but I'm not seeing it actually working.
I'm not even sure how to start troubleshooting this. What could be the issue?
Source: (StackOverflow)
Is it possible to use the date validation in Parsley v2.X as in the previous version?
Example (v1.x): parsley-onorafterdate="#currentDate"
I cannot find information in the documention about this issue.
Source: (StackOverflow)
i'm using ParsleyJS library to validate my form, but if a field is invalid i only want to apply the error classes but i don't want to display the error messages. If i use the property data-show-errors="false, then neither the class or the error shows. I used this method of putting display:none in the css:
ul.parsley-error-list {
display:none !important;
}
ul.parsley-error-list li {
display:none !important;
} and it works, but i wanted to know if this is the right approach for doing this or if the library has a way to configure it? Thanks!
Source: (StackOverflow)
I have been trying to use Parsley.js with Meteor, I can get it to work with a JS using a rendered function but I've had no luck when I use the HTML code approach. Example code is given below:
<form class="form-horizontal frmParsley" role="form" parsley-validate>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="Name" parsley-trigger="change" parsley-minlength="5" required />
</div>
</div>
</form>
Source: (StackOverflow)
I am trying to do something like this:
{{input value=email type="text" data-type="email"}}
In order to use parsley.js to validate my inputs. (I know email can use type="email") but this is just an example.
But I am seeing that the data-type="email" is not showing up in the generated HTML.
Is there some way I can add this HTML data- attribute into a handlebars tag?
Source: (StackOverflow)
I want to alter the positioning of each error message. That is display the error message in the respective <div class="errorBlock"></div>. By using the documentation's code the the error msg is displayed before the element (input) and not displayed as expected.
Any ideas?
As per documentation:
errors: {
container: function (element, isRadioOrCheckbox) {
var $container = element.parent().find(".parsley-container");
if ($container.length === 0) {
$container = $("<div class='parsley-container'></div>").insertBefore(element);
}
return $container;
}
}
My html code is:
INPUT
<div class="input-group date date-picker" data-date-format="dd/mm/yyyy" data-date-viewmode="years">
<input class="form-control dataScrap firstInput" type="text" parsley-notblank="true" parsley-required="true" parsley-error-message="You must input a birth date" readonly="readonly"/>
<span class="input-group-btn">
<button class="btn default" type="button"><i class="fa fa-calendar"></i></button>
</span>
<div class="errorBlock"></div>
</div>
CHECKBOX
<div class="checkbox-list">
<label class="checkbox-inline">
<input type="checkbox" parsley-group="checkboxGroup" parsley-mincheck="2"> Checkbox 1
</label>
<label class="checkbox-inline">
<input type="checkbox" parsley-group="checkboxGroup"> Checkbox 2
</label>
<div class="errorBlock"></div>
</div>
Source: (StackOverflow)
I am using Twitter Bootstrap 3.1.1 with Parsley v2.0.0-rc3. I made it mostly work apart from classHandler option.
I have HTML like this:
<div class="form-group">
<label class="control-label" for="username">User Name</label>
<input class="form-control" id="username" name="username" required="" type="text" value="">
</div>
And run Parsley like this:
$("#register_form").parsley({
successClass: "has-success",
errorClass: "has-error",
classHandler: function(el) {
return $(el).closest(".form-group");
},
errorsWrapper: "<span class='help-block'></span>",
errorTemplate: "<span></span>"
});
Everything works fine, but success / error classes are applied to wrong element. After the page is loaded, I get this:
<div class="form-group">
<label class="control-label" for="username">User Name</label>
<input class="form-control" id="username" name="username" required="" type="text" value="" data-parsley-id="5043">
<span class="help-block" id="parsley-id-5043"></span>
</div>
And when validated, the result is this:
<div class="form-group">
<label class="control-label" for="username">User Name</label>
<input class="form-control has-error" id="username" name="username" required="" type="text" value="" data-parsley-id="5043">
<span class="help-block filled" id="parsley-id-5043">
<span class="parsley-required">This value is required.</span>
</span>
</div>
However, I expect something different:
<div class="form-group has-error">
<label class="control-label" for="username">User Name</label>
<input class="form-control" id="username" name="username" required="" type="text" value="" data-parsley-id="5043">
<span class="help-block filled" id="parsley-id-5043">
<span class="parsley-required">This value is required.</span>
</span>
</div>
I have verified using alert that the function runs. But I am new to jQuery and JavaScript, so I do not know how to debug it any further and fix it.
Source: (StackOverflow)
I have a form ('#registrations') that I am validating with Parsley.js and so far it is working fine. However, I am trying to dynamically remove form fields and add new ones to Parsley validation, depending on what someone selects in a select drop down ('#manufacturer').
Here is my markup:
<select name="manufacturer" id="manufacturer" parsley-required="true" data-error-message="Please select a manufacturer.">
<option value="apple">Apple</option>
<option value="blackberry">Blackberry</option>
<option value="htc">HTC</option>
<option value="huawei">Huawei</option>
<option value="lg">LG</option>
<option value="motorola">Motorola</option>
<option value="nokia">Nokia</option>
<option value="samsung">Samsung</option>
<option value="sony">Sony</option>
<option value="sony-ericsson">Sony Ericsson</option>
</select>
Here is my JS:
//init parsley
$('#registrations').parsley();
$('#manufacturer').change(function() {
//define selected value
var manufacturer = $(this).val();
//destroy parsley
$('#registrations').parsley('destroy');
//remove all models selects from parsley validation
//if someone has previously selected a different manufacturer
$('#registrations').parsley('removeItem', '#apple-models');
$('#registrations').parsley('removeItem', '#blackberry-models');
$('#registrations').parsley('removeItem', '#htc-models');
$('#registrations').parsley('removeItem', '#huawei-models');
$('#registrations').parsley('removeItem', '#lg-models');
$('#registrations').parsley('removeItem', '#motorola-models');
$('#registrations').parsley('removeItem', '#nokia-models');
$('#registrations').parsley('removeItem', '#samsung-models');
$('#registrations').parsley('removeItem', '#sony-models');
$('#registrations').parsley('removeItem', '#sony-ericsson-models');
//add corresponding models select to parsely
$('#registrations').parsley('addItem', '#'+manufacturer+'-models');
//reinit parsley
$('#registrations').parsley();
});
This isn't working but I don't know why.
Source: (StackOverflow)
<form id="f">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input parsley-type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" parsley-trigger="keyup">
</div>
</form>
<script>
$(function(){
$('#f').parsley('validate');
});
</script>
Instead of form element I would like to validate content in div element, is it possible?
Source: (StackOverflow)
I want to add a couple of checks for my forms whose condition is related to other fields' values (i.e. I have a range form and from field must be less than to field, and viceversa). I didn't find anything like that on the present Validators so I tried to add those myself.
So, I added these two functions to Assert.prototype:
GreaterThanReference: function ( reference ) {
this.__class__ = 'GreaterThanReference';
if ( 'undefined' === typeof reference )
throw new Error( 'GreaterThanReference must be instanciated with a value or a function' );
this.reference = reference;
this.validate = function ( value ) {
var reference = 'function' === typeof this.reference ? this.reference( value ) : this.reference;
if ( '' === value || isNaN( Number( value ) ) )
throw new Violation( this, value, { value: Validator.errorCode.must_be_a_number } );
if ( this.reference.value >= value )
throw new Violation( this, value );
return true;
};
return this;
}
and
LessThanReference: function ( reference ) {
this.__class__ = 'LessThanReference';
if ( 'undefined' === typeof reference )
throw new Error( 'LessThanReference must be instanciated with a value or a function' );
this.reference = reference;
this.validate = function ( value ) {
var reference = 'function' === typeof this.reference ? this.reference( value ) : this.reference;
if ( '' === value || isNaN( Number( value ) ) )
throw new Violation( this, value, { value: Validator.errorCode.must_be_a_number } );
if ( this.reference.value <= value )
throw new Violation( this, value );
return true;
};
return this;
}
and these other two to ParsleyValidator.prototype.validators:
greaterthan: function (value) {
return $.extend(new Validator.Assert().GreaterThanReference(value), {
priority: 256,
requirementsTransformer: function () {
return { name : $(value).attr('alt'), value : +$(value).val() };
}});
}
and
lessthan: function (value) {
return $.extend(new Validator.Assert().LessThanReference(value), {
priority: 256,
requirementsTransformer: function () {
return { name : $(value).attr('alt'), value : +$(value).val() };
}});
}
Then I wanted to add the revesed check on the referenced field, so that if I change only the referenced field's value I can still validate the form (in the range example, if I change from value, I should validate to field. And if I change to value, I should validate from field). To achieve that, I edited ParsleyField.prototype.addConstraint:
addConstraint: function (name, requirements, priority, isDomConstraint, isReference) {
name = name.toLowerCase();
if ('function' === typeof window.ParsleyValidator.validators[name]) {
var constraint = new ConstraintFactory(this, name, requirements, priority, isDomConstraint);
// if constraint is a referenced one, I add the specular constraint on the referenced field
if((name == 'lessthan' || name == 'greaterthan') && isReference !== true) {
// I check if I already instanciated the referenced ParsleyField
var referencedField = $(requirements).data('Parsley') && $(requirements).data('Parsley').__class__ == 'ParsleyField' ?
$(requirements).data('Parsley') :
new ParsleyField($(requirements), this.parsleyInstance).init();
referencedField.addConstraint(name == 'lessthan' ? 'greaterthan' : 'lessthan', '#' + this.$element.attr('id'), priority, isDomConstraint, true);
}
// if constraint already exist, delete it and push new version
if ('undefined' !== this.constraintsByName[constraint.name])
this.removeConstraint(constraint.name);
this.constraints.push(constraint);
this.constraintsByName[constraint.name] = constraint;
}
return this;
}
In detail, I added the isReference argument to know if I already had added the reverse constraint on the referencing field, to avoid circular references. Then, in a quite horrible way, I check if the constraint I'm adding has a reference and isn't already a referenced constraint (maybe it can be improved by adding some sort of "constraint type" which could be indirect (or referenced) for the constraints who check other fields, and direct for those who just check the value). If this condition is true, I have to add the new constraint to the already instanciated ParsleyField, or if has not been instanciated, to a new ParsleyField.
This method has a problem. If I add a constraint on a field that is referencing a field that has not been instanciated yet, when the normal flow of Parsley gets to that field it overwrites it, eliminating the constraint I added before.
Zero-question: is this the right way to achieve what I want? I admit I didn't explore Parsley API too much, but I'd like to use as less features as possible, as I'm using the same checks server side and I should be able to do the same things on both sides.
If zero-answer is 'yes', how can I solve that overwriting problem? Probably I should be able on ParsleyField instantiation to check if it has already been instanciated, but how?
Source: (StackOverflow)
i am using parsely validation with angular js but its not working what i am doing wrong can any one correct or detect the mistake in my code.
if i am submiting so its not working not showing me any error as parsely show , according to thier attributes.
I also add parsely libraries and not getting any error related to it so what's going wrong.
LoginView.html
<form class="form-horizontal" ng-submit='login()' data-validate="parsley">
<div class="modal-header">
<h3>Login</h3>
</div>
<div class="modal-body">
<div class="form-group">
<label for="login-Name" class="col-lg-3 form-label">User Name:</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="login-Name" ng-model="LoginName" name="login-Name" placeholder="User Name" data-type="alphanum" data-required="true" />
</div>
</div>
<div class="form-group">
<label for="login-Password" class="col-lg-3 form-label">Password:</label>
<div class="col-lg-8">
<input type="password" class="form-control" id="login-Password" ng-model="LoginPass" name="login-Password" placeholder="Password" data-type="alphanum" data-required="true" data-minlength="6" data-minlength="6" data-maxlength="20"/>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">
<i class="icon-user icon-white"></i> Login
</button>
</div>
</form>
loginController.js
$scope.login = function() {
var user = {
"username" : $scope.LoginName,
"password" : $scope.LoginPass
}
};
Source: (StackOverflow)
I'm trying to create a form that is validated front end using Parsley.js and submitted asynchronously. The form is called #contactForm and the submit button is #sendData, the error comes when I hit submit on an empty or invalid form. I expect to see an 'Error' alert from invalid form data but instead it just continues with the Else condition and the data is processed by contactForm.php.
$(document).ready(function() {
// submit data on click and check if valid
$('#sendData').click(function(e) {
//check if valid with parsley
var valid = $('#contactForm').parsley ( 'validate' );
if ( valid === false )
{
e.preventDefault();
}
else
{
$.post("contactForm.php", $("#contactForm").serialize());
}
});
});
Proper solution below.
Source: (StackOverflow)
Using Parsley.js, is it possible to specify the element that should hold the error messages? I tried:
$('#myForm').parsley({
errors: {
container: {
$('#errorMessages')
}
}
});
But the error messages are still placed right after my form inputs.
Source: (StackOverflow)
Given this code, it never works and always returns true whatsoever ?
<form id="my-form" data-validate="parsley">
<p>
<label for="username">Username * :</label>
<input type="text" id="username" name="username" data-required="true" >
</p>
<p>
<label for="email">Email Address * :</label>
<input type="text" id="email" name="email" data-required="true" >
</p>
<br/>
<!-- Validate all the form fields by clicking this button -->
<a class="btn btn-danger" id="validate" >Validate All</a>
</form>
<script>
var $form = $('#my-form');
$('#validate').click (function () {
if ( $form.parsley('validate') )
console.log ( 'valid' ); <-- always goes here
else
console.log ('invalid');
});
</script>
So my question is if there is a way to trigger parsley validation without adding a submit button ?
Source: (StackOverflow)
I am working on a MVC 5 project and i came across parsley.js and found it to be very interesting. I started working with that but soon enough I knew that we cannot integrate it with the data annotations we are usin in MVC.
The difference id=s that parsley expects "data-required" while the annotations gives "data-val-required".
How can i make both of them work with each other? Is there anyway in which we can influence the behaviour of either of them?
Any suggestions or help would be appreciated.
Source: (StackOverflow)