show struts2 action error messages on to Modal

Question

Now I have a sign up modal #modal_A: when user click a link, popover the modal_A dialog, then user can submit his/her infor, but when the username is invalid, some error message should shown on the modal based on the struts2.

Here is the signup form on jsp page:

<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-sm login-position" role="document">
    <div class="modal-cell">
      <div class="modal-content">
        <div class="login-modal">
            <div class="omb_login">
                <div class="row">
                    <div class="col-xs-11 login-left">  
                        <s:form class="omb_loginForm" name="register" theme="simple" action="RegisterAction" autocomplete="off" method="POST">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-user" style="font-size: 15px;"></i></span>
                                <s:textfield type="text" class="form-control line-height" name="username" id="username_register" placeholder="User name"/>
                            </div>
                            <span class="help-block"></span>

                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-envelope" style="font-size: 9px;"></i></span>
                                <s:textfield type="text" class="form-control line-height" name="email" id="email_register" placeholder="Email"/>
                            </div>
                            <span class="help-block"></span>

                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-phone-square" style="font-size: 13px;"></i></span>
                                <s:textfield type="text" class="form-control line-height" name="telephone" id="telephone_register" placeholder="Telephone"/>
                            </div>
                            <span class="help-block"></span>

                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-lock" style="font-size: 18px;"></i></span>
                                <s:textfield  type="password" class="form-control" name="password" id="password_register" placeholder="Password"/>
                            </div>
                            <span class="help-block"></span>
                            <s:submit id="hide" class="btn btn-lg login-btn-primary btn-block" type="submit" key="register.register"/>
                            <span class="help-block"></span>
                        </s:form>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>

Here is the struts action:

<action name="RegisterAction" class="RegisterAction">
       <result name="success">/index.jsp</result>    
       <result name="input">/index.jsp</result>   
</action>

Here is the validators:

<validators>
<field name="username">
    <field-validator type="requiredstring">
        <param name="trim">true</param>
        <message>test!!!!!!!!!!</message>
    </field-validator>
</field>
</validators>

Now when the username is null, I expect it can show the message on the modal.

But the problem is that: when the username is null, it directly jump to the index.jsp page but without the modal shown. So how to solve it?

Answer 1

Struts.xml Adding result type...

     <result-types>
                    <result-type name="json" class="org.apache.struts2.json.JSONResult"/>
            </result-types> 

Struts Action

        <action name="RegisterAction" class="RegisterAction">
        <result name="INPUT">/index.jsp</result>
        <result name="ERROR" type="json">/index.jsp</result>
        <interceptor-ref name="jsonValidationWorkflowStack"></interceptor-ref>
        <param name="ignoreHierarchy">false</param>
        <param name="includeProperties">actionErrors\[\d+\], fieldErrors\..+$, actionMessages\[\d+\]</param>
        <result name="success" type="json">/index.jsp</result>
        </action>

In Jsp page

<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user" style="font-size: 15px;"></i></span>
    <input type="text" class="form-control line-height" name="username" id="username_register" placeholder="User name"/>
<input type="button"  id="username_submit" />
</div>

Ajax

$(document).ready(function() {
       $("#username_submit").click(function(){
           var username=$("#username_register").val();
       $.ajax({
           type: 'GET',
           url:'RegisterAction?username='+encodeURIComponent(username),
           dataType: 'json',
           success: function(data){
            if(data.fieldErrors && !isEmpty(data.fieldErrors)){
           $.each(data.fieldErrors,function(index,value){ //indexfieldname,valuefiled?
          $("#username_register").before('<span>'+value[0]+'</span>');
            });
           return;
           } 



           },
                   error: function() 
                   {

                   }
        });
        return false;
       });});


function isEmpty(obj){//(Object obj = {}isEmpty=true)
    for(var p in obj){
        return false;
    }
    return true;
}

NOTE:Add struts2json plugin Jar..and In alert u will be having struts2 validation errors...hope this will help u :)