2 crystal qin Crystal_Qin 于 2015.07.22 22:28 提问

onsubmit和onblur共存的时候,部分标签的onsubmit的效果没有是怎么回事?

JS中的代码如下:

 function checkForm(){
        var flag=true;
        var  project = document.getElementById("project"); 
        var  reference = document.getElementById("reference"); 
        if(project.value==0){
            reference.innerHTML="*请选择参考位置";
            project.focus();
              flag=false;
           }
        var  req = document.getElementById("req"); 
        if(req.value == 0){
            req.focus();
            reference.innerHTML="*请选择参考位置";
             flag=false;
           }
        var  unit = document.getElementById("unit"); 
        if(unit.value == 0){
            unit.focus();
            reference.innerHTML="*请选择参考位置";
             flag=false;
           }
        var  func = document.getElementById("func"); 
        if(func.value == 0){
            func.focus();
            reference.innerHTML="*请选择参考位置";
             flag=false;
           }
        var  title = document.getElementById("title"); 
        var  name = document.getElementById("name"); 
        if(name.value == ""||name.value == null){
            name.focus();
            title.innerHTML="*请填写任务标题";
             flag=false;
           }
        var  startTime = document.getElementById("startTime"); 
        var  time1 = document.getElementById("time1"); 
        if(startTime.value == ""||startTime.value == null){
            startTime.focus();
            time1.innerHTML="*请选择开始时间";
             flag=false;
           }
        var  endTime = document.getElementById("endTime"); 
        var  time2 = document.getElementById("time2"); 
        if(endTime.value == ""||endTime.value == null){
            endTime.focus();
            time2.innerHTML="*请选择结束时间";
             flag=false;
           }
        var  empId = document.getElementById("empId"); 
        var  taker = document.getElementById("taker"); 
        if(empId.value ==0){
            empId.focus();
            taker.innerHTML="*请选择执行者";
             flag=false;
           }
        var  priority = document.getElementById("priority"); 
        var  super0 = document.getElementById("super0"); 
        if(priority.value ==0){
            priority.focus();
            super0.innerHTML="*请选择优先级";
             flag=false;
           }
        var  detailedDescribe = document.getElementById("detailedDescribe"); 
        var  dDescribe = document.getElementById("dDescribe"); 
        if(detailedDescribe.value ==0){
            detailedDescribe.focus();
            dDescribe.innerHTML="*请填写详细描述";
             flag=false;
           }
        return flag;
    }

    function checkForm2(){
        var  reference = document.getElementById("reference"); 
        var  func = document.getElementById("func"); 
        if(func.value != 0){
            reference.innerHTML="*";
           }

        var  title = document.getElementById("title"); 
        var  name = document.getElementById("name"); 
        if(name.value != ""||name.value != null){
            title.innerHTML="*";
           }
        var  startTime = document.getElementById("startTime"); 
        var  time1 = document.getElementById("time1"); 
        if(startTime.value != ""||startTime.value != null){
            time1.innerHTML="*";
           }
        var  endTime = document.getElementById("endTime"); 
        var  time2 = document.getElementById("time2"); 
        if(endTime.value != ""||endTime.value != null){
            time2.innerHTML="*";
           }
        var  empId = document.getElementById("empId"); 
        var  taker = document.getElementById("taker"); 
        if(empId.value !=0){
            taker.innerHTML="*";
           }
        var  priority = document.getElementById("priority"); 
        var  super0 = document.getElementById("super0"); 
        if(priority.value !=0){
            super0.innerHTML="*";
           }
        var  detailedDescribe = document.getElementById("detailedDescribe"); 
        var  dDescribe = document.getElementById("dDescribe"); 
        if(detailedDescribe.value !=0){
            dDescribe.innerHTML="*";
           }    
    }

