javascript - Javascript フォーム (ラジオボタン付き) の検証が機能しない

Question

このコードは今日の初めに機能していましたが、ランダムに停止しました。何かを変更する必要がありますが、何が変わったのかわかりません-以下を参照してください:

**更新 - 以下のコードの更新。ラジオボタンがオンになっているかどうかを正しく認識するようになりましたが、アラートが表示された後にユーザーがフォームを再送信しようとすると、認識された状態が更新されません。ある種のループが必要ですか？

  function checkForm()
{
var x=document.forms["sdcomp"]["name"].value;
if (x==null || x=="")
{
alert("Name must be filled out");
return false;
}
var x=document.forms["sdcomp"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Please enter a valid e-mail address");
return false;
}
if (document.getElementById("questionone").checked==false)
{
alert("Question one must be completed");
return false;
}
if (document.getElementById("questiontwo").checked==false)
{
alert("Question two must be completed");
return false;
}
if (document.getElementById("questionthree").checked==false)
{
alert("Question three must be completed");
return false;
}
if (document.getElementById("questionfour").checked==false)
{
alert("Question four must be completed");
return false;
}
}

フォームの最初の質問の例:

<tr>
<td class="question" colspan="4"><p class="question">Usain Bolt is the current world     record holder for the men's 100 meters, but what is his best time?</p></td>
</tr>

<tr>
<td class="answer">8.45 seconds<input type="radio" value="Aone" name="Qone"    id="questionone"></td>
<td class="answer">9.58 seconds<input type="radio" value="Atwo" name="Qone" id="questionone"></td>
<td class="answer">10.12 seconds<input type="radio" value="Athree" name="Qone" id="questionone"></td>
<td class="answer">9.32<input type="radio" value="Afour" name="Qone" id="question one">
   </td>
</tr>

** * **以下の新しいコードを更新:** * ** * ** * ** *

<link rel="stylesheet" href="style.css" type="text/css">
<!-- inclusion of fb config -->

<?php require_once('config.php'); ?>

<!-- client side validation for text fields -->

<script language="JavaScript" type="text/javascript">

function checkForm()
{
var x=document.forms["sdcomp"]["name"].value;
if (x==null || x=="")
{
alert("Name must be filled out");
return false;
}
var x=document.forms["sdcomp"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Please enter a valid e-mail address");
return false;
}
/* HERE */
function isAnswered(name) {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
    var input = inputs[i];
    if ((input.name === name) && (input.checked)) {
        return true;
    }
}
return false;
}
if (!isAnswered("Qone")) {
alert("Question one must be completed");
return false;
}
if (!isAnswered("Qtwo")) {
alert("Question two must be completed");
return false;
}
if (!isAnswered("Qthree")) {
alert("Question three must be completed");
return false;
}
if (!isAnswered("Qfour")) {
alert("Question four must be completed");
return false;
}
}
</script>


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

mysql_select_db("sdfbcomp", $con);

// some code
?>

<?php 
$name = $_POST["name"];
$email = $_POST["email"];
$Qone = $_POST["Qone"];
$Qtwo = $_POST["Qtwo"];
$Qthree = $_POST["Qthree"];
$Qfour = $_POST["Qfour"];
?>
</head>
<body>
<div id="tablediv">
<table id="comptable">

<form name="sdcomp" method="post" action="insert.php" onSubmit="return checkForm();">



<tr class="userdetailfields">
<p>Name:</p><input type="text" size="12" maxlength="12" name="name"></br>
</tr>

<tr class="userdetailfields">
<p>Email:</p><input type="text" size="12" maxlength="30" name="email"></br>
</tr>

<tr>
<td class="question" colspan="4"><p class="question">Usain Bolt is the current world record holder for the men's 100 meters, but what is his best time?</p></td>
</tr>

<tr>
<td class="answer">8.45 seconds<input type="radio" value="Aone" name="Qone" id="questionone"></td>
<td class="answer">9.58 seconds<input type="radio" value="Atwo" name="Qone" id="questionone"></td>
<td class="answer">10.12 seconds<input type="radio" value="Athree" name="Qone" id="questionone"></td>
<td class="answer">9.32<input type="radio" value="Afour" name="Qone" id="question one">    </td>
</tr>

