在javascript验证后，表单未提交

Question

我在javascript验证后尝试提交的内容：

<form name="myForm" class="formcss" onsubmit="return validateForm();" method="POST" action="createProject3.php" id="reportform" enctype="multipart/form-data">
        <div id="project" class="small-9 large-9 columns">
        <label>Project <?php echo $code?></label>
            <div class="rowone">
                <div class="projLeader">
                <div class="ui-widget-content">
                <label>Captain:</label>
                    <ol>
                        <li class="placeholder" name="projLeader"><div class="adding">Drop Here</div></li>
                        <input type="hidden" name="projLeader" class="hiddenListInput1" required/>
                    </ol>
                </div>
                </div>

                <div class="projChecker">
                <div class="ui-widget-content">
                <label>Coordinator:</label>
                    <ol>
                        <li class="placeholder" name="projChecker"><div class="adding">Drop Here</div></li>
                        <?php 
                                //echo '<li class="dropClass" name="projChecker"> <span class="closer">x</span>'.$_SESSION['projChecker'].'</li>';
                        ?>
                        <input type="hidden" name="projChecker" class="hiddenListInput2" required/>
                    </ol>
                </div>
                </div>

                <div class="info">
                <div class="ui-widget-content">
                <label>Information:</label>
                    <ol>
                        <li class="totalinfo">Total: </li>
                        <li class="leaderinfo">Leaders:</li>
                        <li class="checkerinfo">Checkers:</li>
                        <li>Interns:</li>
                        <li>Artists:</li>
                    </ol>
                </div>
                </div>
            </div>
            <div class="rowtwo">
            <?php 
                        for($y=0;$y<$len;$y++)
                        {   
                            echo "<div class='proc'> <pre>";
                            echo "<h6>Process: ".$proc[$y]."      "   ;
                            echo "People required: ".$num[$y]."      "; 
                            echo "<span class='assigned' name='assigned[]' >People Assigned: </span><br /></h6></pre>"; 
                    ?>

                    <div class="procLeader">
                    <div class="ui-widget-content">
                    <label>Leader:</label>  
                        <ol>
                            <li class="placeholder"><div class="adding">Drop Here</div></li>
                        </ol>
                    </div>
                    </div>

                    <div class="procChecker">
                    <div class="ui-widget-content">
                    <label>Checker:</label>
                        <ol>
                            <li class="placeholder"><div class="adding" >Drop Here</div></li>
                        </ol>
                    </div>
                    </div>

                    <div class="procStaff">
                    <div class="ui-widget-content">
                    <label>Staff:</label>
                        <ol>
                            <li class="placeholder"><div class="adding">Drop Here</div></li>
                        </ol>
                    </div>
                    </div>                      

                    <?php       
                        echo "</div>";                      
                        }
                    ?>

            </div>      
            <div class="row">
                <div class="small-6 large-6 columns">
                    <input type = "submit" style="margin-left:300px; width:150px;" id="savebutton" name ="submit" class="button" value = "Create Project" onclick="userSubmitted = true;"/>

                </div>
            </div>              
            <div class="output1"></div> 
            </br></br></br>             
            <div class="output2" onsubmit="return validateForm()"></div>    
            <div class="output3"></div>                 
        </div>  

    </fieldset>
</form>

用于验证的javascript函数：

function validateProjLeader()
{
    var projLeader = document.forms["myForm"]["projLeader"].value;
    if (projLeader == null || projLeader == "" || projLeader == "Drop Here") {

        return false;
    }       
}

function validateProjChecker()
{
    var projChecker = document.forms["myForm"]["projChecker"].value;
    if (projChecker == null || projChecker == "" || projChecker == "Drop Here") {

        return false;
    }       
}   

function validateProcLeader()
{
    var procLeader = document.getElementsByName("procLeader[]");
    for (var x = 0; x < procLeader.length; x++) {

        if(procLeader[x].value == '' || procLeader[x].value == '0' || procLeader[x].value == 'Drop Here'){

            return false;
        } else {return true;} 
    }
}

function validateProcChecker()
{
    var procChecker = document.getElementsByName("procChecker[]");
    for (var y = 0; y < procChecker.length; y++) {

        if(procChecker[y].value == '' || procChecker[y].value == '0' || procChecker[y].value == 'Drop Here'){

             return false;
        } else {return true;} 
    }
}

function validateForm()
{   var validation = true;  //<-- set to true
    if ((validateProjLeader() && validateProjChecker() && validateProcLeader && validateProcChecker())== true)

    return validation;  //<--- returns true
    else 
        alert('Please fill All Required Fields Checker Field');
//<-- if false you do not return anything
}   

我在表单中尝试了不同的方法：

onsubmit="return!!(validateProjLeader() & validateProjChecker() & validateProcLeader() & validateProcChecker());"

还

onsubmit="return validateForm()"

对于第一个我得到了所有验证，但表单未提交，它只是保持在同一页面而不进入下一页。此外，我对每个不友好的字段都有警报，因此我尝试将所有功能组合在一个内部并打印有关所有错误的整体警报。但似乎这种方式也不起作用。我如何在提交表单上组合几个函数，然后进入另一个页面？

Answer 1

尝试在validateForm（）中调用form.submit而不是返回true。