Проверьте пустые поля в форме 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

Что-то не так в вашем коде. Вы передаете идентификатор одного элемента и хотите проверить все элементы. Также идентификатор всех полей одинаков.

Предлагаю вам ссылку: http://www.javascriptkit.com/script/script2/formrequired.shtml

показывает живой пример того, что вы хотите. Вы можете взять код отсюда и попробовать.

Answer 2

Ваша функция возвращает значение, но вы его не используете.

onclick="return notEmpty(...

Ложное возвращаемое значение остановит отправку.

Это причинаформа все еще отправляется на сервер.

Кроме того, id всегда должен быть уникальным.Использование getElementById вернет вам только один элемент, поэтому вы на самом деле не проверяете все необходимые поля.Вместо этого вы можете назначить класс required и зациклить элементы.