form中的代码:

 <form name="form2" id="form2" action="missionServlet?method=toAdd2" method="post" onsubmit="return checkForm()">

        <table width="98%" border="0" cellpadding="2" cellspacing="1"
            bgcolor="#D1DDAA" align="center" style="margin-top:8px">
            <tr bgcolor="#E7E7E7">
                <td height="24" colspan="2" background="skin/images/tbg.gif">&nbsp;创建任务&nbsp;
                <span style="color: red; font-weight: bold;">[以下带*的均为必填项]</span></td>
            </tr>
            <tr>
                <td align="right" bgcolor="#FAFAF1" height="22">参考位置:</td>
                <td align='left' bgcolor="#FFFFFF"
                    onMouseMove="javascript:this.bgColor='#FCFDEE';"
                    onMouseOut="javascript:this.bgColor='#FFFFFF';" height="22">
                    <select style="width: 200px;" id="project" name="project" onchange="change(this);" >
                        <option value=0>请选择</option>
                            <c:forEach items="${ps }" var="p">
                                <option value=${p.id }>${p.name }</option>
                            </c:forEach>
                    </select> 
                    <span style="color: red;">*</span>
                    -
                    <select id="req" name="req" onchange="change2(this);" onblur="checkForm2();">
                            <option value=0>请选择</option>
                    </select> 
                    <span style="color: red;">*</span>
                    - 
                    <select id="unit" name="unit" onchange="change3(this);" onblur="checkForm2();">
                            <option value=0>请选择</option>
                    </select> 
                    <span style="color: red;">*</span>
                    - 
                    <select id="func" name="func" onblur="checkForm2();">
                            <option value=0>请选择</option>
                    </select>
                    <span id="reference" style="color: red;">*</span>
                </td>

            </tr>
            <tr>
                <td align="right" bgcolor="#FAFAF1" height="22">任务标题:</td>
                <td align='left' bgcolor="#FFFFFF"
                    onMouseMove="javascript:this.bgColor='#FCFDEE';"
                    onMouseOut="javascript:this.bgColor='#FFFFFF';" height="22"><input
                    name="name" id="name"  onblur="checkForm2();"/> <span id="title" style="color: red;">*</span></td>
            </tr>
            <tr >
                <td align="right" bgcolor="#FAFAF1" height="22">开始时间:</td>
                <td  align='left' bgcolor="#FFFFFF" onMouseMove="javascript:this.bgColor='#FCFDEE';" onMouseOut="javascript:this.bgColor='#FFFFFF';" height="22">
                <input type="text" id="startTime" name="startTime" onblur="checkForm2();"/>
                <span id="time1" style="color: red;">*</span>
            </td>
            </tr>
            <tr >
                <td align="right" bgcolor="#FAFAF1" height="22">结束时间:</td>
                <td  align='left' bgcolor="#FFFFFF" onMouseMove="javascript:this.bgColor='#FCFDEE';" onMouseOut="javascript:this.bgColor='#FFFFFF';" height="22">
                <input type="text" id="endTime" name="endTime" onblur="checkForm2();"/>
                <span id="time2" style="color: red;">*</span>
            </td>
            </tr>
            <tr>
                <td align="right" bgcolor="#FAFAF1" height="22">执行者:</td>
                <td align='left' bgcolor="#FFFFFF"
                    onMouseMove="javascript:this.bgColor='#FCFDEE';"
                    onMouseOut="javascript:this.bgColor='#FFFFFF';" height="22"><select
                    name="empId" id="empId" onblur="checkForm2();">
                        <option value=0>--请选择--</option>
                        <c:forEach items="${ers }" var="er">
                            <c:if test="${er.role.id>1&&er.role.id<6 }">
                                <option value="${er.emp.id }">${er.emp.name }--${er.role.rolename }</option>
                            </c:if>
                        </c:forEach>
                </select>
                <span id="taker" style="color: red;">*</span>
                </td>
            </tr>
            <tr>
                <td align="right" bgcolor="#FAFAF1" height="22">优先级:</td>
                <td align='left' bgcolor="#FFFFFF"
                    onMouseMove="javascript:this.bgColor='#FCFDEE';"
                    onMouseOut="javascript:this.bgColor='#FFFFFF';" height="22"><select
                    name="priority" id="priority" onblur="checkForm2();">
                        <option value="0">--请选择--</option>
                        <option value="1">紧急</option>
                        <option value="2">高</option>
                        <option value="3">中</option>
                        <option value="4">低</option>
                </select>
                    <span id="super0" style="color: red;">*</span>
                </td>
            </tr>

            <tr>
                <td align="right" bgcolor="#FAFAF1">详细说明:</td>
                <td colspan=3 align='left' bgcolor="#FFFFFF"
                    onMouseMove="javascript:this.bgColor='#FCFDEE';"
                    onMouseOut="javascript:this.bgColor='#FFFFFF';">
                    <span id="dDescribe" style="color: red;">*</span>
                    <textarea class="ckeditor" name="detailedDescribe" id="detailedDescribe"  rows=10 cols=120 onblur="checkForm2();"></textarea>

                </td>
            </tr>
            <tr bgcolor="#FAFAF1">
                <td height="28" colspan=4 align=center>&nbsp; 
                <input type="submit" value="创建"/>
                </td>
            </tr>
        </table>
    </form>

运行结果是:
任务标题+开始时间+结束时间在formCheck()中的功能消失了(即form表单什么都不填写的话,除这三个之外的都会显示提示语)

跪谢:新人,我会多多攒币回报你们的。。。。。现在很穷,请大家担待。。。。。。。。。。。

2个回答

devmiao
devmiao   Ds   Rxr 2015.07.22 23:15
showbo
showbo   Ds   Rxr 2015.07.23 10:24

你的表单检查调用那么多focus干嘛,还不是最后那个调用focus的控件获取焦点,从而导致之前的控件focus后又blur的执行了blur事件导致出现你的这个问题

要么你就增加一个变量判断是表单提交检查的就不执行blur检查

         var submitCheck = false;
        function checkForm() {
            submitCheck = true;///
                        //...
                        //..原来的代码
                        submitCheck = false;
            return flag;
        }

        function checkForm2() {
            if (submitCheck) return;
                        //...原来的代码
            }
Csdn user default icon
上传中...
上传图片
插入图片