提交表单的时候加上Ajax验证

<form id="fo" action="addDiskSr.action" method="post" >
      <table>
        <tr>
          <td colspan="2" class="subtitle" >存储服务器内容录入</td>
        </tr>
        <tbody>
          <tr>
            <th width="30%"><span class="warning">*</span>所在集群</th>
            <td>
                 <select id="poolId" name="diskSr.pool.id" onchange="changeHost()">
                     <option value="">==请选择==</option>
                    <s:iterator value="poolList" var="pool">
                    <option value="${pool.id }">${pool.name }</option>
                    </s:iterator>
                  </select>
            </td>
          </tr>
          <tr style="display:none" id="hostTr">
            <th width="30%"><span class="warning">*</span>所属计算节点</th>
            <td>
                 <select name="diskSr.host.id"  id="diskSrHostListSelect">
                     <option value="-1">==请选择==</option>
                    <s:iterator value="hostList" var="host">
                        <option value="${host.id }">${host.nameLabel }</option>
                    </s:iterator>
                  </select>
            </td>
          </tr>
          <tr>
             <th width="30%"><span class="warning">*</span>uuid</th>
             <td>
                 <input type="text" class="inputText" id="srUuid" name="diskSr.uuid" style="width:300px;"/>
             </td>
          </tr>
          <tr>
            <th><span class="warning">*</span>存储服务器名称</th>
            <td><input type="text" class="inputText" name="diskSr.nameLabel" /></td>
          </tr>
          <tr>
            <th><span class="warning">*</span>存储服务器IP:</th>
            <td><input type="text" class="inputText" name="diskSr.serverIp" /></td>
          </tr>
          <tr>
            <th><span class="warning">*</span>存储总空间</th>
            <td><input type="text" class="inputText" name="diskSr.space" />GB</td>
          </tr>
          <tr>
              <th><span class="warning">*</span>预留空间</th>
            <td><input type="text" class="inputText" name="diskSr.spaceHold" />GB</td>
          </tr>
          <tr>
            <th><span class="warning">*</span>服务器账号</th>
            <td><input type="text" class="inputText" name="diskSr.serverUser" /></td>
          </tr>
          <tr>
            <th><span class="warning">*</span>服务器密码</th>
            <td><input type="text" class="inputText" name="diskSr.serverPsw" /></td>
          </tr>
           <tr>
            <th><span class="warning">*</span>用途</th>
            <td><input type="radio" name="diskSr.useType" value="1" checked="checked"/>系统盘
                <input type="radio" name="diskSr.useType" value="2"/>数据盘
                <input type="radio" name="diskSr.useType" value="3"/>系统盘+数据盘
            </td>
          </tr>
<!--          <tr>-->
<!--            <th><span class="warning">*</span>类型</th>-->
<!--            <td><input type="radio" name="diskSr.type" value="0" checked="checked"/>共享存储-->
<!--                <input type="radio" name="diskSr.type" value="1"/>单机存储-->
<!--            </td>-->
<!--          </tr>-->
        </tbody>

        <tr>
          <td colspan="2" class="toolbar">
              <input type="submit" class="inputButton" value=" 确 定 " />&nbsp;&nbsp;
            <input type="button" class="inputButton" value=" 取 消 "  onclick="window.location.href=‘diskSrList.action‘"/>
          </td>
        </tr>
      </table>
    </form>
<script type="text/javascript">

$(document).ready(function(){
    $("#fo").validate({
        rules: {
            "diskSr.pool.id":{required:true},
            "diskSr.host.id":{required:true},
            "diskSr.uuid":{required:true},
            "diskSr.nameLabel":{required:true,maxlength:64},
            "diskSr.serverIp":{required:true,maxlength:32},
            "diskSr.space":{required:true,max:60000,number:true},
            "diskSr.spaceHold":{required:true,max:60000,number:true},
            "diskSr.serverUser":{required:true},
            "diskSr.serverPsw":{required:true},
            "diskSr.status":{required:true}
        },
        errorPlacement: function(error, element){
         error.appendTo(element.parent());
        },
        errorElement:"span"
    });

    $(‘#fo‘).submit(function(){
        var tabSrUuid = $("#srUuid").val();
        var tabPoolId = $("#poolId").val();
        var flag = false;
        $.ajax({
              type: "POST",
              url: "ajaxSrExist.action",
              dataType: "json",
              data:{poolId:tabPoolId,srUuid:tabSrUuid},
              async: false,
              success: function(json){
                  if(json.flag == 0){
                    alert(json.srExist);
                    flag = false;
                }else{
                    flag = true;
                }
              }
        });
        return flag;
    });
});

