PHP MySQLi插入数据验证

Question

I am working on a simple PHP code to insert data to the database, and I want to show a popup message that there are empty inputs, I tried using java script function as shown below but it didn't work, when I click insert it only shows this error: Undefined index: fname, and it insert empty value in the database.

<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "")
{
    alert("Name must be filled out");
    return false;
}}
</script>

<form name="myForm" action="test.php" method ="post"  autocomplete="off">
<div align='center'>
<div id="main">
<br>
<b>ادخل اسمك:</b> <input type="text" name="fname" value=""><br>
</html>
<?php
if(isset($_POST['submit'])  && !empty($_POST))
{
$Name = $_POST['fname'];
$SQL = "INSERT INTO userTable (user_name) VALUES ('$Name')";

if ($conn->query($SQL) === TRUE) {

header("Location: test2.php"); /* Redirect browser */
exit();
} else {

echo '<script type="text/javascript">',
 'validateForm();',
 '</script>';
} 
$conn->close();
}
?> 

Answer 1

Where do you use your validateForm() function? I suppose you use it in a submit button with onclick method, or something like this. But your return false doesn't work in function because form still send all the data. You should add return in method like this:

<form name="myForm" onsubmit="return validateForm()" action="test.php" method ="post"  autocomplete="off">

So your form will get return false from function validateForm and will stop sending a form.