Onsubmit Event do form validation in PHP

Question

I have a HTML/PHP form that needs validation of each of the entered fields before updating MySQL database. It would be nice if this cold be done as each field is entered...however, I could use the form's action attribute to run a different validation script but then if there are errors I would need to return to the form and re-populate it with previously entered data for correction - not sure how I would do all this but I guess it's possible. However, I've seen a post here that shows how this can be done with a javascript function for the validation but is this possible to do in PHP? I'm just learning PHP so I'd hate to now have to also learn javascript :( Some guidance appreciated.

    <?php
  if(isset($_POST)) {
      echo __LINE__ . " Form has been posted <br>";
      echo __LINE__ . $_POST['state_city'];
     }
?>

<form action="" method="post">
<table border="0" align="center">
    <tr height="29px" width = "220px">
        <td>
            <label for="student_id"><b>Student-ID</b></label>
        </td>
        <td>
            <input type="text" placeholder="Student ID" name="studentid" value="<?php echo $row['studentid'];?>" required>
        </td>
  </tr>

    <tr height="29px" width = "220px">
        <td>
            <label for="student_name"><b>Student name</b></label>
        </td>
        <td>
            <input type="text" placeholder="Student name" name="name" value="<?php echo $row['$studentname'];?>" required>
        </td>
   </tr>

<tr height="29px" width = "220px"><td><label for="start_date"><b>Start Date</b></label></td>
 <td><input type="date" placeholder="Enter start date" name="start_date" value="<?php echo $row['startdate'];;?>" required></td>
</tr>


    <tr height="29px"><td width = "220px">
        <b>Student Grade</b></td>
        <td>
            <select name="sgrade" id="sgrade">
                <option value="1" <?php if ($row['$sgrade'] == '1') echo "selected"; ?>>Grade 1<option>
                <option value="2" <?php if ($row['$sgrade'] == '2') echo "selected"; ?>>Grade 2<option>
                <option value="3" <?php if ($row['$sgrade'] == '3') echo "selected"; ?>>Grade 3<option>
                <option value="4" <?php if ($row['$sgrade'] == '4') echo "selected"; ?>>Grade 4<option>
            </select>
        </td>
    <tr>

    // value?
    <tr height="29px"><td width = "220px"><b>Country of Birth</b></td>
        <td>
            <select name="country" id="country">
            <?php
                $sql = "SELECT * FROM countries";
                $result = mysqli_query($con, $sql);
            ?>
          
            <?php
                while ($row = mysqli_fetch_array($result)) {
                    echo "<option value='" . $row['id'] . "'>" . $row['name'] . "</option>";

                }
            ?>
            </select>
            <?php
            mysqli_free_result($result);
            mysqli_close($con);
            ?>
        </td>
    </tr>

<tr height="29px" width = "220px">
    <td><label for="state_city"><b>State and/or main city</b></label></td>
    <td><input type="text" placeholder="Student State and/or Main City" name="state_city" value="<?php echo $row['$state_city'];?>" required></td>
</tr>

<tr height="29px" width = "220px">
        <td><label for="healthcheck"><b>Checked?</b></label></td>
            <td>
                <input type="radio" id="checkyes" name="check" value="1" <?php if ($row['check']) echo "checked";?>>
                <label for="checkyes"> Yes</label><br>
                <input type="radio" id="checkno" name="check" value="0" <?php if (!$row['check']) echo "checked";?>>
                <label for="checkno"> No</label><br><br>
            </td>
        </tr>

</table>
    <button type="submit">Save</button>
    <div class="container" style="background-color:#f1f1f1">
      <button type="button" onclick="history.back()" value="Go back!" class="cancelbtn">Cancel</button>
    </div>
</form>

<script>
function check() {
  document.getElementById("checkyes").checked = true;
}
function uncheck() {
  document.getElementById(hcheckyes").checked = false;
}
</script>

</body>
</html>

Answer 1

If you want it to be dynamic as the user enters the information you will have to use JavaScript as that would be a front-end solution. With PHP you can do you validation/sanitizing of the data on the server-side as the form is submitted. It is suggested you do both.

For your question of repopulating this is one way
<input type="text" name="name" value="<?php echo htmlspecialchars($_POST['name'] ?? '', ENT_QUOTES); ?>">

For more info : click here