在此代码中，错误消息按警告框显示错误，但我想在特定文本框下方看到错误消息。意思是当我点击提交按钮哪个字段没有填写时，在该字段下面它应该在该字段下方显示消息。
并且还有一个问题，如果我没有填充单选按钮或复选框，其他所有都填写，当我点击提交按钮时，它存储在数据库中除了该收音机或复选框之外的所有细节。
所以我该如何解决呢？
感谢.....
<!DOCTYPE html>
<?php
session_start();
if (!isset($_SESSION['txt_user'])) {
header('Location: Login.php');
}
?>
<html>
<head>
<title> Form with Validation </title>
<script language="JavaScript">
var file_selected = false;
var file_selected1 = false;
function validform()
{
var x=document.forms["form1"]["tname"].value;//Name
var y=document.forms["form1"]["address"].value;//Address
var psel=document.getElementById('fp'); //Favourite place
var valid = false;
for(var i = 0; i < psel.options.length; i++) {
if(psel.options[i].selected) {
valid = true;
break;
}
}//Favourite place
if (x==null || x=="")
{
alert("Please Enter Name:");
//flag = 0;
}
if (y==null || y==" ")
{
alert("Please Enter Address");
}
if ((form1.gender[0].checked == false) && (form1.gender[1].checked == false))
{
alert("Pleae Select Gender");
}
if (form1.hobby.checked == false && form1.hobby.checked == false && form1.hobby.checked == false)
{
alert ('Please!!!, Select any hobby!');
}
if(valid==false)
{
alert("Please! Select Any Favourite Place ");
}
if(!file_selected)
{
alert('Please Select any Picture');
}
if(!file_selected1)
{
alert('Please Select any Document');
return false;
}
{
document.getElementById('data_form').action = "Data_con.php";
return false;
}
return false;
}
function Logout()
{
document.getElementById('data_form').action = "Logout.php";
}
</script>
</head>
<body>
<!--onsubmit="return validform()"-->
<form id="data_form" name="form1" method="post" enctype="multipart/form-data" action="">
<table align="center" border="2">
<tr>
<td>Name:</td>
<td><input type="text" name="tname"></td>
</tr>
<tr>
<td>Address:</td>
<td><textarea rows="3" cols="16" name="address"> </textarea> </td>
</tr>
<tr>
<td>Gender:</td>
<td> <input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
</td>
</tr>
<tr>
<td>Hobby:</td>
<td>
<input type="checkbox" name="hobby" value="hockey"> Hockey
<input type="checkbox" name="hobby" value="reading"> Reading<br>
<input type="checkbox" name="hobby" value="traveling"> Traveling
<br>
</td>
</tr>
<tr>
<td>Country: </td>
<td>
<select name="helo">
<option value="germany">Germany </option>
<option value="india" selected>India </option>
<option value="japan">Japan </option>
</select>
</td>
</tr>
<tr>
<td>Favourite Place:</td>
<td>
<select id="fp" name="place" multiple="multiple">
<option value="ahmedabad">Ahmedabad</option>
<option value="nadiad">Nadiad</option>
<option value="anand">Anand</option>
<option value="vadodara">Vadodara</option>
<option value="surat">Surat</option>
</select>
</td>
</tr>
<tr>
<td>Photo:</td>
<td><input type="file" onchange="file_selected=true;" name="pic" ></td>
</tr>
<tr>
<td>Resume:</td>
<td><input type="file" onchange="file_selected1=true;" name="doc" ></td>
</tr>
<tr>
<td colspan="2"><center>
<input type="submit" value="Submit" Name="Submit" onclick="validform();">
<input type="submit" value="Logout" Name="Submit" onclick="Logout();">
<center></td>
</tr>
</table>
</form>
</body>
</html>
答案 0 :(得分：1)
首先为每个输入字段创建具有不同ID的td
而非警告
document.getElementById('td id').innerHTML="your message";
return false;
<tr>
<td>Favourite Place:</td>
<td>
<select id="fp" name="place" multiple="multiple">
<option value="ahmedabad">Ahmedabad</option>
<option value="nadiad">Nadiad</option>
<option value="anand">Anand</option>
<option value="vadodara">Vadodara</option>
<option value="surat">Surat</option>
</select>
</td>
<td id="fp_error"></td>
</tr>
并在javascript中
document.getElementById('fp_error').innerHTML="your message";
return false;
答案 1 :(得分：0)
使用下面的演示代码下载jquery.js和jquery.validate.js并验证表单元素。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"> </script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.validate.js"> </script>
<script>
$('document').ready(function() {
$('#data_form').validate({
rules: {
'tname': {
required: true
},
'address': {
required: true
}
},
messages:{
'tname': {
required: 'Please Enter Name'
},
'address': {
required: 'Please Enter address'
}
}
});
});
</script>
这是更好的方式。易于实施，也节省了时间。