onsubmit 事件不适用于异步表单提交

onsubmit event not working for asynchronous form submit

本文关键字：异步 表单提交 适用于 不适用 事件 onsubmit      更新时间：2023-09-26

我使用struts标签创建了一个表单。我已经使用struts jQuery的提交标签异步提交了表单。现在，在我提交表单之前，我想调用一个JavaScript函数checkUser()，该函数检查是否存在某些客户端错误并阻止表单提交。带有 JavaScript 函数的表单如下：

<script type="text/javascript">
    function loadXMLDoc() {
        
        var xmlhttp;
        var k = document.getElementById("register_userDetails_username").value;
        
        var urls = "pass.jsp?ver=" + k;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4) {
                document.getElementById("err1").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET", urls, true);
        xmlhttp.send();
    }
</script>
<script type="text/javascript">
      function checkuser() {
          alert("hi");  
            var i = document.getElementById('err1').innerHTML.search("Unavailable");
            alert(i);
            var j= document.getElementById('err1').innerHTML.search("Min length:8");
            alert(j);
            if (i!= -1 || j!=-1) {
                alert("hello");
                return false;
            } 
            alert("false");
            return false;
      } 
     
</script>

    
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<jsp:include page="menubar.jsp"></jsp:include>
<s:form action="register" method="post" theme="css_xhtml" cssClass="form1" style="margin:8px 211px" onsubmit="return checkuser()">
    <div class="searchHeader">Sign Up</div>  
    <div id="passwordMatchError">
        <s:property value="error"/>
    </div>
    <s:textfield label="Name" name="userDetails.name" maxlength="30"/>
    <s:textfield label="Username"  name="userDetails.username" onkeyup="loadXMLDoc()" maxlength="30">
        <div id="err1"></div>
    </s:textfield> 
    <s:password label="Password" name="userDetails.password" maxlength="45"/>
    <s:hidden name="userDetails.role" value='U' />
    <s:password name="confirmPassword" label="Confirm Password" maxlength="45"/>
    <s:radio label="Sex" name="userDetails.sex" list="#{'M':'Male','F':'Female'}" />
    <s:textfield label="Phone No" name="userDetails.phoneno" maxlength="10"/>
    <s:textfield label="E-mail" name="userDetails.email" maxlength="45"/>
    <div id="submitdivid"> 
        <sj:submit value="SUBMIT" cssClass="orangebuttonsmall" targets="mainContent" id="sas" />
    </div>
</s:form>

现在，当我在数据库中已经存在的用户名字段中输入一些值时，它会在div 中显示字符串Unavailable，其 id 为 err .

关于onsubmit形式的事件，我调用了checkuser方法。但是有了sj:submit，onsubmit事件不起作用。谁能帮我打电话 使这个onsubmit工作 我的目的是防止表单提交，如果div err 中存在字符串Unavailable或Min Length:8。任何替代解决方案也被接受。

在头脑中：

<script type="text/javascript">
    $.subscribe('beforeSubmit', function(event,data) {
        event.originalEvent.options.submit = checkuser();          
    });
</script>

在您的代码中：

<sj:submit value = "SUBMIT" 
        cssClass = "orangebuttonsmall" 
         targets = "mainContent" 
              id = "sas" 
  onBeforeTopics = "beforeSubmit"
/>
相关文章：