UNPKG

parsleyjs

Version:

Validate your forms, frontend, without writing a single line of javascript!

408 lines (283 loc) 17.9 kB
<!DOCTYPE html> <html> <head> <title>abstract.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 &hellip;</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>abstract.js</h1> </div> </li> <li id="section-1"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-1">&#182;</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> ParsleyUtils <span class="hljs-keyword">from</span> <span class="hljs-string">'./utils'</span>; <span class="hljs-keyword">var</span> ParsleyAbstract = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">this</span>.__id__ = ParsleyUtils.generateID(); }; ParsleyAbstract.prototype = { <span class="hljs-attr">asyncSupport</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// Deprecated</span> _pipeAccordingToValidationResult: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">var</span> pipe = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> { <span class="hljs-keyword">var</span> r = $.Deferred(); <span class="hljs-keyword">if</span> (<span class="hljs-literal">true</span> !== <span class="hljs-keyword">this</span>.validationResult) r.reject(); <span class="hljs-keyword">return</span> r.resolve().promise(); }; <span class="hljs-keyword">return</span> [pipe, pipe]; }, <span class="hljs-attr">actualizeOptions</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ ParsleyUtils.attr(<span class="hljs-keyword">this</span>.$element, <span class="hljs-keyword">this</span>.options.namespace, <span class="hljs-keyword">this</span>.domOptions); <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.parent &amp;&amp; <span class="hljs-keyword">this</span>.parent.actualizeOptions) <span class="hljs-keyword">this</span>.parent.actualizeOptions(); <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; }, <span class="hljs-attr">_resetOptions</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">initOptions</span>) </span>{ <span class="hljs-keyword">this</span>.domOptions = ParsleyUtils.objectCreate(<span class="hljs-keyword">this</span>.parent.options); <span class="hljs-keyword">this</span>.options = ParsleyUtils.objectCreate(<span class="hljs-keyword">this</span>.domOptions);</pre></div></div> </li> <li id="section-2"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-2">&#182;</a> </div> <p>Shallow copy of ownProperties of initOptions:</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-keyword">in</span> initOptions) { <span class="hljs-keyword">if</span> (initOptions.hasOwnProperty(i)) <span class="hljs-keyword">this</span>.options[i] = initOptions[i]; } <span class="hljs-keyword">this</span>.actualizeOptions(); }, <span class="hljs-attr">_listeners</span>: <span class="hljs-literal">null</span>,</pre></div></div> </li> <li id="section-3"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-3">&#182;</a> </div> <p>Register a callback for the given event name Callback is called with context as the first argument and the <code>this</code> The context is the current parsley instance, or window.Parsley if global A return value of <code>false</code> will interrupt the calls</p> </div> <div class="content"><div class='highlight'><pre> on: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">name, fn</span>) </span>{ <span class="hljs-keyword">this</span>._listeners = <span class="hljs-keyword">this</span>._listeners || {}; <span class="hljs-keyword">var</span> queue = <span class="hljs-keyword">this</span>._listeners[name] = <span class="hljs-keyword">this</span>._listeners[name] || []; queue.push(fn); <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; },</pre></div></div> </li> <li id="section-4"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-4">&#182;</a> </div> <p>Deprecated. Use <code>on</code> instead</p> </div> <div class="content"><div class='highlight'><pre> subscribe: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">name, fn</span>) </span>{ $.listenTo(<span class="hljs-keyword">this</span>, name.toLowerCase(), fn); },</pre></div></div> </li> <li id="section-5"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-5">&#182;</a> </div> <p>Unregister a callback (or all if none is given) for the given event name</p> </div> <div class="content"><div class='highlight'><pre> off: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">name, fn</span>) </span>{ <span class="hljs-keyword">var</span> queue = <span class="hljs-keyword">this</span>._listeners &amp;&amp; <span class="hljs-keyword">this</span>._listeners[name]; <span class="hljs-keyword">if</span> (queue) { <span class="hljs-keyword">if</span> (!fn) { <span class="hljs-keyword">delete</span> <span class="hljs-keyword">this</span>._listeners[name]; } <span class="hljs-keyword">else</span> { <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = queue.length; i--; ) <span class="hljs-keyword">if</span> (queue[i] === fn) queue.splice(i, <span class="hljs-number">1</span>); } } <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; },</pre></div></div> </li> <li id="section-6"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-6">&#182;</a> </div> <p>Deprecated. Use <code>off</code></p> </div> <div class="content"><div class='highlight'><pre> unsubscribe: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">name, fn</span>) </span>{ $.unsubscribeTo(<span class="hljs-keyword">this</span>, name.toLowerCase()); },</pre></div></div> </li> <li id="section-7"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-7">&#182;</a> </div> <p>Trigger an event of the given name A return value of <code>false</code> interrupts the callback chain Returns false if execution was interrupted</p> </div> <div class="content"><div class='highlight'><pre> trigger: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">name, target, extraArg</span>) </span>{ target = target || <span class="hljs-keyword">this</span>; <span class="hljs-keyword">var</span> queue = <span class="hljs-keyword">this</span>._listeners &amp;&amp; <span class="hljs-keyword">this</span>._listeners[name]; <span class="hljs-keyword">var</span> result; <span class="hljs-keyword">var</span> parentResult; <span class="hljs-keyword">if</span> (queue) { <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = queue.length; i--; ) { result = queue[i].call(target, target, extraArg); <span class="hljs-keyword">if</span> (result === <span class="hljs-literal">false</span>) <span class="hljs-keyword">return</span> result; } } <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.parent) { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.parent.trigger(name, target, extraArg); } <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>; },</pre></div></div> </li> <li id="section-8"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-8">&#182;</a> </div> <p>Reset UI</p> </div> <div class="content"><div class='highlight'><pre> reset: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{</pre></div></div> </li> <li id="section-9"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-9">&#182;</a> </div> <p>Field case: just emit a reset event for UI</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-string">'ParsleyForm'</span> !== <span class="hljs-keyword">this</span>.__class__) { <span class="hljs-keyword">this</span>._resetUI(); <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>._trigger(<span class="hljs-string">'reset'</span>); }</pre></div></div> </li> <li id="section-10"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-10">&#182;</a> </div> <p>Form case: emit a reset event for each field</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 &lt; <span class="hljs-keyword">this</span>.fields.length; i++) <span class="hljs-keyword">this</span>.fields[i].reset(); <span class="hljs-keyword">this</span>._trigger(<span class="hljs-string">'reset'</span>); },</pre></div></div> </li> <li id="section-11"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-11">&#182;</a> </div> <p>Destroy Parsley instance (+ UI)</p> </div> <div class="content"><div class='highlight'><pre> destroy: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{</pre></div></div> </li> <li id="section-12"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-12">&#182;</a> </div> <p>Field case: emit destroy event to clean UI and then destroy stored instance</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">this</span>._destroyUI(); <span class="hljs-keyword">if</span> (<span class="hljs-string">'ParsleyForm'</span> !== <span class="hljs-keyword">this</span>.__class__) { <span class="hljs-keyword">this</span>.$element.removeData(<span class="hljs-string">'Parsley'</span>); <span class="hljs-keyword">this</span>.$element.removeData(<span class="hljs-string">'ParsleyFieldMultiple'</span>); <span class="hljs-keyword">this</span>._trigger(<span class="hljs-string">'destroy'</span>); <span class="hljs-keyword">return</span>; }</pre></div></div> </li> <li id="section-13"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-13">&#182;</a> </div> <p>Form case: destroy all its fields and then destroy stored instance</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 &lt; <span class="hljs-keyword">this</span>.fields.length; i++) <span class="hljs-keyword">this</span>.fields[i].destroy(); <span class="hljs-keyword">this</span>.$element.removeData(<span class="hljs-string">'Parsley'</span>); <span class="hljs-keyword">this</span>._trigger(<span class="hljs-string">'destroy'</span>); }, <span class="hljs-attr">asyncIsValid</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">group, force</span>) </span>{ ParsleyUtils.warnOnce(<span class="hljs-string">"asyncIsValid is deprecated; please use whenValid instead"</span>); <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.whenValid({group, force}); }, <span class="hljs-attr">_findRelated</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-keyword">this</span>.options.multiple ? <span class="hljs-keyword">this</span>.parent.$element.find(<span class="hljs-string">`[<span class="hljs-subst">${<span class="hljs-keyword">this</span>.options.namespace}</span>multiple="<span class="hljs-subst">${<span class="hljs-keyword">this</span>.options.multiple}</span>"]`</span>) : <span class="hljs-keyword">this</span>.$element; } }; <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> ParsleyAbstract;</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>