| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"/> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
| <meta name="Date-Revision-yyyymmdd" content="20140918"/> |
| <meta http-equiv="Content-Language" content="en"/> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| |
| <title>AJAX Client Side Validation</title> |
| |
| <link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,400italic,600italic,700italic" rel="stylesheet" type="text/css"> |
| <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> |
| <link href="/css/main.css" rel="stylesheet"> |
| <link href="/css/custom.css" rel="stylesheet"> |
| <link href="/css/syntax.css" rel="stylesheet"> |
| |
| <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> |
| <script type="text/javascript" src="/bootstrap/js/bootstrap.js"></script> |
| <script type="text/javascript" src="/js/community.js"></script> |
| |
| <!-- Matomo --> |
| <script> |
| var _paq = window._paq = window._paq || []; |
| /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ |
| /* We explicitly disable cookie tracking to avoid privacy issues */ |
| _paq.push(['disableCookies']); |
| _paq.push(['trackPageView']); |
| _paq.push(['enableLinkTracking']); |
| (function() { |
| var u="//analytics.apache.org/"; |
| _paq.push(['setTrackerUrl', u+'matomo.php']); |
| _paq.push(['setSiteId', '41']); |
| var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; |
| g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); |
| })(); |
| </script> |
| <!-- End Matomo Code --> |
| </head> |
| <body> |
| |
| <a href="https://github.com/apache/struts" class="github-ribbon"> |
| <img decoding="async" loading="lazy" style="position: absolute; right: 0; border: 0;" width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_red_aa0000.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"> |
| </a> |
| |
| <header> |
| <nav> |
| <div role="navigation" class="navbar navbar-default navbar-fixed-top"> |
| <div class="container"> |
| <div class="navbar-header"> |
| <button type="button" data-toggle="collapse" data-target="#struts-menu" class="navbar-toggle"> |
| Menu |
| <span class="sr-only">Toggle navigation</span> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| </button> |
| <a href="/index.html" class="navbar-brand logo"><img src="/img/struts-logo.svg"></a> |
| </div> |
| <div id="struts-menu" class="navbar-collapse collapse"> |
| <ul class="nav navbar-nav"> |
| <li class="dropdown"> |
| <a data-toggle="dropdown" href="#" class="dropdown-toggle"> |
| Home<b class="caret"></b> |
| </a> |
| <ul class="dropdown-menu"> |
| <li><a href="/index.html">Welcome</a></li> |
| <li><a href="/download.cgi">Download</a></li> |
| <li><a href="/releases.html">Releases</a></li> |
| <li><a href="/announce-2024.html">Announcements</a></li> |
| <li><a href="http://www.apache.org/licenses/">License</a></li> |
| <li><a href="https://www.apache.org/foundation/thanks.html">Thanks!</a></li> |
| <li><a href="https://www.apache.org/foundation/sponsorship.html">Sponsorship</a></li> |
| <li><a href="https://privacy.apache.org/policies/privacy-policy-public.html">Privacy Policy</a></li> |
| </ul> |
| </li> |
| <li class="dropdown"> |
| <a data-toggle="dropdown" href="#" class="dropdown-toggle"> |
| Support<b class="caret"></b> |
| </a> |
| <ul class="dropdown-menu"> |
| <li><a href="/mail.html">User Mailing List</a></li> |
| <li><a href="https://issues.apache.org/jira/browse/WW">Issue Tracker</a></li> |
| <li><a href="/security.html">Reporting Security Issues</a></li> |
| <li><a href="/commercial-support.html">Commercial Support</a></li> |
| <li class="divider"></li> |
| <li><a href="https://cwiki.apache.org/confluence/display/WW/Migration+Guide">Version Notes</a></li> |
| <li><a href="https://cwiki.apache.org/confluence/display/WW/Security+Bulletins">Security Bulletins</a></li> |
| <li class="divider"></li> |
| <li><a href="/maven/project-info.html">Maven Project Info</a></li> |
| <li><a href="/maven/struts2-core/dependencies.html">Struts Core Dependencies</a></li> |
| <li><a href="/maven/struts2-plugins/modules.html">Plugin Dependencies</a></li> |
| </ul> |
| </li> |
| <li class="dropdown"> |
| <a data-toggle="dropdown" href="#" class="dropdown-toggle"> |
| Documentation<b class="caret"></b> |
| </a> |
| <ul class="dropdown-menu"> |
| <li><a href="/birdseye.html">Birds Eye</a></li> |
| <li><a href="/primer.html">Key Technologies</a></li> |
| <li><a href="/kickstart.html">Kickstart FAQ</a></li> |
| <li><a href="https://cwiki.apache.org/confluence/display/WW/Home">Wiki</a></li> |
| <li class="divider"></li> |
| <li><a href="/getting-started/">Getting Started</a></li> |
| <li><a href="/security/">Security Guide</a></li> |
| <li><a href="/core-developers/">Core Developers Guide</a></li> |
| <li><a href="/tag-developers/">Tag Developers Guide</a></li> |
| <li><a href="/maven-archetypes/">Maven Archetypes</a></li> |
| <li><a href="/plugins/">Plugins</a></li> |
| <li><a href="/maven/struts2-core/apidocs/index.html">Struts Core API</a></li> |
| <li><a href="/tag-developers/tag-reference.html">Tag reference</a></li> |
| <li><a href="https://cwiki.apache.org/confluence/display/WW/FAQs">FAQs</a></li> |
| <li><a href="http://cwiki.apache.org/S2PLUGINS/home.html">Plugin registry</a></li> |
| </ul> |
| </li> |
| <li class="dropdown"> |
| <a data-toggle="dropdown" href="#" class="dropdown-toggle"> |
| Contributing<b class="caret"></b> |
| </a> |
| <ul class="dropdown-menu"> |
| <li><a href="/youatstruts.html">You at Struts</a></li> |
| <li><a href="/helping.html">How to Help FAQ</a></li> |
| <li><a href="/dev-mail.html">Development Lists</a></li> |
| <li class="divider"></li> |
| <li><a href="/submitting-patches.html">Submitting patches</a></li> |
| <li><a href="/builds.html">Source Code and Builds</a></li> |
| <li><a href="/coding-standards.html">Coding standards</a></li> |
| <li><a href="/contributors/">Contributors Guide</a></li> |
| <li class="divider"></li> |
| <li><a href="/release-guidelines.html">Release Guidelines</a></li> |
| <li><a href="/bylaws.html">PMC Charter</a></li> |
| <li><a href="/volunteers.html">Volunteers</a></li> |
| <li><a href="https://gitbox.apache.org/repos/asf?p=struts.git">Source Repository</a></li> |
| <li><a href="/updating-website.html">Updating the website</a></li> |
| </ul> |
| </li> |
| <li class="apache"><a href="http://www.apache.org/"><img src="/img/apache.png"></a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </nav> |
| </header> |
| |
| |
| <article class="container"> |
| <section class="col-md-12"> |
| <a class="edit-on-gh" href="https://github.com/apache/struts-site/edit/master/source/core-developers/ajax-client-side-validation.md" title="Edit this page on GitHub">Edit on GitHub</a> |
| |
| <a href="client-side-validation" title="back to Client Side Validation"><< back to Client Side Validation</a> |
| |
| <h1 class="no_toc" id="ajax-client-side-validation">AJAX Client Side Validation</h1> |
| |
| <ul id="markdown-toc"> |
| <li><a href="#description" id="markdown-toc-description">Description</a></li> |
| <li><a href="#ajax-validation" id="markdown-toc-ajax-validation">AJAX Validation</a></li> |
| <li><a href="#example" id="markdown-toc-example">Example</a> <ul> |
| <li><a href="#create-the-action-class" id="markdown-toc-create-the-action-class">Create the action class</a></li> |
| <li><a href="#map-the-action" id="markdown-toc-map-the-action">Map the Action</a></li> |
| <li><a href="#create-the-jsp" id="markdown-toc-create-the-jsp">Create the JSP</a></li> |
| <li><a href="#custom-theme" id="markdown-toc-custom-theme">Custom Theme</a></li> |
| <li><a href="#css" id="markdown-toc-css">CSS</a></li> |
| <li><a href="#javascript" id="markdown-toc-javascript">JavaScript</a></li> |
| <li><a href="#how-it-works" id="markdown-toc-how-it-works">How it works</a></li> |
| <li><a href="#jsonvalidationinterceptor-parameters" id="markdown-toc-jsonvalidationinterceptor-parameters">JSONValidationInterceptor parameters</a></li> |
| <li><a href="#flow-chart-of-ajax-validation" id="markdown-toc-flow-chart-of-ajax-validation">Flow chart of AJAX validation</a></li> |
| </ul> |
| </li> |
| </ul> |
| |
| <h2 id="description">Description</h2> |
| |
| <p>AJAX-based client side validation improves upon <a href="pure-java-script-client-side-validation">Pure JavaScript Client Side Validation</a> |
| by using a combination of JavaScript, DOM manipulation, and remote server communication. Unlike the pure client side |
| implementation, AJAX-based validation communicates with the server. This means all your validation rules that worked |
| when submitting a form will still work within the browser.</p> |
| |
| <p>The validation occurs on each <strong>onblur</strong> event for each form element. As each user types in some values and moves to |
| the next form element, the value (and all other values previously entered) will be sent to the server for validation. |
| The entire validation stack is run, including visitor validators and your action’s <code class="language-plaintext highlighter-rouge">validate()</code> method.</p> |
| |
| <p>If there is an error, like the pure implementation, the HTML and DOM will be updated immediately.</p> |
| |
| <h2 id="ajax-validation">AJAX Validation</h2> |
| |
| <p>Struts provides <a href="client-side-validation">client side validation</a>(using JavaScript) for a few validators. Using AJAX |
| validation, all <a href="validation#bundled-validators">validators</a> available to the application on the server side can be used |
| without forcing the page to reload, just to show validation errors. AJAX validation has a server side, which is in included |
| in <a href="../plugins/json/">JSON Plugin</a> (an interceptor and a result). Client side must be handled by applications themself. |
| One reason for that is there are too many JavaScript frameworks and libraries. Struts has no preference which of them |
| you use. Previous versions of Struts included a client side which was relying on the Dojo JS framework and was located |
| in Struts Dojo plugin. That has been deprecated for a long time and was eventually removed.</p> |
| |
| <h2 id="example">Example</h2> |
| |
| <p>This example is taken from the Struts Showcase Application.</p> |
| |
| <h3 id="create-the-action-class">Create the action class</h3> |
| |
| <div class="language-java highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">public</span> <span class="kd">class</span> <span class="nc">AjaxFormSubmitAction</span> <span class="kd">extends</span> <span class="nc">ActionSupport</span> <span class="o">{</span> |
| <span class="kd">private</span> <span class="nc">String</span> <span class="n">requiredValidatorField</span> <span class="o">=</span> <span class="kc">null</span><span class="o">;</span> |
| <span class="kd">private</span> <span class="nc">String</span> <span class="n">requiredStringValidatorField</span> <span class="o">=</span> <span class="kc">null</span><span class="o">;</span> |
| <span class="kd">private</span> <span class="nc">Integer</span> <span class="n">integerValidatorField</span> <span class="o">=</span> <span class="kc">null</span><span class="o">;</span> |
| <span class="kd">private</span> <span class="nc">Date</span> <span class="n">dateValidatorField</span> <span class="o">=</span> <span class="kc">null</span><span class="o">;</span> |
| <span class="kd">private</span> <span class="nc">String</span> <span class="n">emailValidatorField</span> <span class="o">=</span> <span class="kc">null</span><span class="o">;</span> |
| <span class="kd">private</span> <span class="nc">String</span> <span class="n">urlValidatorField</span> <span class="o">=</span> <span class="kc">null</span><span class="o">;</span> |
| <span class="kd">private</span> <span class="nc">String</span> <span class="n">stringLengthValidatorField</span> <span class="o">=</span> <span class="kc">null</span><span class="o">;</span> |
| <span class="kd">private</span> <span class="nc">String</span> <span class="n">regexValidatorField</span> <span class="o">=</span> <span class="kc">null</span><span class="o">;</span> |
| <span class="kd">private</span> <span class="nc">String</span> <span class="n">fieldExpressionValidatorField</span> <span class="o">=</span> <span class="kc">null</span><span class="o">;</span> |
| <span class="nd">@Override</span> |
| <span class="kd">public</span> <span class="kt">void</span> <span class="nf">validate</span><span class="o">()</span> <span class="o">{</span> |
| <span class="k">if</span> <span class="o">(</span><span class="n">hasFieldErrors</span><span class="o">())</span> <span class="o">{</span> |
| <span class="n">addActionError</span><span class="o">(</span><span class="s">"Errors present!"</span><span class="o">);</span> |
| <span class="o">}</span> |
| <span class="o">}</span> |
| <span class="kd">public</span> <span class="nc">Date</span> <span class="nf">getDateValidatorField</span><span class="o">()</span> <span class="o">{</span> |
| <span class="k">return</span> <span class="n">dateValidatorField</span><span class="o">;</span> |
| <span class="o">}</span> |
| <span class="nd">@DateRangeFieldValidator</span><span class="o">(</span> |
| <span class="n">min</span><span class="o">=</span><span class="s">"01/01/1990"</span><span class="o">,</span> |
| <span class="n">max</span><span class="o">=</span><span class="s">"01/01/2000"</span><span class="o">,</span> |
| <span class="n">message</span><span class="o">=</span><span class="s">"must be a min 01-01-1990 max 01-01-2000 if supplied"</span><span class="o">)</span> |
| <span class="kd">public</span> <span class="kt">void</span> <span class="nf">setDateValidatorField</span><span class="o">(</span><span class="nc">Date</span> <span class="n">dateValidatorField</span><span class="o">)</span> <span class="o">{</span> |
| <span class="k">this</span><span class="o">.</span><span class="na">dateValidatorField</span> <span class="o">=</span> <span class="n">dateValidatorField</span><span class="o">;</span> |
| <span class="o">}</span> |
| <span class="kd">public</span> <span class="nc">String</span> <span class="nf">getEmailValidatorField</span><span class="o">()</span> <span class="o">{</span> |
| <span class="k">return</span> <span class="n">emailValidatorField</span><span class="o">;</span> |
| <span class="o">}</span> |
| <span class="nd">@EmailValidator</span><span class="o">(</span><span class="n">message</span><span class="o">=</span><span class="s">"must be a valid email if supplied"</span><span class="o">)</span> |
| <span class="kd">public</span> <span class="kt">void</span> <span class="nf">setEmailValidatorField</span><span class="o">(</span><span class="nc">String</span> <span class="n">emailValidatorField</span><span class="o">)</span> <span class="o">{</span> |
| <span class="k">this</span><span class="o">.</span><span class="na">emailValidatorField</span> <span class="o">=</span> <span class="n">emailValidatorField</span><span class="o">;</span> |
| <span class="o">}</span> |
| <span class="kd">public</span> <span class="nc">Integer</span> <span class="nf">getIntegerValidatorField</span><span class="o">()</span> <span class="o">{</span> |
| <span class="k">return</span> <span class="n">integerValidatorField</span><span class="o">;</span> |
| <span class="o">}</span> |
| <span class="nd">@IntRangeFieldValidator</span><span class="o">(</span><span class="n">min</span><span class="o">=</span><span class="s">"1"</span><span class="o">,</span> <span class="n">max</span><span class="o">=</span><span class="s">"10"</span><span class="o">,</span> <span class="n">message</span><span class="o">=</span><span class="s">"must be integer min 1 max 10 if supplied"</span><span class="o">)</span> |
| <span class="kd">public</span> <span class="kt">void</span> <span class="nf">setIntegerValidatorField</span><span class="o">(</span><span class="nc">Integer</span> <span class="n">integerValidatorField</span><span class="o">)</span> <span class="o">{</span> |
| <span class="k">this</span><span class="o">.</span><span class="na">integerValidatorField</span> <span class="o">=</span> <span class="n">integerValidatorField</span><span class="o">;</span> |
| <span class="o">}</span> |
| <span class="kd">public</span> <span class="nc">String</span> <span class="nf">getRegexValidatorField</span><span class="o">()</span> <span class="o">{</span> |
| <span class="k">return</span> <span class="n">regexValidatorField</span><span class="o">;</span> |
| <span class="o">}</span> |
| <span class="nd">@RegexFieldValidator</span><span class="o">(</span> |
| <span class="n">regex</span><span class="o">=</span><span class="s">"[^<>]+"</span><span class="o">,</span> |
| <span class="n">message</span><span class="o">=</span><span class="s">"regexValidatorField must match a regexp (.*\\.txt) if specified"</span><span class="o">)</span> |
| <span class="kd">public</span> <span class="kt">void</span> <span class="nf">setRegexValidatorField</span><span class="o">(</span><span class="nc">String</span> <span class="n">regexValidatorField</span><span class="o">)</span> <span class="o">{</span> |
| <span class="k">this</span><span class="o">.</span><span class="na">regexValidatorField</span> <span class="o">=</span> <span class="n">regexValidatorField</span><span class="o">;</span> |
| <span class="o">}</span> |
| <span class="kd">public</span> <span class="nc">String</span> <span class="nf">getRequiredStringValidatorField</span><span class="o">()</span> <span class="o">{</span> |
| <span class="k">return</span> <span class="n">requiredStringValidatorField</span><span class="o">;</span> |
| <span class="o">}</span> |
| <span class="nd">@RequiredStringValidator</span><span class="o">(</span><span class="n">trim</span><span class="o">=</span><span class="kc">true</span><span class="o">,</span> <span class="n">message</span><span class="o">=</span><span class="s">"required and must be string"</span><span class="o">)</span> |
| <span class="kd">public</span> <span class="kt">void</span> <span class="nf">setRequiredStringValidatorField</span><span class="o">(</span><span class="nc">String</span> <span class="n">requiredStringValidatorField</span><span class="o">)</span> <span class="o">{</span> |
| <span class="k">this</span><span class="o">.</span><span class="na">requiredStringValidatorField</span> <span class="o">=</span> <span class="n">requiredStringValidatorField</span><span class="o">;</span> |
| <span class="o">}</span> |
| <span class="kd">public</span> <span class="nc">String</span> <span class="nf">getRequiredValidatorField</span><span class="o">()</span> <span class="o">{</span> |
| <span class="k">return</span> <span class="n">requiredValidatorField</span><span class="o">;</span> |
| <span class="o">}</span> |
| <span class="nd">@RequiredFieldValidator</span><span class="o">(</span><span class="n">message</span><span class="o">=</span><span class="s">"required"</span><span class="o">)</span> |
| <span class="kd">public</span> <span class="kt">void</span> <span class="nf">setRequiredValidatorField</span><span class="o">(</span><span class="nc">String</span> <span class="n">requiredValidatorField</span><span class="o">)</span> <span class="o">{</span> |
| <span class="k">this</span><span class="o">.</span><span class="na">requiredValidatorField</span> <span class="o">=</span> <span class="n">requiredValidatorField</span><span class="o">;</span> |
| <span class="o">}</span> |
| <span class="kd">public</span> <span class="nc">String</span> <span class="nf">getStringLengthValidatorField</span><span class="o">()</span> <span class="o">{</span> |
| <span class="k">return</span> <span class="n">stringLengthValidatorField</span><span class="o">;</span> |
| <span class="o">}</span> |
| <span class="nd">@StringLengthFieldValidator</span><span class="o">(</span> |
| <span class="n">minLength</span><span class="o">=</span><span class="s">"2"</span><span class="o">,</span> |
| <span class="n">maxLength</span><span class="o">=</span><span class="s">"4"</span><span class="o">,</span> |
| <span class="n">trim</span><span class="o">=</span><span class="kc">true</span><span class="o">,</span> |
| <span class="n">message</span><span class="o">=</span><span class="s">"must be a String of a specific greater than 1 less than 5 if specified"</span><span class="o">)</span> |
| <span class="kd">public</span> <span class="kt">void</span> <span class="nf">setStringLengthValidatorField</span><span class="o">(</span><span class="nc">String</span> <span class="n">stringLengthValidatorField</span><span class="o">)</span> <span class="o">{</span> |
| <span class="k">this</span><span class="o">.</span><span class="na">stringLengthValidatorField</span> <span class="o">=</span> <span class="n">stringLengthValidatorField</span><span class="o">;</span> |
| <span class="o">}</span> |
| <span class="kd">public</span> <span class="nc">String</span> <span class="nf">getFieldExpressionValidatorField</span><span class="o">()</span> <span class="o">{</span> |
| <span class="k">return</span> <span class="n">fieldExpressionValidatorField</span><span class="o">;</span> |
| <span class="o">}</span> |
| <span class="nd">@FieldExpressionValidator</span><span class="o">(</span> |
| <span class="n">expression</span> <span class="o">=</span> <span class="s">"(fieldExpressionValidatorField == requiredValidatorField)"</span><span class="o">,</span> |
| <span class="n">message</span> <span class="o">=</span> <span class="s">"must be the same as the Required Validator Field if specified"</span><span class="o">)</span> |
| <span class="kd">public</span> <span class="kt">void</span> <span class="nf">setFieldExpressionValidatorField</span><span class="o">(</span> |
| <span class="nc">String</span> <span class="n">fieldExpressionValidatorField</span><span class="o">)</span> <span class="o">{</span> |
| <span class="k">this</span><span class="o">.</span><span class="na">fieldExpressionValidatorField</span> <span class="o">=</span> <span class="n">fieldExpressionValidatorField</span><span class="o">;</span> |
| <span class="o">}</span> |
| <span class="kd">public</span> <span class="nc">String</span> <span class="nf">getUrlValidatorField</span><span class="o">()</span> <span class="o">{</span> |
| <span class="k">return</span> <span class="n">urlValidatorField</span><span class="o">;</span> |
| <span class="o">}</span> |
| <span class="nd">@UrlValidator</span><span class="o">(</span><span class="n">message</span><span class="o">=</span><span class="s">"must be a valid url if supplied"</span><span class="o">)</span> |
| <span class="kd">public</span> <span class="kt">void</span> <span class="nf">setUrlValidatorField</span><span class="o">(</span><span class="nc">String</span> <span class="n">urlValidatorField</span><span class="o">)</span> <span class="o">{</span> |
| <span class="k">this</span><span class="o">.</span><span class="na">urlValidatorField</span> <span class="o">=</span> <span class="n">urlValidatorField</span><span class="o">;</span> |
| <span class="o">}</span> |
| <span class="o">}</span> |
| </code></pre></div></div> |
| |
| <h3 id="map-the-action">Map the Action</h3> |
| |
| <p>Note that is is not necessary when using <a href="../plugins/convention/">Convention Plugin</a>.</p> |
| |
| <div class="language-xml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.5//EN" "http://struts.apache.org/dtds/struts-2.5.dtd"></span> |
| |
| <span class="nt"><struts></span> |
| <span class="nt"><package></span> |
| <span class="nt"><action</span> <span class="na">name=</span><span class="s">"ajaxFormSubmit"</span> <span class="na">class=</span><span class="s">"org.apache.struts2.showcase.validation.AjaxFormSubmitAction"</span><span class="nt">></span> |
| <span class="nt"><interceptor-ref</span> <span class="na">name=</span><span class="s">"jsonValidationWorkflowStack"</span><span class="nt">/></span> |
| <span class="nt"><result</span> <span class="na">name=</span><span class="s">"input"</span><span class="nt">></span>/WEB-INF/validation/ajaxFormSubmit.jsp<span class="nt"></result></span> |
| <span class="nt"><result</span> <span class="na">type=</span><span class="s">"jsonActionRedirect"</span><span class="nt">></span>ajaxFormSubmitSuccess<span class="nt"></result></span> |
| <span class="nt"></action></span> |
| <span class="nt"></package></span> |
| </code></pre></div></div> |
| |
| <p>AJAX validation is performed by the <a href="../plugins/json/">jsonValidation</a> interceptor. This interceptor is included in |
| the <em>jsonValidationWorkflowStack</em>, and is required in order to perform AJAX validation. Normal results (input, success, etc) |
| should be provided for the action in the case that someone tries to access the action directly, in which case normal v |
| alidation will be triggered. So, how does the <em>jsonValidation</em> know that it must perform AJAX validation vs regular validation? |
| We will see that in a minute, but you don’t need to know that in order to use AJAX validation. Same applies for specialized |
| Redirect Result Type <em>jsonActionRedirect</em>.</p> |
| |
| <h3 id="create-the-jsp">Create the JSP</h3> |
| |
| <div class="language-jsp highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><%@taglib </span><span class="na">prefix=</span><span class="s">"s"</span><span class="na"> uri=</span><span class="s">"/struts-tags"</span> <span class="nt">%></span> |
| <span class="nt"><html></span> |
| <span class="nt"><head></span> |
| <span class="nt"><title></span>Struts2 Showcase - Validation - AJAX Form Submit<span class="nt"></title></span> |
| <span class="nt"><s:head </span><span class="na">theme=</span><span class="s">"xhtml"</span><span class="nt">/></span> |
| <span class="nt"></head></span> |
| <span class="nt"><body></span> |
| <span class="nt"><div</span> <span class="na">class=</span><span class="s">"page-header"</span><span class="nt">></span> |
| <span class="nt"><h1></span>AJAX Form Submit<span class="nt"></h1></span> |
| <span class="nt"></div></span> |
| <span class="nt"><h3></span>Action Errors Will Appear Here<span class="nt"></h3></span> |
| <span class="nt"><s:actionerror </span><span class="na">theme=</span><span class="s">"ajaxErrorContainers"</span><span class="nt">/></span> |
| <span class="nt"><hr/></span> |
| <span class="nt"><s:form </span><span class="na">method=</span><span class="s">"POST"</span><span class="na"> theme=</span><span class="s">"xhtml"</span><span class="nt">></span> |
| <span class="nt"><s:textfield </span><span class="na">label=</span><span class="s">"Required Validator Field"</span><span class="na"> name=</span><span class="s">"requiredValidatorField"</span><span class="na"> theme=</span><span class="s">"ajaxErrorContainers"</span><span class="nt">/></span> |
| <span class="nt"><s:textfield </span><span class="na">label=</span><span class="s">"Required String Validator Field"</span><span class="na"> name=</span><span class="s">"requiredStringValidatorField"</span><span class="na"> theme=</span><span class="s">"ajaxErrorContainers"</span><span class="nt">/></span> |
| <span class="nt"><s:textfield </span><span class="na">label=</span><span class="s">"Integer Validator Field"</span><span class="na"> name=</span><span class="s">"integerValidatorField"</span><span class="na"> theme=</span><span class="s">"ajaxErrorContainers"</span><span class="nt">/></span> |
| <span class="nt"><s:textfield </span><span class="na">label=</span><span class="s">"Date Validator Field"</span><span class="na"> name=</span><span class="s">"dateValidatorField"</span><span class="na"> theme=</span><span class="s">"ajaxErrorContainers"</span><span class="nt">/></span> |
| <span class="nt"><s:textfield </span><span class="na">label=</span><span class="s">"Email Validator Field"</span><span class="na"> name=</span><span class="s">"emailValidatorField"</span><span class="na"> theme=</span><span class="s">"ajaxErrorContainers"</span><span class="nt">/></span> |
| <span class="nt"><s:textfield </span><span class="na">label=</span><span class="s">"URL Validator Field"</span><span class="na"> name=</span><span class="s">"urlValidatorField"</span><span class="na"> theme=</span><span class="s">"ajaxErrorContainers"</span><span class="nt">/></span> |
| <span class="nt"><s:textfield </span><span class="na">label=</span><span class="s">"String Length Validator Field"</span><span class="na"> name=</span><span class="s">"stringLengthValidatorField"</span><span class="na"> theme=</span><span class="s">"ajaxErrorContainers"</span><span class="nt">/></span> |
| <span class="nt"><s:textfield </span><span class="na">label=</span><span class="s">"Regex Validator Field"</span><span class="na"> name=</span><span class="s">"regexValidatorField"</span><span class="na"> theme=</span><span class="s">"ajaxErrorContainers"</span><span class="nt">/></span> |
| <span class="nt"><s:textfield </span><span class="na">label=</span><span class="s">"Field Expression Validator Field"</span><span class="na"> name=</span><span class="s">"fieldExpressionValidatorField"</span><span class="na"> theme=</span><span class="s">"ajaxErrorContainers"</span><span class="nt">/></span> |
| <span class="nt"><s:submit </span><span class="na">label=</span><span class="s">"Submit"</span><span class="na"> cssClass=</span><span class="s">"btn btn-primary"</span><span class="nt">/></span> |
| <span class="nt"></s:form></span> |
| <span class="nt"></body></span> |
| <span class="nt"></html></span> |
| </code></pre></div></div> |
| |
| <p>Things to note on this JSP:</p> |
| |
| <ul> |
| <li>The <em>form</em> tag <strong>does not</strong> have <em>validate</em> set to <em>true</em>, which would perform client validation before the AJAX validation.</li> |
| <li>It uses a customized theme <em>ajaxErrorContainers</em>. The default Struts themes generate HTML-Elements to show validation |
| errors only if errors are present when page is created on server side. But in order to show validation errors that |
| arrive later via AJAX it is necessary to have error-container elements in DOM always.</li> |
| </ul> |
| |
| <p>What happens if validation succeeds? That depends on your request parameters and action configuration. If you are using |
| <em>jsonActionRedirect</em> result mentioned above the action will be executed while AJAX request is active and respond with |
| JSON providing a new URL to load. Otherwise the AJAX response will be empty and the form must be submitted a 2nd time |
| but as usual request, not AJAX.</p> |
| |
| <blockquote> |
| <p>Setting <em>validate</em> to <em>true</em> in the <em>form</em> tag will enable client side, JavaScript validation, which can be used along |
| with AJAX validation (runs before the AJAX validation).</p> |
| </blockquote> |
| |
| <h3 id="custom-theme">Custom Theme</h3> |
| |
| <p>In this sample the <em>custom theme</em> is based on <em>xhtml</em> theme. It is required to override 3 FTL files.</p> |
| |
| <p><strong>theme.properties</strong></p> |
| |
| <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>parent = xhtml |
| </code></pre></div></div> |
| |
| <p><strong>actionerror.ftl</strong></p> |
| |
| <div class="language-ftl highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="err"><#--</span><span class="w"> |
| </span>Make sure element is always present. To be filled later via JS.<span class="w"> |
| </span><span class="err">--></span><span class="w"> |
| </span><span class="err"><</span><span class="no">ul</span><span class="err"><#</span><span class="no">rt</span><span class="err">/></span><span class="w"> |
| </span><span class="err"><#</span><span class="no">if</span><span class="w"> </span>parameters.id??><span class="w"> |
| </span>id="$<span class="p">{</span><span class="no">parameters</span><span class="na">.id</span><span class="err">?</span><span class="no">html</span><span class="p">}</span>"<#rt/><span class="w"> |
| </span><span class="err"></#</span><span class="no">if</span><span class="err">></span><span class="w"> |
| </span><span class="err"><#</span><span class="no">if</span><span class="w"> </span>parameters.cssClass??><span class="w"> |
| </span>class="$<span class="p">{</span><span class="no">parameters</span><span class="na">.cssClass</span><span class="err">?</span><span class="no">html</span><span class="p">}</span>"<#rt/><span class="w"> |
| </span><span class="err"><#</span><span class="no">else</span><span class="err">></span><span class="w"> |
| </span>class="errorMessage"<#rt/><span class="w"> |
| </span><span class="err"></#</span><span class="no">if</span><span class="err">></span><span class="w"> |
| </span><span class="err"><#</span><span class="no">if</span><span class="w"> </span>parameters.cssStyle??><span class="w"> |
| </span>style="$<span class="p">{</span><span class="no">parameters</span><span class="na">.cssStyle</span><span class="err">?</span><span class="no">html</span><span class="p">}</span>"<#rt/><span class="w"> |
| </span><span class="err"></#</span><span class="no">if</span><span class="err">></span><span class="w"> |
| </span><span class="err">></span><span class="w"> |
| </span><span class="err"><#</span><span class="no">if</span><span class="w"> </span>(actionErrors?? && actionErrors?size > 0)><span class="w"> |
| </span><#list actionErrors as error><span class="w"> |
| </span><#if error??><span class="w"> |
| </span><li><span><#if parameters.escape>$<span class="p">{</span><span class="no">error</span><span class="err">!?</span><span class="no">html</span><span class="p">}</span><#else>$<span class="p">{</span><span class="no">error</span><span class="err">!</span><span class="p">}</span></#if></span><#rt/></li><#rt/><span class="w"> |
| </span></#if><span class="w"> |
| </span></#list><span class="w"> |
| </span><span class="err"></#</span><span class="no">if</span><span class="err">></span><span class="w"> |
| </span><span class="err"></</span><span class="no">ul</span><span class="err">></span><span class="w"> |
| </span></code></pre></div></div> |
| |
| <p><strong>controlfooter.ftl</strong></p> |
| |
| <div class="language-ftl highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="err">${</span><span class="no">parameters</span><span class="na">.after</span><span class="err">!}<#</span><span class="no">t</span><span class="err">/></span><span class="w"> |
| </span></td><#lt/><span class="w"> |
| </span><span class="err"></</span><span class="no">tr</span><span class="err">></span><span class="w"> |
| </span><span class="err"><#</span><span class="no">if</span><span class="w"> </span>(parameters.errorposition!"top") == 'bottom'><span class="w"> |
| </span><span class="err"><#</span><span class="no">assign</span><span class="w"> </span>hasFieldErrors = parameters.name?? && fieldErrors?? && fieldErrors[parameters.name]??/><span class="w"> |
| </span><span class="err"><#</span><span class="no">if</span><span class="w"> </span>hasFieldErrors><span class="w"> |
| </span><span class="err"><</span><span class="no">tr</span><span class="w"> </span>errorFor="$<span class="p">{</span><span class="no">parameters</span><span class="na">.id</span><span class="p">}</span>"><span class="w"> |
| </span><td class="tdErrorMessage" colspan="2"><#rt/><span class="w"> |
| </span><#if hasFieldErrors><span class="w"> |
| </span><#list fieldErrors[parameters.name] as error><span class="w"> |
| </span><div class="errorMessage">$<span class="p">{</span><span class="no">error</span><span class="err">?</span><span class="no">html</span><span class="p">}</span></div><#t/><span class="w"> |
| </span></#list><span class="w"> |
| </span></#if><span class="w"> |
| </span></td><#lt/><span class="w"> |
| </span><span class="err"></</span><span class="no">tr</span><span class="err">></span><span class="w"> |
| </span><span class="err"></#</span><span class="no">if</span><span class="err">></span><span class="w"> |
| </span><span class="err"></#</span><span class="no">if</span><span class="err">></span><span class="w"> |
| </span></code></pre></div></div> |
| |
| <p><strong>controlheader-core.ftl</strong></p> |
| |
| <div class="language-ftl highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="err"><#--</span><span class="w"> |
| </span>Always include elements to show errors. They may be filled later via AJAX.<span class="w"> |
| </span><span class="err">--></span><span class="w"> |
| </span><span class="err"><#</span><span class="no">assign</span><span class="w"> </span>hasFieldErrors = parameters.name?? && fieldErrors?? && fieldErrors[parameters.name]??/><span class="w"> |
| </span><span class="err"><#</span><span class="no">if</span><span class="w"> </span>(parameters.errorposition!"top") == 'top'><span class="w"> |
| </span><span class="err"><</span><span class="no">tr</span><span class="w"> </span>errorFor="$<span class="p">{</span><span class="no">parameters</span><span class="na">.id</span><span class="p">}</span>"><span class="w"> |
| </span><td class="tdErrorMessage" colspan="2" data-error-for-fieldname="$<span class="p">{</span><span class="no">parameters</span><span class="na">.name</span><span class="p">}</span>"><#rt/><span class="w"> |
| </span><#if hasFieldErrors><span class="w"> |
| </span><#list fieldErrors[parameters.name] as error><span class="w"> |
| </span><div class="errorMessage">$<span class="p">{</span><span class="no">error</span><span class="err">?</span><span class="no">html</span><span class="p">}</span></div><#t/><span class="w"> |
| </span></#list><span class="w"> |
| </span></#if><span class="w"> |
| </span></td><#lt/><span class="w"> |
| </span><span class="err"></</span><span class="no">tr</span><span class="err">></span><span class="w"> |
| </span><span class="err"></#</span><span class="no">if</span><span class="err">></span><span class="w"> |
| </span><span class="err"><#</span><span class="no">if</span><span class="w"> </span>!parameters.labelposition?? && (parameters.form.labelposition)??><span class="w"> |
| </span><span class="err"><#</span><span class="no">assign</span><span class="w"> </span>labelpos = parameters.form.labelposition/><span class="w"> |
| </span><span class="err"><#</span><span class="no">elseif</span><span class="w"> </span>parameters.labelposition??><span class="w"> |
| </span><span class="err"><#</span><span class="no">assign</span><span class="w"> </span>labelpos = parameters.labelposition/><span class="w"> |
| </span><span class="err"></#</span><span class="no">if</span><span class="err">></span><span class="w"> |
| </span><span class="err"><#--</span><span class="w"> |
| </span>if the label position is top,<span class="w"> |
| </span>then give the label it's own row in the table<span class="w"> |
| </span><span class="err">--></span><span class="w"> |
| </span><span class="err"><</span><span class="no">tr</span><span class="err">></span><span class="w"> |
| </span><span class="err"><#</span><span class="no">if</span><span class="w"> </span>(labelpos!"") == 'top'><span class="w"> |
| </span><td class="tdLabelTop" colspan="2"><#rt/><span class="w"> |
| </span><span class="err"><#</span><span class="no">else</span><span class="err">></span><span class="w"> |
| </span><td class="tdLabel"><#rt/><span class="w"> |
| </span><span class="err"></#</span><span class="no">if</span><span class="err">></span><span class="w"> |
| </span><span class="err"><#</span><span class="no">if</span><span class="w"> </span>parameters.label??><span class="w"> |
| </span><label <#t/><span class="w"> |
| </span><span class="err"><#</span><span class="no">if</span><span class="w"> </span>parameters.id??><span class="w"> |
| </span>for="$<span class="p">{</span><span class="no">parameters</span><span class="na">.id</span><span class="err">?</span><span class="no">html</span><span class="p">}</span>" <#t/><span class="w"> |
| </span><span class="err"></#</span><span class="no">if</span><span class="err">></span><span class="w"> |
| </span><span class="err"><#</span><span class="no">if</span><span class="w"> </span>hasFieldErrors><span class="w"> |
| </span>class="errorLabel"<#t/><span class="w"> |
| </span><span class="err"><#</span><span class="no">else</span><span class="err">></span><span class="w"> |
| </span>class="label"<#t/><span class="w"> |
| </span><span class="err"></#</span><span class="no">if</span><span class="err">></span><span class="w"> |
| </span>><#t/><span class="w"> |
| </span><span class="err"><#</span><span class="no">if</span><span class="w"> </span>parameters.required!false && parameters.requiredPosition!"right" != 'right'><span class="w"> |
| </span><span class="required"><span class="err">*</span></span><#t/><span class="w"> |
| </span><span class="err"></#</span><span class="no">if</span><span class="err">></span><span class="w"> |
| </span><span class="err">${</span><span class="no">parameters</span><span class="na">.label</span><span class="err">?</span><span class="no">html</span><span class="err">}<#</span><span class="no">t</span><span class="err">/></span><span class="w"> |
| </span><span class="err"><#</span><span class="no">if</span><span class="w"> </span>parameters.required!false && parameters.requiredPosition!"right" == 'right'><span class="w"> |
| </span><span class="required"><span class="err">*</span></span><#t/><span class="w"> |
| </span><span class="err"></#</span><span class="no">if</span><span class="err">></span><span class="w"> |
| </span><span class="err">${</span><span class="no">parameters</span><span class="na">.labelseparator</span><span class="err">!":"?</span><span class="no">html</span><span class="err">}<#</span><span class="no">t</span><span class="err">/></span><span class="w"> |
| </span><span class="err"><#</span><span class="no">include</span><span class="w"> </span>"/$<span class="p">{</span><span class="no">parameters</span><span class="na">.templateDir</span><span class="p">}</span>/$<span class="p">{</span><span class="no">parameters</span><span class="na">.expandTheme</span><span class="p">}</span>/tooltip.ftl" /><span class="w"> |
| </span><span class="err"></</span><span class="no">label</span><span class="err">><#</span><span class="no">t</span><span class="err">/></span><span class="w"> |
| </span><span class="err"></#</span><span class="no">if</span><span class="err">></span><span class="w"> |
| </span></td><#lt/><span class="w"> |
| </span><span class="err"><#--</span><span class="w"> </span>add the extra row --><span class="w"> |
| </span><span class="err"><#</span><span class="no">if</span><span class="w"> </span>(labelpos!"") == 'top'><span class="w"> |
| </span><span class="err"></</span><span class="no">tr</span><span class="err">></span><span class="w"> |
| </span><span class="err"><</span><span class="no">tr</span><span class="err">></span><span class="w"> |
| </span><span class="err"></#</span><span class="no">if</span><span class="err">></span><span class="w"> |
| </span></code></pre></div></div> |
| |
| <h3 id="css">CSS</h3> |
| |
| <p>To show users some nice visual feedback while waiting for AJAX response you can use a little CSS. Remember to include |
| the referenced <em>indicator.gif</em>.</p> |
| |
| <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.ajaxVisualFeedback</span> <span class="p">{</span> |
| <span class="nl">width</span><span class="p">:</span> <span class="m">16px</span><span class="p">;</span> |
| <span class="nl">height</span><span class="p">:</span> <span class="m">16px</span><span class="p">;</span> |
| <span class="nl">background-image</span><span class="p">:</span> <span class="sx">url('../images/indicator.gif')</span><span class="p">;</span> |
| <span class="nl">background-repeat</span><span class="p">:</span> <span class="nb">no-repeat</span><span class="p">;</span> |
| <span class="nl">float</span><span class="p">:</span> <span class="nb">right</span><span class="p">;</span> |
| <span class="p">}</span> |
| </code></pre></div></div> |
| |
| <h3 id="javascript">JavaScript</h3> |
| |
| <p>Now this is where the magic happens. Here <em>jQuery</em> is used to register an eventhandler which intercepts form submits. |
| It takes care of hiding validation errors that might be present, submit the form via AJAX and handle JSON responses.</p> |
| |
| <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="cm">/** |
| * Validates form per AJAX. To be called as onSubmit handler. |
| * |
| * @param event onSubmit event |
| */</span> |
| <span class="kd">function</span> <span class="nx">ajaxFormValidation</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span> |
| <span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span> |
| <span class="nx">_removeValidationErrors</span><span class="p">();</span> |
| <span class="kd">var</span> <span class="nx">_form</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">event</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span> |
| <span class="kd">var</span> <span class="nx">_formData</span> <span class="o">=</span> <span class="nx">_form</span><span class="p">.</span><span class="nx">serialize</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span> |
| <span class="c1">// prepare visual feedback</span> |
| <span class="c1">// you may want to use other elements here</span> |
| <span class="kd">var</span> <span class="nx">originalButton</span> <span class="o">=</span> <span class="nx">_form</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="dl">'</span><span class="s1">.btn-primary</span><span class="dl">'</span><span class="p">);</span> |
| <span class="c1">// note: jQuery returns an array-like object</span> |
| <span class="k">if</span> <span class="p">(</span><span class="nx">originalButton</span> <span class="o">&&</span> <span class="nx">originalButton</span><span class="p">.</span><span class="nx">length</span> <span class="o">&&</span> <span class="nx">originalButton</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span> |
| <span class="nx">originalButton</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span> |
| <span class="kd">var</span> <span class="nx">feedbackElement</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1"><div class="ajaxVisualFeedback"></div></span><span class="dl">'</span><span class="p">).</span><span class="nx">insertAfter</span><span class="p">(</span><span class="nx">originalButton</span><span class="p">);</span> |
| <span class="kd">var</span> <span class="nx">restoreFunction</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> |
| <span class="nx">originalButton</span><span class="p">.</span><span class="nx">show</span><span class="p">();</span> |
| <span class="nx">feedbackElement</span><span class="p">.</span><span class="nx">remove</span><span class="p">();</span> |
| <span class="p">}</span> |
| <span class="p">}</span> |
| <span class="kd">var</span> <span class="nx">options</span> <span class="o">=</span> <span class="p">{</span> |
| <span class="na">data</span><span class="p">:</span> <span class="dl">'</span><span class="s1">struts.enableJSONValidation=true&struts.validateOnly=false&</span><span class="dl">'</span> <span class="o">+</span> <span class="nx">_formData</span><span class="p">,</span> |
| <span class="na">async</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> |
| <span class="na">processData</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> |
| <span class="na">type</span><span class="p">:</span> <span class="dl">'</span><span class="s1">POST</span><span class="dl">'</span><span class="p">,</span> |
| <span class="na">success</span><span class="p">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">response</span><span class="p">,</span> <span class="nx">statusText</span><span class="p">,</span> <span class="nx">xhr</span><span class="p">)</span> <span class="p">{</span> |
| <span class="k">if</span> <span class="p">(</span><span class="nx">response</span><span class="p">.</span><span class="nx">location</span><span class="p">)</span> <span class="p">{</span> |
| <span class="c1">// no validation errors</span> |
| <span class="c1">// action has been executed and sent a redirect URL wrapped as JSON</span> |
| <span class="c1">// cannot use a normal http-redirect (status-code 3xx) as this would be followed by browsers and would not be available here</span> |
| <span class="c1">// follow JSON-redirect</span> |
| <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="nx">response</span><span class="p">.</span><span class="nx">location</span><span class="p">;</span> |
| <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> |
| <span class="k">if</span> <span class="p">(</span><span class="nx">restoreFunction</span><span class="p">)</span> <span class="p">{</span> |
| <span class="nx">restoreFunction</span><span class="p">();</span> |
| <span class="p">}</span> |
| <span class="nx">_handleValidationResult</span><span class="p">(</span><span class="nx">_form</span><span class="p">,</span> <span class="nx">response</span><span class="p">);</span> |
| <span class="p">}</span> |
| <span class="p">},</span> |
| <span class="na">error</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">xhr</span><span class="p">,</span> <span class="nx">textStatus</span><span class="p">,</span> <span class="nx">errorThrown</span><span class="p">)</span> <span class="p">{</span> |
| <span class="k">if</span> <span class="p">(</span><span class="nx">restoreFunction</span><span class="p">)</span> <span class="p">{</span> |
| <span class="nx">restoreFunction</span><span class="p">();</span> |
| <span class="p">}</span> |
| <span class="c1">// struts sends status code 400 when validation errors are present</span> |
| <span class="k">if</span> <span class="p">(</span><span class="nx">xhr</span><span class="p">.</span><span class="nx">status</span> <span class="o">===</span> <span class="mi">400</span><span class="p">)</span> <span class="p">{</span> |
| <span class="nx">_handleValidationResult</span><span class="p">(</span><span class="nx">_form</span><span class="p">,</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">xhr</span><span class="p">.</span><span class="nx">responseText</span><span class="p">))</span> |
| <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> |
| <span class="c1">// a real error occurred -> show user an error message</span> |
| <span class="nx">_handleValidationResult</span><span class="p">(</span><span class="nx">_form</span><span class="p">,</span> <span class="p">{</span><span class="na">errors</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">Network or server error!</span><span class="dl">'</span><span class="p">]})</span> |
| <span class="p">}</span> |
| <span class="p">}</span> |
| <span class="p">}</span> |
| <span class="c1">// send request, after delay to make sure everybody notices the visual feedback :)</span> |
| <span class="nb">window</span><span class="p">.</span><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> |
| <span class="kd">var</span> <span class="nx">url</span> <span class="o">=</span> <span class="nx">_form</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">action</span><span class="p">;</span> |
| <span class="nx">jQuery</span><span class="p">.</span><span class="nx">ajax</span><span class="p">(</span><span class="nx">url</span><span class="p">,</span> <span class="nx">options</span><span class="p">);</span> |
| <span class="p">},</span> <span class="mi">1000</span><span class="p">);</span> |
| <span class="p">}</span> |
| <span class="cm">/** |
| * Removes validation errors from HTML DOM. |
| */</span> |
| <span class="kd">function</span> <span class="nx">_removeValidationErrors</span><span class="p">()</span> <span class="p">{</span> |
| <span class="c1">// action errors</span> |
| <span class="c1">// you might want to use a custom ID here</span> |
| <span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">ul.errorMessage li</span><span class="dl">'</span><span class="p">).</span><span class="nx">remove</span><span class="p">();</span> |
| <span class="c1">// field errors</span> |
| <span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">div.errorMessage</span><span class="dl">'</span><span class="p">).</span><span class="nx">remove</span><span class="p">();</span> |
| <span class="p">}</span> |
| <span class="cm">/** |
| * Incorporates validation errors in HTML DOM. |
| * |
| * @param form Form containing errors. |
| * @param errors Errors from server. |
| */</span> |
| <span class="kd">function</span> <span class="nx">_handleValidationResult</span><span class="p">(</span><span class="nx">form</span><span class="p">,</span> <span class="nx">errors</span><span class="p">)</span> <span class="p">{</span> |
| <span class="c1">// action errors</span> |
| <span class="k">if</span> <span class="p">(</span><span class="nx">errors</span><span class="p">.</span><span class="nx">errors</span><span class="p">)</span> <span class="p">{</span> |
| <span class="c1">// you might want to use a custom ID here</span> |
| <span class="kd">var</span> <span class="nx">errorContainer</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">ul.errorMessage</span><span class="dl">'</span><span class="p">);</span> |
| <span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">errors</span><span class="p">.</span><span class="nx">errors</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">index</span><span class="p">,</span> <span class="nx">errorMsg</span><span class="p">)</span> <span class="p">{</span> |
| <span class="kd">var</span> <span class="nx">li</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1"><li><span></span></li></span><span class="dl">'</span><span class="p">);</span> |
| <span class="nx">li</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="nx">errorMsg</span><span class="p">);</span> <span class="c1">// use text() for security reasons</span> |
| <span class="nx">errorContainer</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">li</span><span class="p">);</span> |
| <span class="p">});</span> |
| <span class="p">}</span> |
| <span class="c1">// field errors</span> |
| <span class="k">if</span> <span class="p">(</span><span class="nx">errors</span><span class="p">.</span><span class="nx">fieldErrors</span><span class="p">)</span> <span class="p">{</span> |
| <span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">errors</span><span class="p">.</span><span class="nx">fieldErrors</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">fieldName</span><span class="p">,</span> <span class="nx">errorMsg</span><span class="p">)</span> <span class="p">{</span> |
| <span class="kd">var</span> <span class="nx">td</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">td[data-error-for-fieldname="</span><span class="dl">'</span> <span class="o">+</span> <span class="nx">fieldName</span> <span class="o">+</span> <span class="dl">'</span><span class="s1">"]</span><span class="dl">'</span><span class="p">);</span> |
| <span class="k">if</span> <span class="p">(</span><span class="nx">td</span><span class="p">)</span> <span class="p">{</span> |
| <span class="kd">var</span> <span class="nx">div</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1"><div class="errorMessage"></div></span><span class="dl">'</span><span class="p">);</span> |
| <span class="nx">div</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="nx">errorMsg</span><span class="p">);</span> <span class="c1">// use text() for security reasons</span> |
| <span class="nx">td</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">div</span><span class="p">);</span> |
| <span class="p">}</span> |
| <span class="p">});</span> |
| <span class="p">}</span> |
| <span class="p">}</span> |
| <span class="c1">// register onSubmit handler</span> |
| <span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="dl">'</span><span class="s1">load</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> |
| <span class="nx">$</span><span class="p">(</span><span class="dl">'</span><span class="s1">form</span><span class="dl">'</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="dl">'</span><span class="s1">submit</span><span class="dl">'</span><span class="p">,</span> <span class="nx">ajaxFormValidation</span><span class="p">);</span> |
| <span class="p">});</span> |
| </code></pre></div></div> |
| |
| <h3 id="how-it-works">How it works</h3> |
| |
| <p><em>jsonValidation</em> interceptor must be placed on a stack, following the <em>validation</em> interceptor. The interceptor itself |
| won’t perform any validation, but will check for validation errors on the action being invoked (assuming that the action |
| is <code class="language-plaintext highlighter-rouge">ValidationAware</code>).</p> |
| |
| <p>If you just want to use AJAX validation, without knowing the implementation details, you can skip this section.</p> |
| |
| <p>When the <em>jsonValidation</em> interceptor is invoked, it will look for a parameter named <em>struts.enableJSONValidation</em>, |
| this parameter <strong>must</strong> be set to <em>true</em>, otherwise the interceptor won’t do anything. Then the interceptor will look |
| for a parameter named <em>struts.validateOnly</em>, if this parameter exists, is set to <em>true</em>, and there are validation |
| errors (action errors) they will be serialized into JSON in the form:</p> |
| |
| <div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w"> |
| </span><span class="nl">"errors"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"Global Error 1"</span><span class="p">,</span><span class="w"> </span><span class="s2">"Global Error 2"</span><span class="p">],</span><span class="w"> |
| </span><span class="nl">"fieldErrors"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w"> |
| </span><span class="nl">"field1"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"Field 1 Error 1"</span><span class="p">,</span><span class="w"> </span><span class="s2">"Field 1 Error 2"</span><span class="p">],</span><span class="w"> |
| </span><span class="nl">"field1"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"Field 2 Error 1"</span><span class="p">,</span><span class="w"> </span><span class="s2">"Field 2 Error 2"</span><span class="p">]</span><span class="w"> |
| </span><span class="p">}</span><span class="w"> |
| </span><span class="p">}</span><span class="w"> |
| </span></code></pre></div></div> |
| |
| <p>If the action implements the <em>ModelDrive</em> interface, “model.” will be stripped from the field names in the returned JSON. |
| If validation succeeds (and <em>struts.validateOnly</em> is true), an empty JSON string will be returned:</p> |
| |
| <div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{}</span><span class="w"> |
| </span></code></pre></div></div> |
| |
| <p>If <em>struts.validateOnly</em> is false the action and result are executed. In this case <em>jsonActionRedirect</em> result is very |
| useful. It creates a JSON response in the form:</p> |
| |
| <div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="nl">"location"</span><span class="p">:</span><span class="w"> </span><span class="s2">"<url to be loaded next>"</span><span class="p">}</span><span class="w"> |
| </span></code></pre></div></div> |
| |
| <blockquote> |
| <p>Remember to set <code class="language-plaintext highlighter-rouge">struts.enableJSONValidation=true</code> in the request to enable AJAX validation</p> |
| </blockquote> |
| |
| <h3 id="jsonvalidationinterceptor-parameters">JSONValidationInterceptor parameters</h3> |
| |
| <p>The following request parameters can be used to enable exposing validation errors:</p> |
| |
| <ul> |
| <li><strong>struts.enableJSONValidation</strong> - a request parameter must be set to <strong>true</strong> to use this interceptor</li> |
| <li><strong>struts.validateOnly</strong> - If the request has this parameter, execution will return after validation (action won’t be executed). |
| If <strong>struts.validateOnly</strong> is set to false you may want to use <em>JSONActionRedirectResult</em></li> |
| <li><strong>struts.JSONValidation.no.encoding</strong> - If the request has this parameter set to <strong>true,</strong> the character encoding |
| will <strong>NOT</strong> be set on the response - is needed in portlet environment</li> |
| </ul> |
| |
| <p>You can override names of these parameters by specifying the following parameters when setting up a stack:</p> |
| |
| <ul> |
| <li><strong>validateJsonParam</strong> to override name of <strong>struts.enableJSONValidation</strong></li> |
| <li><strong>validateOnlyParam</strong> to override name of <strong>struts.validateOnly</strong></li> |
| <li><strong>noEncodingSetParam</strong> to override name of <strong>struts.JSONValidation.no.encoding</strong></li> |
| <li><strong>validationFailedStatus</strong> status to be set on response when there are validation errors, by default <strong>400</strong></li> |
| </ul> |
| |
| <p>Parameters overriding is available since Struts 2.5.9</p> |
| |
| <h3 id="flow-chart-of-ajax-validation">Flow chart of AJAX validation</h3> |
| |
| <p>Some details are omitted, like results used.</p> |
| |
| <p>As explained above: there is a case where form is submitted twice, one time as AJAX with validation only and another time as usual submit.</p> |
| |
| <p><img src="attachments/struts2-ajax-vali-flow.png" alt="" /></p> |
| |
| </section> |
| </article> |
| |
| |
| <footer class="container"> |
| <div class="col-md-12"> |
| Copyright © 2000-2022 <a href="https://www.apache.org/">The Apache Software Foundation</a>. |
| Apache Struts, Struts, Apache, the Apache feather logo, and the Apache Struts project logos are |
| trademarks of The Apache Software Foundation. All Rights Reserved. |
| </div> |
| <div class="col-md-12">Logo and website design donated by <a href="https://softwaremill.com/">SoftwareMill</a>.</div> |
| </footer> |
| |
| <script>!function (d, s, id) { |
| var js, fjs = d.getElementsByTagName(s)[0]; |
| if (!d.getElementById(id)) { |
| js = d.createElement(s); |
| js.id = id; |
| js.src = "//platform.twitter.com/widgets.js"; |
| fjs.parentNode.insertBefore(js, fjs); |
| } |
| }(document, "script", "twitter-wjs");</script> |
| <script src="https://apis.google.com/js/platform.js" async="async" defer="defer"></script> |
| |
| <div id="fb-root"></div> |
| |
| <script>(function (d, s, id) { |
| var js, fjs = d.getElementsByTagName(s)[0]; |
| if (d.getElementById(id)) return; |
| js = d.createElement(s); |
| js.id = id; |
| js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1"; |
| fjs.parentNode.insertBefore(js, fjs); |
| }(document, 'script', 'facebook-jssdk'));</script> |
| |
| |
| </body> |
| </html> |