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。