This is an automated email from the ASF dual-hosted git repository. git-site-role pushed a commit to branch asf-site in repository https://gitbox.apache.org/repos/asf/struts-site.git
The following commit(s) were added to refs/heads/asf-site by this push: new 09967c6 Updates production by Jenkins 09967c6 is described below commit 09967c611882532c1a293c79a2f23835e5d21c12 Author: jenkins <bui...@apache.org> AuthorDate: Wed May 15 13:31:10 2019 +0000 Updates production by Jenkins --- content/plugins/json/index.html | 2 +- content/plugins/json/json-validation.html | 701 ++++++++++++++++++++++++ content/plugins/json/struts2-ajax-vali-flow.png | Bin 0 -> 54364 bytes 3 files changed, 702 insertions(+), 1 deletion(-) diff --git a/content/plugins/json/index.html b/content/plugins/json/index.html index 8f0241f..e26ba9a 100644 --- a/content/plugins/json/index.html +++ b/content/plugins/json/index.html @@ -203,7 +203,7 @@ The <code class="highlighter-rouge">setArray</code> method can take as parameter <p><code class="highlighter-rouge">root</code> attribute must be set on the <code class="highlighter-rouge">JSONInterceptor</code> when dealing with JSON array.</p> -<p>This plugin also provides <em>AJAX Validation</em>.</p> +<p>This plugin also provides <a href="json-validation">JSON Validation</a>.</p> <h2 id="installation">Installation</h2> diff --git a/content/plugins/json/json-validation.html b/content/plugins/json/json-validation.html new file mode 100644 index 0000000..ad77fd0 --- /dev/null +++ b/content/plugins/json/json-validation.html @@ -0,0 +1,701 @@ +<!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>JSON Ajax 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="/highlighter/github-theme.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> +</head> +<body> + +<a href="http://github.com/apache/struts" class="github-ribbon"> + <img style="position: absolute; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"> +</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.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> + </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 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="https://cwiki.apache.org/confluence/display/WW/Contributors+Guide">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> + </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 href="../" title="back to Plugins"><< back to Plugins</a> + <a class="edit-on-gh" href="https://github.com/apache/struts-site/edit/master/source/plugins/json/json-validation.md" title="Edit this page on GitHub">Edit on GitHub</a> + <h1 class="no_toc" id="json-ajax-validation">JSON Ajax Validation</h1> + +<ul id="markdown-toc"> + <li><a href="#description" id="markdown-toc-description">Description</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> <ul> + <li><a href="#themeproperties" id="markdown-toc-themeproperties">theme.properties</a></li> + <li><a href="#actionerrorftl" id="markdown-toc-actionerrorftl">actionerror.ftl</a></li> + <li><a href="#controlfooterftl" id="markdown-toc-controlfooterftl">controlfooter.ftl</a></li> + <li><a href="#controlheader-coreftl" id="markdown-toc-controlheader-coreftl">controlheader-core.ftl</a></li> + </ul> + </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> + </ul> + </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> + +<h2 id="description">Description</h2> + +<p>Struts provides <a href="../../core-developers/client-side-validation">client side validation</a> (using JavaScript) for a few validators. Using AJAX +validation, all <em>validators</em> 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="index">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="highlighter-rouge"><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="n">ActionSupport</span> <span class="o">{</span> + <span class="kd">private</span> <span class="n">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="n">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="n">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="n">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="n">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="n">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="n">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="n">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="n">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="n">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="n">Date</span> <span class="n">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="n">setDateValidatorField</span><span class="o">(</span><span class="n">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="n">String</span> <span class="n">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="n">setEmailValidatorField</span><span class="o">(</span><span class="n">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="n">Integer</span> <span class="n">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="n">setIntegerValidatorField</span><span class="o">(</span><span class="n">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="n">String</span> <span class="n">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="n">setRegexValidatorField</span><span class="o">(</span><span class="n">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="n">String</span> <span class="n">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="n">setRequiredStringValidatorField</span><span class="o">(</span><span class="n">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="n">String</span> <span class="n">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="n">setRequiredValidatorField</span><span class="o">(</span><span class="n">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="n">String</span> <span class="n">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="n">setStringLengthValidatorField</span><span class="o">(</span><span class="n">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="n">String</span> <span class="n">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="n">setFieldExpressionValidatorField</span><span class="o">(</span> + <span class="n">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="n">String</span> <span class="n">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="n">setUrlValidatorField</span><span class="o">(</span><span class="n">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> + +<h3 id="map-the-action">Map the Action</h3> + +<p>Note that is is not necessary when using <a href="../convention/">Convention Plugin</a></p> + +<div class="highlighter-rouge"><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> +<span class="nt"></struts></span> +</code></pre> +</div> + +<p>AJAX validation is performed by the <em>jsonValidation</em> interceptor. This interceptor is included in the <em>jsonValidationWorkflowStack</em>, +and is required in order to perform AJAX validation. Normal results(<code class="highlighter-rouge">input</code>, <code class="highlighter-rouge">success</code>, etc) should be provided for the action in the case +that someone tries to access the action directly, in which case normal validation 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="highlighter-rouge"><pre class="highlight"><code><span class="err"><</span>%@taglib prefix="s" uri="/struts-tags" %> +<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> + +<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> + +<h4 id="themeproperties">theme.properties</h4> + +<div class="highlighter-rouge"><pre class="highlight"><code>parent = xhtml +</code></pre> +</div> + +<h4 id="actionerrorftl">actionerror.ftl</h4> + +<div class="highlighter-rouge"><pre class="highlight"><code><span class="err"><</span>#-- + Make sure element is always present. To be filled later via JS. +--> +<span class="nt"><ul</span><span class="err"><#</span><span class="na">rt</span><span class="nt">/></span> +<span class="err"><</span>#if parameters.id??> + id="${parameters.id?html}"<span class="err"><</span>#rt/> +<span class="err"><</span>/#if> +<span class="err"><</span>#if parameters.cssClass??> + class="${parameters.cssClass?html}"<span class="err"><</span>#rt/> +<span class="err"><</span>#else> + class="errorMessage"<span class="err"><</span>#rt/> +<span class="err"><</span>/#if> +<span class="err"><</span>#if parameters.cssStyle??> + style="${parameters.cssStyle?html}"<span class="err"><</span>#rt/> +<span class="err"><</span>/#if> +> +<span class="err"><</span>#if (actionErrors?? <span class="err">&&</span> actionErrors?size > 0)> + <span class="err"><</span>#list actionErrors as error> + <span class="err"><</span>#if error??> + <span class="nt"><li><span></span><span class="err"><</span>#if parameters.escape>${error!?html}<span class="err"><</span>#else>${error!}<span class="err"><</span>/#if><span class="nt"></span></span><span class="err"><</span>#rt/><span class="nt"></li></span><span class="err"><</span>#rt/> + <span class="err"><</span>/#if> + <span class="err"><</span>/#list> +<span class="err"><</span>/#if> +<span class="nt"></ul></span> +</code></pre> +</div> + +<h4 id="controlfooterftl">controlfooter.ftl</h4> + +<div class="highlighter-rouge"><pre class="highlight"><code>${parameters.after!}<span class="err"><</span>#t/> + <span class="nt"></td></span><span class="err"><</span>#lt/> +<span class="nt"></tr></span> +<span class="err"><</span>#if (parameters.errorposition!"top") == 'bottom'> +<span class="err"><</span>#assign hasFieldErrors = parameters.name?? <span class="err">&&</span> fieldErrors?? <span class="err">&&</span> fieldErrors[parameters.name]??/> +<span class="err"><</span>#if hasFieldErrors> +<span class="nt"><tr</span> <span class="na">errorFor=</span><span class="s">"${parameters.id}"</span><span class="nt">></span> + <span class="nt"><td</span> <span class="na">class=</span><span class="s">"tdErrorMessage"</span> <span class="na">colspan=</span><span class="s">"2"</span><span class="nt">></span><span class="err"><</span>#rt/> + <span class="err"><</span>#if hasFieldErrors> + <span class="err"><</span>#list fieldErrors[parameters.name] as error> + <span class="nt"><div</span> <span class="na">class=</span><span class="s">"errorMessage"</span><span class="nt">></span>${error?html}<span class="nt"></div></span><span class="err"><</span>#t/> + <span class="err"><</span>/#list> + <span class="err"><</span>/#if> + <span class="nt"></td></span><span class="err"><</span>#lt/> +<span class="nt"></tr></span> +<span class="err"><</span>/#if> +<span class="err"><</span>/#if> +</code></pre> +</div> + +<h4 id="controlheader-coreftl">controlheader-core.ftl</h4> + +<div class="highlighter-rouge"><pre class="highlight"><code> <span class="err"><</span>#-- + Always include elements to show errors. They may be filled later via AJAX. +--> +<span class="err"><</span>#assign hasFieldErrors = parameters.name?? <span class="err">&&</span> fieldErrors?? <span class="err">&&</span> fieldErrors[parameters.name]??/> +<span class="err"><</span>#if (parameters.errorposition!"top") == 'top'> +<span class="nt"><tr</span> <span class="na">errorFor=</span><span class="s">"${parameters.id}"</span><span class="nt">></span> + <span class="nt"><td</span> <span class="na">class=</span><span class="s">"tdErrorMessage"</span> <span class="na">colspan=</span><span class="s">"2"</span> <span class="na">data-error-for-fieldname=</span><span class="s">"${parameters.name}"</span><span class="nt">></span><span class="err"><</span>#rt/> + <span class="err"><</span>#if hasFieldErrors> + <span class="err"><</span>#list fieldErrors[parameters.name] as error> + <span class="nt"><div</span> <span class="na">class=</span><span class="s">"errorMessage"</span><span class="nt">></span>${error?html}<span class="nt"></div></span><span class="err"><</span>#t/> + <span class="err"><</span>/#list> + <span class="err"><</span>/#if> + <span class="nt"></td></span><span class="err"><</span>#lt/> +<span class="nt"></tr></span> +<span class="err"><</span>/#if> +<span class="err"><</span>#if !parameters.labelposition?? <span class="err">&&</span> (parameters.form.labelposition)??> +<span class="err"><</span>#assign labelpos = parameters.form.labelposition/> +<span class="err"><</span>#elseif parameters.labelposition??> +<span class="err"><</span>#assign labelpos = parameters.labelposition/> +<span class="err"><</span>/#if> +<span class="err"><</span>#-- + if the label position is top, + then give the label it's own row in the table +--> +<span class="nt"><tr></span> +<span class="err"><</span>#if (labelpos!"") == 'top'> + <span class="nt"><td</span> <span class="na">class=</span><span class="s">"tdLabelTop"</span> <span class="na">colspan=</span><span class="s">"2"</span><span class="nt">></span><span class="err"><</span>#rt/> +<span class="err"><</span>#else> + <span class="nt"><td</span> <span class="na">class=</span><span class="s">"tdLabel"</span><span class="nt">></span><span class="err"><</span>#rt/> +<span class="err"><</span>/#if> +<span class="err"><</span>#if parameters.label??> + <span class="nt"><label</span> <span class="err"><#</span><span class="na">t</span><span class="nt">/></span> +<span class="err"><</span>#if parameters.id??> + for="${parameters.id?html}" <span class="err"><</span>#t/> +<span class="err"><</span>/#if> +<span class="err"><</span>#if hasFieldErrors> + class="errorLabel"<span class="err"><</span>#t/> +<span class="err"><</span>#else> + class="label"<span class="err"><</span>#t/> +<span class="err"><</span>/#if> + ><span class="err"><</span>#t/> +<span class="err"><</span>#if parameters.required!false <span class="err">&&</span> parameters.requiredPosition!"right" != 'right'> + <span class="nt"><span</span> <span class="na">class=</span><span class="s">"required"</span><span class="nt">></span>*<span class="nt"></span></span><span class="err"><</span>#t/> +<span class="err"><</span>/#if> +${parameters.label?html}<span class="err"><</span>#t/> +<span class="err"><</span>#if parameters.required!false <span class="err">&&</span> parameters.requiredPosition!"right" == 'right'> + <span class="nt"><span</span> <span class="na">class=</span><span class="s">"required"</span><span class="nt">></span>*<span class="nt"></span></span><span class="err"><</span>#t/> +<span class="err"><</span>/#if> +${parameters.labelseparator!":"?html}<span class="err"><</span>#t/> +<span class="err"><</span>#include "/${parameters.templateDir}/${parameters.expandTheme}/tooltip.ftl" /> +<span class="nt"></label></span><span class="err"><</span>#t/> +<span class="err"><</span>/#if> + <span class="nt"></td></span><span class="err"><</span>#lt/> +<span class="err"><</span>#-- add the extra row --> +<span class="err"><</span>#if (labelpos!"") == 'top'> +<span class="nt"></tr></span> +<span class="nt"><tr></span> +<span class="err"><</span>/#if> +</code></pre> +</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="highlighter-rouge"><pre class="highlight"><code><span class="p">.</span><span class="nx">ajaxVisualFeedback</span> <span class="p">{</span> + <span class="nl">width</span><span class="p">:</span> <span class="mi">16</span><span class="nx">px</span><span class="p">;</span> + <span class="nl">height</span><span class="p">:</span> <span class="mi">16</span><span class="nx">px</span><span class="p">;</span> + <span class="nx">background</span><span class="o">-</span><span class="nx">image</span><span class="err">:</span> <span class="nx">url</span><span class="p">(</span><span class="s1">'../images/indicator.gif'</span><span class="p">);</span> + <span class="nx">background</span><span class="o">-</span><span class="nx">repeat</span><span class="err">:</span> <span class="nx">no</span><span class="o">-</span><span class="nx">repeat</span><span class="p">;</span> + <span class="nl">float</span><span class="p">:</span> <span class="nx">right</span><span class="p">;</span> +<span class="p">}</span> +</code></pre> +</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="highlighter-rouge"><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="s1">'.btn-primary'</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="s1">'<div class="ajaxVisualFeedback"></div>'</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="s1">'struts.enableJSONValidation=true&struts.validateOnly=false&'</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="s1">'POST'</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="s1">'Network or server error!'</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="s1">'ul.errorMessage li'</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="s1">'div.errorMessage'</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="s1">'ul.errorMessage'</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="s1">'<li><span></span></li>'</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="s1">'td[data-error-for-fieldname="'</span> <span class="o">+</span> <span class="nx">fieldName</span> <span class="o">+</span> <span class="s1">'"]'</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="s1">'<div class="errorMessage"></div>'</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="s1">'load'</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="s1">'form'</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'submit'</span><span class="p">,</span> <span class="nx">ajaxFormValidation</span><span class="p">);</span> +<span class="p">});</span> +</code></pre> +</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 ValidationAware).</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 (o action errors) they will be serialized into JSON in the form:</p> + +<div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="w"> + </span><span class="nt">"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="nt">"fieldErrors"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w"> + </span><span class="nt">"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="nt">"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> + +<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="highlighter-rouge"><pre class="highlight"><code><span class="p">{}</span><span class="w"> +</span></code></pre> +</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="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="nt">"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> + +<blockquote> + <p>Remember to set <code class="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> + +<h2 id="flow-chart-of-ajax-validation">Flow chart of AJAX validation</h2> + +<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="struts2-ajax-vali-flow.png" alt="Flow chart " /> + </p> + + </section> +</article> + + +<footer class="container"> + <div class="col-md-12"> + Copyright © 2000-2018 <a href="http://www.apache.org/">The Apache Software Foundation </a>. + All Rights Reserved. + </div> + <div class="col-md-12"> + Apache Struts, Struts, Apache, the Apache feather logo, and the Apache Struts project logos are + trademarks of The Apache Software Foundation. + </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> diff --git a/content/plugins/json/struts2-ajax-vali-flow.png b/content/plugins/json/struts2-ajax-vali-flow.png new file mode 100755 index 0000000..8da0331 Binary files /dev/null and b/content/plugins/json/struts2-ajax-vali-flow.png differ