| <!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><a href="/contributors/">Contributors Guide</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> |
| <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/plugins/json/json-ajax-validation.md" title="Edit this page on GitHub">Edit on GitHub</a> |
| |
| <a href="index.html" title="back to JSON plugin"><< back to JSON plugin</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="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="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="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="n">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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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></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="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> |
| <span class="nt"></struts></span> |
| </code></pre></div></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="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><</span><span class="err">%@</span><span class="na">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="err">%</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> |
| |
| <h4 id="themeproperties">theme.properties</h4> |
| |
| <div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>parent = xhtml |
| </code></pre></div></div> |
| |
| <h4 id="actionerrorftl">actionerror.ftl</h4> |
| |
| <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><</span><span class="err">#</span><span class="na">--</span> |
| <span class="na">Make</span> <span class="na">sure</span> <span class="na">element</span> <span class="na">is</span> <span class="na">always</span> <span class="na">present</span><span class="err">.</span> <span class="na">To</span> <span class="na">be</span> <span class="na">filled</span> <span class="na">later</span> <span class="na">via</span> <span class="na">JS</span><span class="err">.</span> |
| <span class="na">--</span><span class="nt">></span> |
| <span class="nt"><ul</span><span class="err"><#</span><span class="na">rt</span><span class="nt">/></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">if</span> <span class="na">parameters</span><span class="err">.</span><span class="na">id</span><span class="err">??</span><span class="nt">></span> |
| id="${parameters.id?html}"<span class="nt"><</span><span class="err">#</span><span class="na">rt</span><span class="nt">/></span> |
| <span class="nt"></</span><span class="err">#</span><span class="nt">if></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">if</span> <span class="na">parameters</span><span class="err">.</span><span class="na">cssClass</span><span class="err">??</span><span class="nt">></span> |
| class="${parameters.cssClass?html}"<span class="nt"><</span><span class="err">#</span><span class="na">rt</span><span class="nt">/></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">else</span><span class="nt">></span> |
| class="errorMessage"<span class="nt"><</span><span class="err">#</span><span class="na">rt</span><span class="nt">/></span> |
| <span class="nt"></</span><span class="err">#</span><span class="nt">if></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">if</span> <span class="na">parameters</span><span class="err">.</span><span class="na">cssStyle</span><span class="err">??</span><span class="nt">></span> |
| style="${parameters.cssStyle?html}"<span class="nt"><</span><span class="err">#</span><span class="na">rt</span><span class="nt">/></span> |
| <span class="nt"></</span><span class="err">#</span><span class="nt">if></span> |
| > |
| <span class="nt"><</span><span class="err">#</span><span class="na">if</span> <span class="err">(</span><span class="na">actionErrors</span><span class="err">??</span> <span class="err">&&</span> <span class="na">actionErrors</span><span class="err">?</span><span class="na">size</span> <span class="nt">></span> 0)> |
| <span class="nt"><</span><span class="err">#</span><span class="na">list</span> <span class="na">actionErrors</span> <span class="na">as</span> <span class="na">error</span><span class="nt">></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">if</span> <span class="na">error</span><span class="err">??</span><span class="nt">></span> |
| <span class="nt"><li><span><</span><span class="err">#</span><span class="na">if</span> <span class="na">parameters</span><span class="err">.</span><span class="na">escape</span><span class="nt">></span>${error!?html}<span class="nt"><</span><span class="err">#</span><span class="na">else</span><span class="nt">></span>${error!}<span class="nt"></</span><span class="err">#</span><span class="nt">if></span><</span><span class="err">#</span><span class="na">rt</span><span class="nt">/></li><</span><span class="err">#</span><span class="na">rt</span><span class="nt">/></span> |
| <span class="nt"></</span><span class="err">#</span><span class="nt">if></span> |
| <span class="nt"></</span><span class="err">#</span><span class="nt">list></span> |
| <span class="nt"></</span><span class="err">#</span><span class="nt">if></span> |
| <span class="nt"></ul></span> |
| </code></pre></div></div> |
| |
| <h4 id="controlfooterftl">controlfooter.ftl</h4> |
| |
| <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>${parameters.after!}<span class="nt"><</span><span class="err">#</span><span class="na">t</span><span class="nt">/></span> |
| <span class="nt"></td><</span><span class="err">#</span><span class="na">lt</span><span class="nt">/></span> |
| <span class="nt"></tr></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">if</span> <span class="err">(</span><span class="na">parameters</span><span class="err">.</span><span class="na">errorposition</span><span class="err">!"</span><span class="na">top</span><span class="err">")</span> <span class="err">==</span> <span class="err">'</span><span class="na">bottom</span><span class="err">'</span><span class="nt">></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">assign</span> <span class="na">hasFieldErrors =</span><span class="err"> </span><span class="s">parameters.name??</span> <span class="err">&&</span> <span class="na">fieldErrors</span><span class="err">??</span> <span class="err">&&</span> <span class="na">fieldErrors</span><span class="err">[</span><span class="na">parameters</span><span class="err">.</span><span class="na">name</span><span class="err">]??</span><span class="nt">/></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">if</span> <span class="na">hasFieldErrors</span><span class="nt">></span> |
| <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><span class="na">rt</span><span class="nt">/></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">if</span> <span class="na">hasFieldErrors</span><span class="nt">></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">list</span> <span class="na">fieldErrors</span><span class="err">[</span><span class="na">parameters</span><span class="err">.</span><span class="na">name</span><span class="err">]</span> <span class="na">as</span> <span class="na">error</span><span class="nt">></span> |
| <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><span class="na">t</span><span class="nt">/></span> |
| <span class="nt"></</span><span class="err">#</span><span class="nt">list></span> |
| <span class="nt"></</span><span class="err">#</span><span class="nt">if></span> |
| <span class="nt"></td><</span><span class="err">#</span><span class="na">lt</span><span class="nt">/></span> |
| <span class="nt"></tr></span> |
| <span class="nt"></</span><span class="err">#</span><span class="nt">if></span> |
| <span class="nt"></</span><span class="err">#</span><span class="nt">if></span> |
| </code></pre></div></div> |
| |
| <h4 id="controlheader-coreftl">controlheader-core.ftl</h4> |
| |
| <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nt"><</span><span class="err">#</span><span class="na">--</span> |
| <span class="na">Always</span> <span class="na">include</span> <span class="na">elements</span> <span class="na">to</span> <span class="na">show</span> <span class="na">errors</span><span class="err">.</span> <span class="na">They</span> <span class="na">may</span> <span class="na">be</span> <span class="na">filled</span> <span class="na">later</span> <span class="na">via</span> <span class="na">AJAX</span><span class="err">.</span> |
| <span class="na">--</span><span class="nt">></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">assign</span> <span class="na">hasFieldErrors =</span><span class="err"> </span><span class="s">parameters.name??</span> <span class="err">&&</span> <span class="na">fieldErrors</span><span class="err">??</span> <span class="err">&&</span> <span class="na">fieldErrors</span><span class="err">[</span><span class="na">parameters</span><span class="err">.</span><span class="na">name</span><span class="err">]??</span><span class="nt">/></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">if</span> <span class="err">(</span><span class="na">parameters</span><span class="err">.</span><span class="na">errorposition</span><span class="err">!"</span><span class="na">top</span><span class="err">")</span> <span class="err">==</span> <span class="err">'</span><span class="na">top</span><span class="err">'</span><span class="nt">></span> |
| <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><span class="na">rt</span><span class="nt">/></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">if</span> <span class="na">hasFieldErrors</span><span class="nt">></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">list</span> <span class="na">fieldErrors</span><span class="err">[</span><span class="na">parameters</span><span class="err">.</span><span class="na">name</span><span class="err">]</span> <span class="na">as</span> <span class="na">error</span><span class="nt">></span> |
| <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><span class="na">t</span><span class="nt">/></span> |
| <span class="nt"></</span><span class="err">#</span><span class="nt">list></span> |
| <span class="nt"></</span><span class="err">#</span><span class="nt">if></span> |
| <span class="nt"></td><</span><span class="err">#</span><span class="na">lt</span><span class="nt">/></span> |
| <span class="nt"></tr></span> |
| <span class="nt"></</span><span class="err">#</span><span class="nt">if></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">if</span> <span class="err">!</span><span class="na">parameters</span><span class="err">.</span><span class="na">labelposition</span><span class="err">??</span> <span class="err">&&</span> <span class="err">(</span><span class="na">parameters</span><span class="err">.</span><span class="na">form</span><span class="err">.</span><span class="na">labelposition</span><span class="err">)??</span><span class="nt">></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">assign</span> <span class="na">labelpos =</span><span class="err"> </span><span class="s">parameters.form.labelposition/</span><span class="nt">></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">elseif</span> <span class="na">parameters</span><span class="err">.</span><span class="na">labelposition</span><span class="err">??</span><span class="nt">></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">assign</span> <span class="na">labelpos =</span><span class="err"> </span><span class="s">parameters.labelposition/</span><span class="nt">></span> |
| <span class="nt"></</span><span class="err">#</span><span class="nt">if></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">--</span> |
| <span class="na">if</span> <span class="na">the</span> <span class="na">label</span> <span class="na">position</span> <span class="na">is</span> <span class="na">top</span><span class="err">,</span> |
| <span class="na">then</span> <span class="na">give</span> <span class="na">the</span> <span class="na">label</span> <span class="na">it</span><span class="err">'</span><span class="na">s</span> <span class="na">own</span> <span class="na">row</span> <span class="na">in</span> <span class="na">the</span> <span class="na">table</span> |
| <span class="na">--</span><span class="nt">></span> |
| <span class="nt"><tr></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">if</span> <span class="err">(</span><span class="na">labelpos</span><span class="err">!"")</span> <span class="err">==</span> <span class="err">'</span><span class="na">top</span><span class="err">'</span><span class="nt">></span> |
| <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><span class="na">rt</span><span class="nt">/></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">else</span><span class="nt">></span> |
| <span class="nt"><td</span> <span class="na">class=</span><span class="s">"tdLabel"</span><span class="nt">><</span><span class="err">#</span><span class="na">rt</span><span class="nt">/></span> |
| <span class="nt"></</span><span class="err">#</span><span class="nt">if></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">if</span> <span class="na">parameters</span><span class="err">.</span><span class="na">label</span><span class="err">??</span><span class="nt">></span> |
| <span class="nt"><label</span> <span class="err"><#</span><span class="na">t</span><span class="nt">/></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">if</span> <span class="na">parameters</span><span class="err">.</span><span class="na">id</span><span class="err">??</span><span class="nt">></span> |
| for="${parameters.id?html}" <span class="nt"><</span><span class="err">#</span><span class="na">t</span><span class="nt">/></span> |
| <span class="nt"></</span><span class="err">#</span><span class="nt">if></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">if</span> <span class="na">hasFieldErrors</span><span class="nt">></span> |
| class="errorLabel"<span class="nt"><</span><span class="err">#</span><span class="na">t</span><span class="nt">/></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">else</span><span class="nt">></span> |
| class="label"<span class="nt"><</span><span class="err">#</span><span class="na">t</span><span class="nt">/></span> |
| <span class="nt"></</span><span class="err">#</span><span class="nt">if></span> |
| ><span class="nt"><</span><span class="err">#</span><span class="na">t</span><span class="nt">/></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">if</span> <span class="na">parameters</span><span class="err">.</span><span class="na">required</span><span class="err">!</span><span class="na">false</span> <span class="err">&&</span> <span class="na">parameters</span><span class="err">.</span><span class="na">requiredPosition</span><span class="err">!"</span><span class="na">right</span><span class="err">"</span> <span class="err">!=</span> <span class="err">'</span><span class="na">right</span><span class="err">'</span><span class="nt">></span> |
| <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><span class="na">t</span><span class="nt">/></span> |
| <span class="nt"></</span><span class="err">#</span><span class="nt">if></span> |
| ${parameters.label?html}<span class="nt"><</span><span class="err">#</span><span class="na">t</span><span class="nt">/></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">if</span> <span class="na">parameters</span><span class="err">.</span><span class="na">required</span><span class="err">!</span><span class="na">false</span> <span class="err">&&</span> <span class="na">parameters</span><span class="err">.</span><span class="na">requiredPosition</span><span class="err">!"</span><span class="na">right</span><span class="err">"</span> <span class="err">==</span> <span class="err">'</span><span class="na">right</span><span class="err">'</span><span class="nt">></span> |
| <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><span class="na">t</span><span class="nt">/></span> |
| <span class="nt"></</span><span class="err">#</span><span class="nt">if></span> |
| ${parameters.labelseparator!":"?html}<span class="nt"><</span><span class="err">#</span><span class="na">t</span><span class="nt">/></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">include</span> <span class="err">"/${</span><span class="na">parameters</span><span class="err">.</span><span class="na">templateDir</span><span class="err">}/${</span><span class="na">parameters</span><span class="err">.</span><span class="na">expandTheme</span><span class="err">}/</span><span class="na">tooltip</span><span class="err">.</span><span class="na">ftl</span><span class="err">"</span> <span class="nt">/></span> |
| <span class="nt"></label><</span><span class="err">#</span><span class="na">t</span><span class="nt">/></span> |
| <span class="nt"></</span><span class="err">#</span><span class="nt">if></span> |
| <span class="nt"></td><</span><span class="err">#</span><span class="na">lt</span><span class="nt">/></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">--</span> <span class="na">add</span> <span class="na">the</span> <span class="na">extra</span> <span class="na">row</span> <span class="na">--</span><span class="nt">></span> |
| <span class="nt"><</span><span class="err">#</span><span class="na">if</span> <span class="err">(</span><span class="na">labelpos</span><span class="err">!"")</span> <span class="err">==</span> <span class="err">'</span><span class="na">top</span><span class="err">'</span><span class="nt">></span> |
| <span class="nt"></tr></span> |
| <span class="nt"><tr></span> |
| <span class="nt"></</span><span class="err">#</span><span class="nt">if></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-js highlighter-rouge"><div class="highlight"><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="p">:</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="p">:</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></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-js 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="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></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="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w"> |
| </span><span class="s2">"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="s2">"fieldErrors"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w"> |
| </span><span class="s2">"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="s2">"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="s2">"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="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> |