如何配置提交按钮，使其可以提交已验证的表单？

Question

我遇到了一个问题，一旦我在提交按钮中放置了“返回验证（）”，按钮就不会提交。 但验证工作正常。 无论如何要绕过这个，以便javascript可以验证我的文件然后提交表单？

这是我的javascript：

function validate()
{

    var username = document.getElementById("name");
    var img = document.getElementById("image");


    if(username.value.trim()=="")
    {
        var myDiv = document.getElementById("error");
        myDiv.innerHTML = "Username Not Entered";
    }

    else if (img.value.trim()=="")

    {
        var myDiv = document.getElementById("error");
        myDiv.innerHTML = "Please Select an image";
    }

    return false;


}


</script>

这是我的 html，当我把 return 放在前面时

        <div class="add-form">
            <h1 class="text-center"><font face="fantasy">Please Insert new image</font></h1>
            <form onSubmit = "validate()" method="post" enctype="multipart/form-data" id="FormID">
                <label>User Name</label>
                <input id = "name" type="text" name="user_name" class="form-control">
                <label>Select image to upload</label>
                <input id = "image" type="file"  onchange ="unlock()" name="profile" class="form-control2" accept="*/image">
                <button type="submit" value = "submit" name="btn-add">upload</button>
                <div id = "error">Please fill up the username and select and image</div>

            </form>
        </div>
        <hr style="border-bottom: 5px blue solid;">
    </div> 
<!-- end form insert -->
<!-- view form -->
<div class="container">
    <div class="view-form">
        <div class="row">
        <?php 
            $stmt=$db_conn->prepare('SELECT * FROM tbl_user ORDER BY id DESC');
                $stmt->execute();
                if($stmt->rowCount()>0)
                {
                    while($row=$stmt->fetch(PDO::FETCH_ASSOC))
                    {
                        extract($row);
                        ?>

            <div class="col-sm-3">
            <img src="uploads/<?php echo $row['picprofile']?>"><br><br>
            <a class="btn btn-info" href="edit_form.php?edit_id=<?php echo $row['id']?>" title="click for edit" onlick="return confirm('Sure to edit this record')"><span class="glyphicon glyphicone-edit"></span>Edit</a>
            <a class="btn btn-danger" href="?delete_id=<?php echo $row['id']?>" title="click for delete">Delete</a>

            </div>

            <?php 

                }
            }
            ?>
        </div>

    </div>
</div>
<!-- end view form -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

Answer 1

您可以在validate函数中创建一个变量并仅在数据有效的情况下提交表单：

function validate()
{
    var username = document.getElementById("name");
    var img = document.getElementById("image");
    var myDiv = document.getElementById("error");

    let valid = true;

    if(username.value.trim()=="")
    {
        myDiv.innerHTML = "Username Not Entered";

        valid = false;
    }
    else if (img.value.trim()=="")
    {
        myDiv.innerHTML = "Please Select an image";

        valid = false;
    }

    if(valid)
    {
        document.getElementById('FormID').submit();
    }

    return false;
}

还将<'form和<button行更改为：

<form method="post" enctype="multipart/form-data" id="FormID">
...
<button type="submit" value = "submit" name="btn-add" onClick = "validate()">upload</button>

Answer 2

你应该试试：

<form onSubmit = "return validate()"

而且您还需要在 if 情况下包装return false ，例如：

function validate()
{

    var username = document.getElementById("name");
    var img = document.getElementById("image");


    if(username.value.trim()=="") {
        var myDiv = document.getElementById("error");
        myDiv.innerHTML = "Username Not Entered";
        return false;
    }
    else if (img.value.trim()=="") {
        var myDiv = document.getElementById("error");
        myDiv.innerHTML = "Please Select an image";
        return false;
    }

}