Question

好的，我已经根据这段代码完成了GCSE课程，虽然给我们开始的代码（如下所示）不能正常工作，我相信这是因为点击事件不是运行验证输入信息的功能。

<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.subject.value == ””) {
              msg += ”You must enter the subject\n”;
              document.ExamEntry.subject.focus();
              document.getElementById(‘subject’).style.color = ”red”;
              result = false;
          }
          if (msg == ””) {
              return result;
          } {
              alert(msg)
              return result;
          }
      }
   </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=”subject”>Subject</td>
            <td><input type=”text” name=”subject” /></td>
         </tr>
         <tr>
            <td> <button type=”button” name=”Submit” value=”Submit” onclick=”return validateForm();” />"Submit"</button></td>
            <td> <button type=”button” name=”Reset” value=”Reset” />Reset</td>
         </tr>
      </table>
   </form>
</body>

这是现在包含所有更新的代码，但仍然无法运行该功能：

 <head>
   <title>Exam entry</title>
 <h1>Exam Entry Form</h1>

<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.subject.value == '') {
        msg += 'You must enter the subject\n';
        document.ExamEntry.subject.focus();
        document.getElementById('subject').style.color = 'red';
        result = false;
    }

    if (msg == '') {
        return result;
    }

    alert(msg);
    return result;
}
</script>


<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="subject">Subject</td>
            <td>
                <input type="text" name="subject" />
            </td>
        </tr>
        <tr>
            <td>
                <button type="button" name="Submit" value="Submit" onclick="return validateForm();" />
                Submit
            </td>
            <td>
                <button type="button" name="Reset" value="Reset" />Reset</td>
        </tr>
    </table>
</form>

Answer 1

jsFiddle

<强> HTML

 <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="subject">Subject</td>
            <td>
                <input type="text" name="subject" />
            </td>
        </tr>
        <tr>
            <td>
                <button type="button" name="Submit" value="Submit" onclick="return validateForm();" />
                Submit
            </td>
            <td>
                <button type="button" name="Reset" value="Reset" />Reset</td>
        </tr>
    </table>
</form>

<强> JS

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.subject.value == '') {
        msg += 'You must enter the subject\n';
        document.ExamEntry.subject.focus();
        document.getElementById('subject').style.color = 'red';
        result = false;
    }

    if (msg == '') {
        return result;
    }

    alert(msg);
    return result;
}

Answer 2

修正你的报价和其他错误，你的代码可以在下面工作。

<!DOCTYPE html>
<html>
   <head>
      <title>Validator</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width">
   </head>
   <body> 
      <h1>Exam Entry Form</h1>
      <form name="ExamEntry" id="ExamEntry" method="POST" action="#" onsubmit="return validateForm();">
         <table width="50%" border="0">
            <tr>
               <td id="name">Name</td>
               <td>
                  <input id="nameField" type="text" name="name" >
               </td>
            </tr>
            <tr>
               <td id="subject">Subject</td>
               <td>
                  <input type="text" name="subject" id="subjectField">
               </td>
            </tr>
            <tr>
               <td>
                  <button type="submit" name="Submit" value="Submit">"Submit"</button>
               </td>
               <td>
                  <button type="reset" name="Reset" value="Reset">Reset</button>
               </td>
            </tr>
         </table>
      </form>
      <script>
         function validateForm() {
            var result = true;
            var msg = "";
            if (document.getElementById("nameField").value === "") {
               msg += "You must enter your name\n";
               document.ExamEntry.name.focus();
               document.getElementById("name").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 (msg === "") {
               return result;
            }
            else {
               alert(msg);
               return result;
            }
         }
      </script>
   </body>
</html>

Answer 3

我们正在做同样的事情。确保您使用的是记事本，并在打开它时将其保存为HTML文件。

希望这有帮助！另外，有人可以解释一下“action = success.html”的作用吗？

Javascript按钮单击事件以运行功能

3 个答案:

jsFiddle