javascript - 在 Modal 上显示 struts2 操作错误消息

Question

现在我有一个注册模态#modal_A:当用户单击链接时，弹出 modal_A 对话框，然后用户可以提交他/她的信息，但是当用户名无效时，模态上应该显示一些错误消息基于struts2.

这是jsp页面上的注册表单:

<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>

这是 struts Action :

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

这是验证器:

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

现在当用户名为 null 时，我希望它可以在模式上显示消息。

但问题是:当用户名为null时，直接跳转到index.jsp页面，没有显示modal。那怎么解决呢？

Answer 1

Struts.xml 添加结果类型...

     <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>

在Jsp页面中

<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;
}

注意:添加 struts2json 插件 Jar.. 警告你将遇到 struts2 验证错误......希望这对你有帮助:)