<tr>
<td class="question" colspan="4"><p class="question">Question two:</p></td>
</tr>

<tr>
<td class="answer">Answer one<input type="radio" value="Bone" name="Qtwo" id="questiontwo"></td>
<td class="answer">Answer two<input type="radio" value="Btwo" name="Qtwo" id="questiontwo"></td>
<td class="answer">Answer three<input type="radio" value="Bthree" name="Qtwo" id="questiontwo"></td>
<td class="answer">Answer four<input type="radio" value="Bfour" name="Qtwo" id="questiontwo"></td>
</tr>

<tr>
<td class="question" colspan="4"><p class="question">Question three:</td></p>
</tr>

<tr>
<td class="answer">Answer one<input type="radio" value="Cone" name="Qthree" id="questionthree"></td>
<td class="answer">Answer two<input type="radio" value="Ctwo" name="Qthree" id="questionthree"></td>
<td class="answer">Answer three<input type="radio" value="Cthree" name="Qthree" id="questionthree"></td>
<td class="answer">Answer four<input type="radio" value="Cfour" name="Qthree" id="questionthree"></td>
</tr>

<tr>
<td class="question" colspan="4"><p class="question">Question four:</td></p>
</tr>

<tr>
<td class="answer">Answer one<input type="radio" value="Done" name="Qfour" id="questionfour"></td>
<td class="answer">Answer two<input type="radio" value="Dtwo" name="Qfour" id="questionfour"></td>
<td class="answer">Answer three<input type="radio" value="Dthree" name="Qfour" id="questionfour"></td>
<td class="answer">Answer four<input type="radio" value="Dfour" name="Qfour" id="questionfour"></td>
</tr>

<tr><td><input type="submit" value="submit" name="submit" id="submit"><br /></td></tr>
</form><br />

</table>
</div>
</body>

これにはまだ問題があります。助けてもらえますか？再度、感謝します！

score 3 · Accepted Answer

まず、あなたの質問では、すべての回答に同じid='questionone'があります。これらのIDを削除する必要があります。

特定の名前グループがチェックされているかどうかを確認するには、次を使用できます。

function isAnswered(name) {
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        var input = inputs[i];
        if ((input.name === name) && (input.checked)) {
            return true;
        }
    }
    return false;
}

次に、次のコードを使用して各質問グループをテストできます。

if (!isAnswered("Qone")) {
    alert("Question one must be completed");
    return false;
}

score 0 · Accepted Answer

フォーム全体を表示できますか？それまでの間、これを試してください：

function checkForm() {
    var x=document.forms["sdcomp"]["name"].value;

    if (x==null || x=="") {
        alert("Name must be filled out");
        return false;
    }

    var x=document.forms["sdcomp"]["email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");

    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
        alert("Please enter a valid e-mail address");
        return false;
    }

    if (document.getElementById("questionone").checked) {

        alert("Option one is selected");

    } else if (document.getElementById("questiontwo").checked) {

        alert("Option two is selected");

    } else if (document.getElementById("questionthree").checked) {

        alert("Option three is selected");

    } else if (document.getElementById("questionfour").checked) {

        alert("Option four is selected");

    } else {

        alert("No option is selected");

    }
}

そして、これが私が伝えようとしているものです。入力に一意の ID を付けて、関数で値を取得します。

<tr>
    <td class="answer">
        <label>8.45 seconds</label>
        <input type="radio" value="Aone" name="Qone" id="questionone" />
    </td>
    <td class="answer">
        <label>9.58 seconds</label>
        <input type="radio" value="Atwo" name="Qtwo" id="questiontwo" />
    </td>
    <td class="answer">
        <label>10.12 seconds</label>
        <input type="radio" value="Athree" name="Qthree" id="questionthree" />
    </td>
    <td class="answer">
        <label>9.32 seconds</label>
        <input type="radio" value="Afour" name="Qfour" id="questionfour" />
    </td>
</tr>

javascript - Javascript フォーム (ラジオ ボタン付き) の検証が機能しない

2 に答える 2

Related

Reference

javascript - Javascript フォーム (ラジオボタン付き) の検証が機能しない