parsleyjs
Version:
Validate your forms, frontend, without writing a single line of javascript!
1,085 lines • 52.3 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>field.js</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
<div id="container">
<div id="background"></div>
<ul id="jump_to">
<li>
<a class="large" href="javascript:void(0);">Jump To …</a>
<a class="small" href="javascript:void(0);">+</a>
<div id="jump_wrapper">
<div id="jump_page"><a class="source" href="../index.html"><<< back to documentation</a>
<a class="source" href="abstract.html">
abstract.js
</a>
<a class="source" href="defaults.html">
defaults.js
</a>
<a class="source" href="factory.html">
factory.js
</a>
<a class="source" href="field.html">
field.js
</a>
<a class="source" href="form.html">
form.js
</a>
<a class="source" href="main.html">
main.js
</a>
<a class="source" href="multiple.html">
multiple.js
</a>
<a class="source" href="pubsub.html">
pubsub.js
</a>
<a class="source" href="remote.html">
remote.js
</a>
<a class="source" href="ui.html">
ui.js
</a>
<a class="source" href="utils.html">
utils.js
</a>
<a class="source" href="validator.html">
validator.js
</a>
<a class="source" href="validator_registry.html">
validator_registry.js
</a>
</div>
</li>
</ul>
<ul class="sections">
<li id="title">
<div class="annotation">
<h1>field.js</h1>
</div>
</li>
<li id="section-1">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-1">¶</a>
</div>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> $ <span class="hljs-keyword">from</span> <span class="hljs-string">'jquery'</span>;
<span class="hljs-keyword">import</span> ConstraintFactory <span class="hljs-keyword">from</span> <span class="hljs-string">'./factory/constraint'</span>;
<span class="hljs-keyword">import</span> ParsleyUI <span class="hljs-keyword">from</span> <span class="hljs-string">'./ui'</span>;
<span class="hljs-keyword">import</span> ParsleyUtils <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils'</span>;
<span class="hljs-keyword">var</span> ParsleyField = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">field, domOptions, options, parsleyFormInstance</span>) </span>{
<span class="hljs-keyword">this</span>.__class__ = <span class="hljs-string">'ParsleyField'</span>;
<span class="hljs-keyword">this</span>.$element = $(field);</pre></div></div>
</li>
<li id="section-2">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-2">¶</a>
</div>
<p>Set parent if we have one</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-string">'undefined'</span> !== <span class="hljs-keyword">typeof</span> parsleyFormInstance) {
<span class="hljs-keyword">this</span>.parent = parsleyFormInstance;
}
<span class="hljs-keyword">this</span>.options = options;
<span class="hljs-keyword">this</span>.domOptions = domOptions;</pre></div></div>
</li>
<li id="section-3">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-3">¶</a>
</div>
<p>Initialize some properties</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">this</span>.constraints = [];
<span class="hljs-keyword">this</span>.constraintsByName = {};
<span class="hljs-keyword">this</span>.validationResult = <span class="hljs-literal">true</span>;</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-4">¶</a>
</div>
<p>Bind constraints</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">this</span>._bindConstraints();
};
<span class="hljs-keyword">var</span> statusMapping = {<span class="hljs-attr">pending</span>: <span class="hljs-literal">null</span>, <span class="hljs-attr">resolved</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">rejected</span>: <span class="hljs-literal">false</span>};
ParsleyField.prototype = {</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-5">¶</a>
</div>
<h1 id="public-api">Public API</h1>
<p>Validate field and trigger some events for mainly <code>ParsleyUI</code>
@returns <code>true</code>, an array of the validators that failed, or
<code>null</code> if validation is not finished. Prefer using whenValidate</p>
</div>
<div class="content"><div class='highlight'><pre> validate: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">options</span>) </span>{
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">arguments</span>.length >= <span class="hljs-number">1</span> && !$.isPlainObject(options)) {
ParsleyUtils.warnOnce(<span class="hljs-string">'Calling validate on a parsley field without passing arguments as an object is deprecated.'</span>);
options = {options};
}
<span class="hljs-keyword">var</span> promise = <span class="hljs-keyword">this</span>.whenValidate(options);
<span class="hljs-keyword">if</span> (!promise) <span class="hljs-comment">// If excluded with `group` option</span>
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
<span class="hljs-keyword">switch</span> (promise.state()) {
<span class="hljs-keyword">case</span> <span class="hljs-string">'pending'</span>: <span class="hljs-keyword">return</span> <span class="hljs-literal">null</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'resolved'</span>: <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'rejected'</span>: <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.validationResult;
}
},</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-6">¶</a>
</div>
<p>Validate field and trigger some events for mainly <code>ParsleyUI</code>
@returns a promise that succeeds only when all validations do
or <code>undefined</code> if field is not in the given <code>group</code>.</p>
</div>
<div class="content"><div class='highlight'><pre> whenValidate: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">{force, group} = {}</span>) </span>{</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-7">¶</a>
</div>
<p>do not validate a field if not the same as given validation group</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">this</span>.refreshConstraints();
<span class="hljs-keyword">if</span> (group && !<span class="hljs-keyword">this</span>._isInGroup(group))
<span class="hljs-keyword">return</span>;
<span class="hljs-keyword">this</span>.value = <span class="hljs-keyword">this</span>.getValue();</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-8">¶</a>
</div>
<p>Field Validate event. <code>this.value</code> could be altered for custom needs</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">this</span>._trigger(<span class="hljs-string">'validate'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.whenValid({force, <span class="hljs-attr">value</span>: <span class="hljs-keyword">this</span>.value, <span class="hljs-attr">_refreshed</span>: <span class="hljs-literal">true</span>})
.always(<span class="hljs-function"><span class="hljs-params">()</span> =></span> { <span class="hljs-keyword">this</span>._reflowUI(); })
.done(<span class="hljs-function"><span class="hljs-params">()</span> =></span> { <span class="hljs-keyword">this</span>._trigger(<span class="hljs-string">'success'</span>); })
.fail(<span class="hljs-function"><span class="hljs-params">()</span> =></span> { <span class="hljs-keyword">this</span>._trigger(<span class="hljs-string">'error'</span>); })
.always(<span class="hljs-function"><span class="hljs-params">()</span> =></span> { <span class="hljs-keyword">this</span>._trigger(<span class="hljs-string">'validated'</span>); })
.pipe(...this._pipeAccordingToValidationResult());
},
<span class="hljs-attr">hasConstraints</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> <span class="hljs-number">0</span> !== <span class="hljs-keyword">this</span>.constraints.length;
},</pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-9">¶</a>
</div>
<p>An empty optional field does not need validation</p>
</div>
<div class="content"><div class='highlight'><pre> needsValidation: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">value</span>) </span>{
<span class="hljs-keyword">if</span> (<span class="hljs-string">'undefined'</span> === <span class="hljs-keyword">typeof</span> value)
value = <span class="hljs-keyword">this</span>.getValue();</pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-10">¶</a>
</div>
<p>If a field is empty and not required, it is valid
Except if <code>data-parsley-validate-if-empty</code> explicitely added, useful for some custom validators</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (!value.length && !<span class="hljs-keyword">this</span>._isRequired() && <span class="hljs-string">'undefined'</span> === <span class="hljs-keyword">typeof</span> <span class="hljs-keyword">this</span>.options.validateIfEmpty)
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
},
<span class="hljs-attr">_isInGroup</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">group</span>) </span>{
<span class="hljs-keyword">if</span> ($.isArray(<span class="hljs-keyword">this</span>.options.group))
<span class="hljs-keyword">return</span> <span class="hljs-number">-1</span> !== $.inArray(group, <span class="hljs-keyword">this</span>.options.group);
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.options.group === group;
},</pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-11">¶</a>
</div>
<p>Just validate field. Do not trigger any event.
Returns <code>true</code> iff all constraints pass, <code>false</code> if there are failures,
or <code>null</code> if the result can not be determined yet (depends on a promise)
See also <code>whenValid</code>.</p>
</div>
<div class="content"><div class='highlight'><pre> isValid: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">options</span>) </span>{
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">arguments</span>.length >= <span class="hljs-number">1</span> && !$.isPlainObject(options)) {
ParsleyUtils.warnOnce(<span class="hljs-string">'Calling isValid on a parsley field without passing arguments as an object is deprecated.'</span>);
<span class="hljs-keyword">var</span> [force, value] = <span class="hljs-built_in">arguments</span>;
options = {force, value};
}
<span class="hljs-keyword">var</span> promise = <span class="hljs-keyword">this</span>.whenValid(options);
<span class="hljs-keyword">if</span> (!promise) <span class="hljs-comment">// Excluded via `group`</span>
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
<span class="hljs-keyword">return</span> statusMapping[promise.state()];
},</pre></div></div>
</li>
<li id="section-12">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-12">¶</a>
</div>
<p>Just validate field. Do not trigger any event.
@returns a promise that succeeds only when all validations do
or <code>undefined</code> if the field is not in the given <code>group</code>.
The argument <code>force</code> will force validation of empty fields.
If a <code>value</code> is given, it will be validated instead of the value of the input.</p>
</div>
<div class="content"><div class='highlight'><pre> whenValid: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">{force = false, value, group, _refreshed} = {}</span>) </span>{</pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-13">¶</a>
</div>
<p>Recompute options and rebind constraints to have latest changes</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (!_refreshed)
<span class="hljs-keyword">this</span>.refreshConstraints();</pre></div></div>
</li>
<li id="section-14">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-14">¶</a>
</div>
<p>do not validate a field if not the same as given validation group</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (group && !<span class="hljs-keyword">this</span>._isInGroup(group))
<span class="hljs-keyword">return</span>;
<span class="hljs-keyword">this</span>.validationResult = <span class="hljs-literal">true</span>;</pre></div></div>
</li>
<li id="section-15">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-15">¶</a>
</div>
<p>A field without constraint is valid</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.hasConstraints())
<span class="hljs-keyword">return</span> $.when();</pre></div></div>
</li>
<li id="section-16">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-16">¶</a>
</div>
<p>Value could be passed as argument, needed to add more power to ‘field:validate’</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-string">'undefined'</span> === <span class="hljs-keyword">typeof</span> value || <span class="hljs-literal">null</span> === value)
value = <span class="hljs-keyword">this</span>.getValue();
<span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.needsValidation(value) && <span class="hljs-literal">true</span> !== force)
<span class="hljs-keyword">return</span> $.when();
<span class="hljs-keyword">var</span> groupedConstraints = <span class="hljs-keyword">this</span>._getGroupedConstraints();
<span class="hljs-keyword">var</span> promises = [];
$.each(groupedConstraints, (_, constraints) => {</pre></div></div>
</li>
<li id="section-17">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-17">¶</a>
</div>
<p>Process one group of constraints at a time, we validate the constraints
and combine the promises together.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> promise = ParsleyUtils.all(
$.map(constraints, constraint => <span class="hljs-keyword">this</span>._validateConstraint(value, constraint))
);
promises.push(promise);
<span class="hljs-keyword">if</span> (promise.state() === <span class="hljs-string">'rejected'</span>)
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>; <span class="hljs-comment">// Interrupt processing if a group has already failed</span>
});
<span class="hljs-keyword">return</span> ParsleyUtils.all(promises);
},</pre></div></div>
</li>
<li id="section-18">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-18">¶</a>
</div>
<p>@returns a promise</p>
</div>
<div class="content"><div class='highlight'><pre> _validateConstraint: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">value, constraint</span>) </span>{
<span class="hljs-keyword">var</span> result = constraint.validate(value, <span class="hljs-keyword">this</span>);</pre></div></div>
</li>
<li id="section-19">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-19">¶</a>
</div>
<p>Map false to a failed promise</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-literal">false</span> === result)
result = $.Deferred().reject();</pre></div></div>
</li>
<li id="section-20">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-20">¶</a>
</div>
<p>Make sure we return a promise and that we record failures</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> ParsleyUtils.all([result]).fail(<span class="hljs-function"><span class="hljs-params">errorMessage</span> =></span> {
<span class="hljs-keyword">if</span> (!(<span class="hljs-keyword">this</span>.validationResult <span class="hljs-keyword">instanceof</span> <span class="hljs-built_in">Array</span>))
<span class="hljs-keyword">this</span>.validationResult = [];
<span class="hljs-keyword">this</span>.validationResult.push({
<span class="hljs-attr">assert</span>: constraint,
<span class="hljs-attr">errorMessage</span>: <span class="hljs-string">'string'</span> === <span class="hljs-keyword">typeof</span> errorMessage && errorMessage
});
});
},</pre></div></div>
</li>
<li id="section-21">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-21">¶</a>
</div>
<p>@returns Parsley field computed value that could be overrided or configured in DOM</p>
</div>
<div class="content"><div class='highlight'><pre> getValue: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">var</span> value;</pre></div></div>
</li>
<li id="section-22">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-22">¶</a>
</div>
<p>Value could be overriden in DOM or with explicit options</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-string">'function'</span> === <span class="hljs-keyword">typeof</span> <span class="hljs-keyword">this</span>.options.value)
value = <span class="hljs-keyword">this</span>.options.value(<span class="hljs-keyword">this</span>);
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-string">'undefined'</span> !== <span class="hljs-keyword">typeof</span> <span class="hljs-keyword">this</span>.options.value)
value = <span class="hljs-keyword">this</span>.options.value;
<span class="hljs-keyword">else</span>
value = <span class="hljs-keyword">this</span>.$element.val();</pre></div></div>
</li>
<li id="section-23">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-23">¶</a>
</div>
<p>Handle wrong DOM or configurations</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-string">'undefined'</span> === <span class="hljs-keyword">typeof</span> value || <span class="hljs-literal">null</span> === value)
<span class="hljs-keyword">return</span> <span class="hljs-string">''</span>;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>._handleWhitespace(value);
},</pre></div></div>
</li>
<li id="section-24">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-24">¶</a>
</div>
<p>Actualize options that could have change since previous validation
Re-bind accordingly constraints (could be some new, removed or updated)</p>
</div>
<div class="content"><div class='highlight'><pre> refreshConstraints: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.actualizeOptions()._bindConstraints();
},
<span class="hljs-comment">/**
* Add a new constraint to a field
*
* @param {String} name
* @param {Mixed} requirements optional
* @param {Number} priority optional
* @param {Boolean} isDomConstraint optional
*/</span>
addConstraint: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">name, requirements, priority, isDomConstraint</span>) </span>{
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">window</span>.Parsley._validatorRegistry.validators[name]) {
<span class="hljs-keyword">var</span> constraint = <span class="hljs-keyword">new</span> ConstraintFactory(<span class="hljs-keyword">this</span>, name, requirements, priority, isDomConstraint);</pre></div></div>
</li>
<li id="section-25">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-25">¶</a>
</div>
<p>if constraint already exist, delete it and push new version</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-string">'undefined'</span> !== <span class="hljs-keyword">this</span>.constraintsByName[constraint.name])
<span class="hljs-keyword">this</span>.removeConstraint(constraint.name);
<span class="hljs-keyword">this</span>.constraints.push(constraint);
<span class="hljs-keyword">this</span>.constraintsByName[constraint.name] = constraint;
}
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
},</pre></div></div>
</li>
<li id="section-26">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-26">¶</a>
</div>
<p>Remove a constraint</p>
</div>
<div class="content"><div class='highlight'><pre> removeConstraint: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">name</span>) </span>{
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i < <span class="hljs-keyword">this</span>.constraints.length; i++)
<span class="hljs-keyword">if</span> (name === <span class="hljs-keyword">this</span>.constraints[i].name) {
<span class="hljs-keyword">this</span>.constraints.splice(i, <span class="hljs-number">1</span>);
<span class="hljs-keyword">break</span>;
}
<span class="hljs-keyword">delete</span> <span class="hljs-keyword">this</span>.constraintsByName[name];
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
},</pre></div></div>
</li>
<li id="section-27">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-27">¶</a>
</div>
<p>Update a constraint (Remove + re-add)</p>
</div>
<div class="content"><div class='highlight'><pre> updateConstraint: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">name, parameters, priority</span>) </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.removeConstraint(name)
.addConstraint(name, parameters, priority);
},</pre></div></div>
</li>
<li id="section-28">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-28">¶</a>
</div>
<h1 id="internals">Internals</h1>
</div>
</li>
<li id="section-29">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-29">¶</a>
</div>
<p>Internal only.
Bind constraints from config + options + DOM</p>
</div>
<div class="content"><div class='highlight'><pre> _bindConstraints: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">var</span> constraints = [];
<span class="hljs-keyword">var</span> constraintsByName = {};</pre></div></div>
</li>
<li id="section-30">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-30">¶</a>
</div>
<p>clean all existing DOM constraints to only keep javascript user constraints</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i < <span class="hljs-keyword">this</span>.constraints.length; i++)
<span class="hljs-keyword">if</span> (<span class="hljs-literal">false</span> === <span class="hljs-keyword">this</span>.constraints[i].isDomConstraint) {
constraints.push(<span class="hljs-keyword">this</span>.constraints[i]);
constraintsByName[<span class="hljs-keyword">this</span>.constraints[i].name] = <span class="hljs-keyword">this</span>.constraints[i];
}
<span class="hljs-keyword">this</span>.constraints = constraints;
<span class="hljs-keyword">this</span>.constraintsByName = constraintsByName;</pre></div></div>
</li>
<li id="section-31">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-31">¶</a>
</div>
<p>then re-add Parsley DOM-API constraints</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> name <span class="hljs-keyword">in</span> <span class="hljs-keyword">this</span>.options)
<span class="hljs-keyword">this</span>.addConstraint(name, <span class="hljs-keyword">this</span>.options[name], <span class="hljs-literal">undefined</span>, <span class="hljs-literal">true</span>);</pre></div></div>
</li>
<li id="section-32">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-32">¶</a>
</div>
<p>finally, bind special HTML5 constraints</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>._bindHtml5Constraints();
},</pre></div></div>
</li>
<li id="section-33">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-33">¶</a>
</div>
<p>Internal only.
Bind specific HTML5 constraints to be HTML5 compliant</p>
</div>
<div class="content"><div class='highlight'><pre> _bindHtml5Constraints: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{</pre></div></div>
</li>
<li id="section-34">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-34">¶</a>
</div>
<p>html5 required</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'required'</span>))
<span class="hljs-keyword">this</span>.addConstraint(<span class="hljs-string">'required'</span>, <span class="hljs-literal">true</span>, <span class="hljs-literal">undefined</span>, <span class="hljs-literal">true</span>);</pre></div></div>
</li>
<li id="section-35">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-35">¶</a>
</div>
<p>html5 pattern</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-string">'string'</span> === <span class="hljs-keyword">typeof</span> <span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'pattern'</span>))
<span class="hljs-keyword">this</span>.addConstraint(<span class="hljs-string">'pattern'</span>, <span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'pattern'</span>), <span class="hljs-literal">undefined</span>, <span class="hljs-literal">true</span>);</pre></div></div>
</li>
<li id="section-36">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-36">¶</a>
</div>
<p>range</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'type'</span>) !== <span class="hljs-string">'date'</span> && <span class="hljs-string">'undefined'</span> !== <span class="hljs-keyword">typeof</span> <span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'min'</span>) && <span class="hljs-string">'undefined'</span> !== <span class="hljs-keyword">typeof</span> <span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'max'</span>))
<span class="hljs-keyword">this</span>.addConstraint(<span class="hljs-string">'range'</span>, [<span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'min'</span>), <span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'max'</span>)], <span class="hljs-literal">undefined</span>, <span class="hljs-literal">true</span>);</pre></div></div>
</li>
<li id="section-37">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-37">¶</a>
</div>
<p>HTML5 min</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'type'</span>) !== <span class="hljs-string">'date'</span> && <span class="hljs-string">'undefined'</span> !== <span class="hljs-keyword">typeof</span> <span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'min'</span>))
<span class="hljs-keyword">this</span>.addConstraint(<span class="hljs-string">'min'</span>, <span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'min'</span>), <span class="hljs-literal">undefined</span>, <span class="hljs-literal">true</span>);</pre></div></div>
</li>
<li id="section-38">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-38">¶</a>
</div>
<p>HTML5 max</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'type'</span>) !== <span class="hljs-string">'date'</span> && <span class="hljs-string">'undefined'</span> !== <span class="hljs-keyword">typeof</span> <span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'max'</span>))
<span class="hljs-keyword">this</span>.addConstraint(<span class="hljs-string">'max'</span>, <span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'max'</span>), <span class="hljs-literal">undefined</span>, <span class="hljs-literal">true</span>);</pre></div></div>
</li>
<li id="section-39">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-39">¶</a>
</div>
<p>length</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-string">'undefined'</span> !== <span class="hljs-keyword">typeof</span> <span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'minlength'</span>) && <span class="hljs-string">'undefined'</span> !== <span class="hljs-keyword">typeof</span> <span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'maxlength'</span>))
<span class="hljs-keyword">this</span>.addConstraint(<span class="hljs-string">'length'</span>, [<span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'minlength'</span>), <span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'maxlength'</span>)], <span class="hljs-literal">undefined</span>, <span class="hljs-literal">true</span>);</pre></div></div>
</li>
<li id="section-40">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-40">¶</a>
</div>
<p>HTML5 minlength</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-string">'undefined'</span> !== <span class="hljs-keyword">typeof</span> <span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'minlength'</span>))
<span class="hljs-keyword">this</span>.addConstraint(<span class="hljs-string">'minlength'</span>, <span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'minlength'</span>), <span class="hljs-literal">undefined</span>, <span class="hljs-literal">true</span>);</pre></div></div>
</li>
<li id="section-41">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-41">¶</a>
</div>
<p>HTML5 maxlength</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-string">'undefined'</span> !== <span class="hljs-keyword">typeof</span> <span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'maxlength'</span>))
<span class="hljs-keyword">this</span>.addConstraint(<span class="hljs-string">'maxlength'</span>, <span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'maxlength'</span>), <span class="hljs-literal">undefined</span>, <span class="hljs-literal">true</span>);</pre></div></div>
</li>
<li id="section-42">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-42">¶</a>
</div>
<p>html5 types</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> type = <span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'type'</span>);
<span class="hljs-keyword">if</span> (<span class="hljs-string">'undefined'</span> === <span class="hljs-keyword">typeof</span> type)
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;</pre></div></div>
</li>
<li id="section-43">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-43">¶</a>
</div>
<p>Small special case here for HTML5 number: integer validator if step attribute is undefined or an integer value, number otherwise</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-string">'number'</span> === type) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.addConstraint(<span class="hljs-string">'type'</span>, [<span class="hljs-string">'number'</span>, {
<span class="hljs-attr">step</span>: <span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'step'</span>) || <span class="hljs-string">'1'</span>,
<span class="hljs-attr">base</span>: <span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'min'</span>) || <span class="hljs-keyword">this</span>.$element.attr(<span class="hljs-string">'value'</span>)
}], <span class="hljs-literal">undefined</span>, <span class="hljs-literal">true</span>);</pre></div></div>
</li>
<li id="section-44">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-44">¶</a>
</div>
<p>Regular other HTML5 supported types</p>
</div>
<div class="content"><div class='highlight'><pre> } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/^(email|url|range)$/i</span>.test(type)) {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.addConstraint(<span class="hljs-string">'type'</span>, type, <span class="hljs-literal">undefined</span>, <span class="hljs-literal">true</span>);
}
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
},</pre></div></div>
</li>
<li id="section-45">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-45">¶</a>
</div>
<p>Internal only.
Field is required if have required constraint without <code>false</code> value</p>
</div>
<div class="content"><div class='highlight'><pre> _isRequired: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">if</span> (<span class="hljs-string">'undefined'</span> === <span class="hljs-keyword">typeof</span> <span class="hljs-keyword">this</span>.constraintsByName.required)
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span> !== <span class="hljs-keyword">this</span>.constraintsByName.required.requirements;
},</pre></div></div>
</li>
<li id="section-46">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-46">¶</a>
</div>
<p>Internal only.
Shortcut to trigger an event</p>
</div>
<div class="content"><div class='highlight'><pre> _trigger: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">eventName</span>) </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.trigger(<span class="hljs-string">'field:'</span> + eventName);
},</pre></div></div>
</li>
<li id="section-47">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-47">¶</a>
</div>
<p>Internal only
Handles whitespace in a value
Use <code>data-parsley-whitespace="squish"</code> to auto squish input value
Use <code>data-parsley-whitespace="trim"</code> to auto trim input value</p>
</div>
<div class="content"><div class='highlight'><pre> _handleWhitespace: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">value</span>) </span>{
<span class="hljs-keyword">if</span> (<span class="hljs-literal">true</span> === <span class="hljs-keyword">this</span>.options.trimValue)
ParsleyUtils.warnOnce(<span class="hljs-string">'data-parsley-trim-value="true" is deprecated, please use data-parsley-whitespace="trim"'</span>);
<span class="hljs-keyword">if</span> (<span class="hljs-string">'squish'</span> === <span class="hljs-keyword">this</span>.options.whitespace)
value = value.replace(<span class="hljs-regexp">/\s{2,}/g</span>, <span class="hljs-string">' '</span>);
<span class="hljs-keyword">if</span> ((<span class="hljs-string">'trim'</span> === <span class="hljs-keyword">this</span>.options.whitespace) || (<span class="hljs-string">'squish'</span> === <span class="hljs-keyword">this</span>.options.whitespace) || (<span class="hljs-literal">true</span> === <span class="hljs-keyword">this</span>.options.trimValue))
value = ParsleyUtils.trimString(value);
<span class="hljs-keyword">return</span> value;
},</pre></div></div>
</li>
<li id="section-48">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-48">¶</a>
</div>
<p>Internal only.
Returns the constraints, grouped by descending priority.
The result is thus an array of arrays of constraints.</p>
</div>
<div class="content"><div class='highlight'><pre> _getGroupedConstraints: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">if</span> (<span class="hljs-literal">false</span> === <span class="hljs-keyword">this</span>.options.priorityEnabled)
<span class="hljs-keyword">return</span> [<span class="hljs-keyword">this</span>.constraints];
<span class="hljs-keyword">var</span> groupedConstraints = [];
<span class="hljs-keyword">var</span> index = {};</pre></div></div>
</li>
<li id="section-49">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-49">¶</a>
</div>
<p>Create array unique of priorities</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i < <span class="hljs-keyword">this</span>.constraints.length; i++) {
<span class="hljs-keyword">var</span> p = <span class="hljs-keyword">this</span>.constraints[i].priority;
<span class="hljs-keyword">if</span> (!index[p])
groupedConstraints.push(index[p] = []);
index[p].push(<span class="hljs-keyword">this</span>.constraints[i]);
}</pre></div></div>
</li>
<li id="section-50">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-50">¶</a>
</div>
<p>Sort them by priority DESC</p>
</div>
<div class="content"><div class='highlight'><pre> groupedConstraints.sort(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">a, b</span>) </span>{ <span class="hljs-keyword">return</span> b[<span class="hljs-number">0</span>].priority - a[<span class="hljs-number">0</span>].priority; });
<span class="hljs-keyword">return</span> groupedConstraints;
}
};
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> ParsleyField;</pre></div></div>
</li>
</ul>
</div>
<script type="text/javascript">var _gaq=_gaq||[];_gaq.push(["_setAccount","UA-37229467-1"]);_gaq.push(["_trackPageview"]);(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src=("https:"==document.location.protocol?"https://ssl":"http://www")+".google-analytics.com/ga.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script></body>
</html>