JS-检查表格是否填写完整

Question

I would like some help with my form. Currently, when the user submits the form, the form gets self-submitted (into main.php). I would like to perform a pre-check before submitting to see if the form is completely filled out.

Here is my HTML for the form:

<div id="reqForm" class="modal">
                <div class="modal-content">
                <div class="modal-header">
                    <span class="close">&times;</span>
                    <h2>Reimbersement Form</h2>
                </div>
                <div class="modal-body">
                    <div class="form">
                        <h2>Enter your information:</h2>
                        <br/>
                        <h3>
                        <form action="main" method="post" id="newRequest">
                            <label>Full Name:</label> <input type="text" name="name" value="<?php echo $name; ?>" disabled/><br />

                            <label>Reimberse Amount:</label> <input type="number" min="0" name="amount" /><br />
                            Customer Name: <select name="customerName" id="cN"><option value="" id='cPlSe' selected>--Select--</option><?php 
                            echo $optionC;
                            ?></select><br />Project Name: <select name="projectName" id="pN"><option value="" id='plSe' selected>Please select customer name </option><option value="">--Select--</option><?php
                            echo $optionP;
                            ?></select><br />
                            <label>Reason (max length 255 characters): </label><br /><textarea cols="40" rows="1" form="newRequest" name="reason"></textarea><br /> 
                            <input type="hidden" name="submitted"/>

                        </h3>
                    </div>
                </div>
                <div class="modal-footer"><br />
                    <input type="submit" id="submit"/>
                    </form>
                </div>
              </div>
            </div>

and my PHP:

if(isset($_POST["submitted"])){
                    $name = $_SESSION["name"];
                    $amount = $_POST["amount"];
                    $projectName = $_POST["projectName"];
                    $customerName = $_POST["customerName"];
                    $reason = $_POST["reason"];
                    $d = array("name"=>$name,"amount"=>$amount,"projectName"=>$projectName,"customerName"=>$customerName,"reason"=>$reason);

                    foreach($d as $i) {
                        if("" == trim($i)) {
                            echo "Make sure you have filled out all the fields. Click <a href='main'>here</a> to go back.";
                            exit();
                        }
                    }


                    foreach($d as $i) {
                        mysqli_real_escape_string($connect, $i);
                    }
                    $name = $d["name"];
                    $amount = $d["amount"];
                    $projectName = $d["projectName"];
                    $customerName = $d["customerName"];
                    $reason = $d["reason"];

                    $query = "INSERT INTO `requests` (`Name`, `Amount`, `ProjectName`, `CustomerName`, `Reason`) VALUES " . "('" . $name . "', '" . $amount . "', '" . $projectName . "', '" . $customerName . "', '" . $reason."');";

                    if (mysqli_query($connect, $query)) {
                        echo "Success!";
                    } else {
                        echo "Error: " . $query . "<br>" . mysqli_error($connect);
                    }
                }

Note: I am using a modal for the form as seen in https://www.w3schools.com/howto/howto_css_modals.asp

Answer 1

<input required></input>

您可以使用输入标签的“必需”属性

Answer 2

Hi if you can use third party libraries I suggest to use the parsleyJs. With that you can use the

$('form').parsley().validate() to check if the form is valid.

And if you want to check that everything is filled you need to use the required tag and also you can use other types and tags https://www.w3schools.com/html/html_form_input_types.asp