-1

ラジオボタンの検証を挿入する準備がすべて整ったので、x が選択されたレベルになるときに、コードが「'x' を選択してもよろしいですか?」と尋ねる前に、警告ボックスを表示するだけです。キャンセルを押すと、ウェブページに戻ります。以下は私のコードです。 

<html>
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
function validateForm() {
    var result = true;
    var msg = "";
    if (document.ExamEntry.name.value == "") {
        msg += "You must enter your name \n";
        document.ExamEntry.name.focus();
        document.getElementById('name').style.color = "red";
        result = false;
    }
    if (document.ExamEntry.number.value == "") {
        msg += "You must enter a exam number \n";
        document.ExamEntry.number.focus();
        document.getElementById('number').style.color = "red";
        result = false;
    }
    if (document.ExamEntry.subject.value == "") {
        msg += "You must enter the subject \n";
        document.ExamEntry.subject.focus();
        document.getElementById('subject').style.color = "red";
        result = false;
    }
    if ((document.ExamEntry.level[0].checked == false) && (document.ExamEntry.level[1].checked == false) && (document.ExamEntry.level[2].checked == false)) {
        msg += "You mus select the level entered \n";
        result = false;
    }
}
function CheckField(obj) {
    if (obj.value.length < '4') {
        alert('Name field must 4 character long');
        obj.focus();
    }
}


</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="number">Examination Number</td>
<td><input type="text" name="number" maxlength="4" onblur="CheckField(this)"/></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<input type="radio" name="level">GCSE
<input type="radio" name="level">AS
<input type="radio" name="level">A2
<tr>
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" />         </td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>
4

1 に答える 1

0

これがうまくいくのに役立つことを願っています。

<!DOCTYPE html>
<html>
<head>
    <title>Exam entry</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function validateForm() {
            var result = true;
            var msg = "";
            var objx;

            // test for empty inputs

            objx = document.getElementById("subjectInput");
            if (objx.value.length == 0) {
                msg += "You must enter the subject \n";
                objx.focus();
                document.getElementById('subject').style.color = "red";
                result = false;
            }

            objx = document.getElementById("numberInput");
            if (objx.value.length == 0) {
                msg += "You must enter a exam number \n";
                objx.focus();
                document.getElementById('number').style.color = "red";
                result = false;
            }

            objx = document.getElementById("nameInput");
            if (objx.value.length == 0) {
                msg += "You must enter your name \n";
                objx.focus();
                document.getElementById('name').style.color = "red";
                result = false;
            }


            // checked level is needed below for confirmation
            var objx = document.ExamEntry;
            var checkedLevel = "";
            if (objx.level[0].checked) {
                checkedLevel = objx.level[0].value;
            }
            else
            if (objx.level[1].checked) {
                checkedLevel = objx.level[1].value;
            }
            else
            if (objx.level[2].checked) {
                checkedLevel = objx.level[2].value;
            }

            if (checkedLevel.length == 0) {
                msg += "You must select the level entered \n";
                result = false;
            }

            if (result) {
                // test for minimum length of name
                objx = document.getElementById("nameInput");
                if (objx.value.length < 4)
                {
                    objx.focus();
                    document.getElementById('name').style.color = "red";
                    //alert('Name field must 4 character long');
                    msg += 'Name field must be 4 characters long'
                    result = false;
                }
            }

            // confirm checked level
            if (result) {
                result = confirm("Are you sure you want to pick '" + checkedLevel + "' ?");
            }
            else {
                alert(msg);
            }
            return result;
        }
    </script>
</head>
<body>
    <h1>Exam Entry Form</h1>
    <form name="ExamEntry" method="post" onsubmit="return validateForm();" action="success.html">
        <table width="50%" border="0">
            <tr>
                <td id="name">Name</td>
                <td><input type="text" name="name" id="nameInput" /></td>
            </tr>
            <tr>
                <td id="number">Examination Number</td>
                <td><input type="text" name="number" id="numberInput" maxlength="4" /></td>
            </tr>
            <tr>
                <td id="subject">Subject</td>
                <td><input type="text" name="subject" id="subjectInput" /></td>
            </tr>
            <tr>
            <input type="radio" name="level" value="GCSE">GCSE
            <input type="radio" name="level" value="AS">AS
            <input type="radio" name="level" value="A2">A2
            <tr>
                <td><input type="submit" name="Submit" value="Submit" />         </td>
                <td><input type="reset" name="Reset" value="Reset" /></td>
            </tr>
        </table>
    </form>
</body>
</html>
于 2013-10-13T11:54:33.880 に答える