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

Question

I'm having a problem where Once I put "return validation()" in my submit button, The button won't submit. But the validation is working fine. Is there anyway to bypass this so that javascript can validate my file and then submit the form?

This is my 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>

And this is my html, When I put return in front of

        <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

You can create a variable inside the validate function and submit the form only in case of valid data:

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;
}

Also change the <'form and the <button lines to this:

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

Answer 2

You should try:

<form onSubmit = "return validate()"

And also you need to wrap return false in the if cases like:

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;
    }

}