检查 HTML 表单中的空字段并在有空字段时显示消息框

Question

我正在做一个关于基于网络的系统的项目。我有一个表格，我想检查是否所有字段都已填写，但是当其中一个字段为空时，它将显示提示并且除非表格已完成，否则不会将数据记录到数据库中。如果字段为空，我可以显示提示，但即使其中一个或部分填充为空，它也会记录提供的数据。

这是我的html表单代码：

<script type='text/javascript'>
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
    alert(helperMsg);
    elem.focus();
    return false;
}
return true;
}

<form action="insert.php" method="post">
FNAME: <input type="text" name="fname" maxlength="50" id="required"/>
MNAME: <input type="text" name="mname" maxlength="50" id="required"/>
LNAME: <input type="text" name="lname" maxlength="50" id="required"/><br/>

Male <input type="radio" name="gender" value="male" /><br/>
Female <input type="radio" name="gender" value="female" /><br/>

College: 
<select name="college">
<option value="default"> --- </option>
<option value="CEC">CEC</option>
<option value="CAD">CAD</option>
<option value="COB">COB</option>
</select>
</br>

<input type="submit" name="formSubmit"    onclick="notEmpty(document.getElementById('required'), 'Please Enter a Value')"
value='SUBMIT'/>
</form> 

我的php代码：

<?php

$con = mysql_connect("localhost","abs","abs");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("testdb", $con);

$sql="INSERT INTO name (fname, mname, lname, gender, college)
VALUES
('$_POST[fname]','$_POST[mname]','$_POST[lname]','$_POST[gender]','$_POST[college]')";

if (!mysql_query($sql,$con))
  {
  die('Error: ' . mysql_error());
  }

echo "1 record added";

mysql_close($con)
?>

我无法让它工作。我是 php 新手。请帮我。非常感谢！！

Answer 1

您的代码有问题。您正在传递一个元素的 id 并想要检查所有元素。 所有字段的 ID 也是相同的。

给你推荐一个链接：http://www.javascriptkit.com/script/script2/formrequired.shtml

展示你想要的一个活生生的例子。您可以从这里获取代码并尝试。

Answer 2

您的函数正在返回一个值，但您没有使用它。

onclick="return notEmpty(...

错误的返回值将停止提交。

这就是表单仍然被提交到后端的原因。

此外，id 应该始终是唯一的。使用getElementById 只会返回一个元素，因此您实际上并没有检查所有必填字段。您可以改为分配一个 required 类并遍历元素。