parsleyjs

<!DOCTYPE html> <html> <head> <title>remote.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>remote.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> Parsley <span class="hljs-keyword">from</span> <span class="hljs-string">'./main'</span>; $.extend(<span class="hljs-literal">true</span>, Parsley, { <span class="hljs-attr">asyncValidators</span>: { <span class="hljs-string">'default'</span>: { <span class="hljs-attr">fn</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">xhr</span>) </span>{</pre></div></div> </li> <li id="section-2"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-2">¶</a> </div> <p>By default, only status 2xx are deemed successful. Note: we use status instead of state() because responses with status 200 but invalid messages (e.g. an empty body for content type set to JSON) will result in state() === ‘rejected’.</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> xhr.status >= <span class="hljs-number">200</span> && xhr.status < <span class="hljs-number">300</span>; }, <span class="hljs-attr">url</span>: <span class="hljs-literal">false</span> }, <span class="hljs-attr">reverse</span>: { <span class="hljs-attr">fn</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">xhr</span>) </span>{</pre></div></div> </li> <li id="section-3"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-3">¶</a> </div> <p>If reverse option is set, a failing ajax request is considered successful</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> xhr.status < <span class="hljs-number">200</span> || xhr.status >= <span class="hljs-number">300</span>; }, <span class="hljs-attr">url</span>: <span class="hljs-literal">false</span> } }, <span class="hljs-attr">addAsyncValidator</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">name, fn, url, options</span>) </span>{ Parsley.asyncValidators[name] = { <span class="hljs-attr">fn</span>: fn, <span class="hljs-attr">url</span>: url || <span class="hljs-literal">false</span>, <span class="hljs-attr">options</span>: options || {} }; <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>; } }); Parsley.addValidator(<span class="hljs-string">'remote'</span>, { <span class="hljs-attr">requirementType</span>: { <span class="hljs-string">''</span>: <span class="hljs-string">'string'</span>, <span class="hljs-string">'validator'</span>: <span class="hljs-string">'string'</span>, <span class="hljs-string">'reverse'</span>: <span class="hljs-string">'boolean'</span>, <span class="hljs-string">'options'</span>: <span class="hljs-string">'object'</span> }, <span class="hljs-attr">validateString</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">value, url, options, instance</span>) </span>{ <span class="hljs-keyword">var</span> data = {}; <span class="hljs-keyword">var</span> ajaxOptions; <span class="hljs-keyword">var</span> csr; <span class="hljs-keyword">var</span> validator = options.validator || (<span class="hljs-literal">true</span> === options.reverse ? <span class="hljs-string">'reverse'</span> : <span class="hljs-string">'default'</span>); <span class="hljs-keyword">if</span> (<span class="hljs-string">'undefined'</span> === <span class="hljs-keyword">typeof</span> Parsley.asyncValidators[validator]) <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">'Calling an undefined async validator: `'</span> + validator + <span class="hljs-string">'`'</span>); url = Parsley.asyncValidators[validator].url || url;</pre></div></div> </li> <li id="section-4"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-4">¶</a> </div> <p>Fill current value</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (url.indexOf(<span class="hljs-string">'{value}'</span>) > <span class="hljs-number">-1</span>) { url = url.replace(<span class="hljs-string">'{value}'</span>, <span class="hljs-built_in">encodeURIComponent</span>(value)); } <span class="hljs-keyword">else</span> { data[instance.$element.attr(<span class="hljs-string">'name'</span>) || instance.$element.attr(<span class="hljs-string">'id'</span>)] = value; }</pre></div></div> </li> <li id="section-5"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-5">¶</a> </div> <p>Merge options passed in from the function with the ones in the attribute</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> remoteOptions = $.extend(<span class="hljs-literal">true</span>, options.options || {} , Parsley.asyncValidators[validator].options);</pre></div></div> </li> <li id="section-6"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-6">¶</a> </div> <p>All <code>$.ajax(options)</code> could be overridden or extended directly from DOM in <code>data-parsley-remote-options</code></p> </div> <div class="content"><div class='highlight'><pre> ajaxOptions = $.extend(<span class="hljs-literal">true</span>, {}, { <span class="hljs-attr">url</span>: url, <span class="hljs-attr">data</span>: data, <span class="hljs-attr">type</span>: <span class="hljs-string">'GET'</span> }, remoteOptions);</pre></div></div> </li> <li id="section-7"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-7">¶</a> </div> <p>Generate store key based on ajax options</p> </div> <div class="content"><div class='highlight'><pre> instance.trigger(<span class="hljs-string">'field:ajaxoptions'</span>, instance, ajaxOptions); csr = $.param(ajaxOptions);</pre></div></div> </li> <li id="section-8"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-8">¶</a> </div> <p>Initialise querry cache</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> Parsley._remoteCache) Parsley._remoteCache = {};</pre></div></div> </li> <li id="section-9"> <div class="annotation"> <div class="pilwrap "> <a class="pilcrow" href="#section-9">¶</a> </div> <p>Try to retrieve stored xhr</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> xhr = Parsley._remoteCache[csr] = Parsley._remoteCache[csr] || $.ajax(ajaxOptions); <span class="hljs-keyword">var</span> handleXhr = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">var</span> result = Parsley.asyncValidators[validator].fn.call(instance, xhr, url, options); <span class="hljs-keyword">if</span> (!result) <span class="hljs-comment">// Map falsy results to rejected promise</span> result = $.Deferred().reject(); <span class="hljs-keyword">return</span> $.when(result); }; <span class="hljs-keyword">return</span> xhr.then(handleXhr, handleXhr); }, <span class="hljs-attr">priority</span>: <span class="hljs-number">-1</span> }); Parsley.on(<span class="hljs-string">'form:submit'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ Parsley._remoteCache = {}; }); <span class="hljs-built_in">window</span>.ParsleyExtend.addAsyncValidator = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{ ParsleyUtils.warnOnce(<span class="hljs-string">'Accessing the method `addAsyncValidator` through an instance is deprecated. Simply call `Parsley.addAsyncValidator(...)`'</span>); <span class="hljs-keyword">return</span> Parsley.addAsyncValidator(...arguments); };</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>