</script>
<!-- ajax验证sr是否存在 -->
        <action name="ajaxSrExist" class="com.chinac.action.disk.DiskSrAction" method="ajaxSrExist">
        </action>

    public String ajaxSrExist(){
       try {

          TaskResult taskResult = diskProxyTask.staticRemainStorage(poolId, srUuid);
          if(!taskResult.isFlag()){
             JSONObject jsonObj = new JSONObject();
             jsonObj.put("flag", 0);
             jsonObj.put("srExist", "底层不存在该SR!");
             response.getWriter().print(jsonObj.toString());
          }

      } catch(Exception e) {
         e.printStackTrace();
      }

       return null;
    }

提交表单的时候加上Ajax验证

时间: 2024-08-29 10:28:19

提交表单的时候加上Ajax验证的相关文章

jquery+ajax验证不通过也提交表单问题处理

这篇文章主要介绍了jquery validationEngine中使用ajax验证不通过也提交表单问题处理,需要的朋友可以参考下 validationEngine给我们为前端的表单验证减少了很大的工作量.大部分情况我们使用validationEngine验证表单的形式有几种方式: 1 使用正常的表单提交.这种情况validationEngine验证不通过是不会提交表单的. 2 使用ajax提交表单,但是没有使用ajax验证. 这种方式也比较简单,在我们使用ajax请求前检查验证是否通过就可以,例

无法在提交表单前通过ajax验证解决办法

博主在一个小项目中,要实现注册表单无刷新验证用户名或密码,但是发现不管怎么样都无法在先通过ajax验证之前不提交表单. 例如:一个简单的验证函数 1 function check(){ 2 $.post("#name")("xxx.php",{user:user}function(msg){ 3 if(msg){return false;} 4 }) 5 } 1 <form class="form" method="post&qu

ajax提交表单

ajax提交表单在项目中常用,前台无论是简单的html.jsp或者是使用了easyui框架,提交表单都会使用到ajax,extjs框架其实也是使用了ajax只不过对其进行了封装了,我们使用的时候就更固定了些. 总的来说ajax提交表单可以分为两种,一种是无返回结果的,就是将表单数据提交给后台,后台处理完就完了:另一种就是有返回结果的,后台执行成功或失败的信息需要返回到前台. 1,无返回结果的 最简单的就是$("#formid").submit();直接将form表单提交到后台. 2,有

分针网—每日分享:ajax提交表单

ajax提交表单在项目中常用,前台无论是简单的html.jsp或者是使用了easyui框架,提交表单都会使用到ajax,extjs框架其实也是使用了ajax只不过对其进行了封装了,我们使用的时候就更固定了些. 总的来说ajax提交表单可以分为两种,一种是无返回结果的,就是将表单数据提交给后台,后台处理完就完了:另一种就是有返回结果的,后台执行成功或失败的信息需要返回到前台. 1. 无返回结果的 最简单的就是$("#formid").submit();直接将form表单提交到后台. 2.

前端笔记-jquery ajax提交表单

jquery ajax提交表单 最近才发现,jquery ajax提交表单可以这么简单 $.ajax({ url: "udpate", type:"POST", data:$('#formId').serialize(), success: function(data){ alert(data); }, error:function(data){ }}); } 关键在于data:$('#formId').serialize(),这里的formId就是表单的Id. 以

jQuery Validate【为表单提供了强大的验证功能,让客户端表单验证变得更简单】

jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 该插件是由 J?rn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要开发人员,是 QUn

解析:使用easyui的form提交表单,在IE下出现类似附件下载时提示是否保存的现象

原文:解析:使用easyui的form提交表单,在IE下出现类似附件下载时提示是否保存的现象 之前开发时遇到的一个问题,使用easyui的form提交表单,在Chrome下时没问题的,但是在IE下出现类似附件下载时提示是否保存的现象. 这里记录一下如何解决的.其实这个现象不光是easyui的form,还有其他一些form插件也是一样的,使用不当就会遇到这个问题. 前台: <!DOCTYPE html> <html> <head> <meta http-equiv=

JQuery 异步提交表单

1.使用post提交方式 2.构造表单的数格式 3.结合form表单的submit调用ajax的回调函数. 使用 jQuery 异步提交表单代码: 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无标题页</title> </head> <script src="js/jquery-1.4.2.js"></sc

Servlet提交表单的注解方式与xml的配置方式

最近在学习Struts这个框架,先从配置方式学起,这里又需要使用Servlet来进行比较,所以我记录一下Servlet中注解和xml的配置两种提交表单的方式,用验证用户名是否为空的例子给大家讲解一下. 一.注解方式,格式如下在Servlet类的上面写 1 @WebServlet("/login") 然后Servlet的注解写好后,在index,jsp中的表单写访问的路径 1 <form action="${pageContext.request.contextPath}