0

このコードでは、エラーメッセージはアラートボックスでエラーを示していますが、特定のテキストボックスの下にエラーメッセージを表示したい. つまり、入力されていないフィールドの送信ボタンをクリックすると、そのフィールドの下にメッセージが表示されます。

また、ラジオボタンまたはチェックボックスを入力せず、他のすべてが入力され、送信ボタンをクリックすると、ラジオまたはチェックボックスを除く他のすべての詳細がデータベースに保存される場合、1つの問題があります。

どうすれば解決できますか

ありがとう.....

<!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>
4

2 に答える 2

1

tdまず、入力フィールドごとに異なるIDを持つを作成します

アラートの代わりに

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;
于 2013-03-20T07:18:32.307 に答える
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>

それはより良い方法です。実装が簡単で、時間も節約できます。

于 2013-03-20T07:26:35.393 に答える