javascript (Vanilla) - 如何在显示警报后阻止 HTML 表单发布

Question

我已经用 html 做了一个测验并做了一些验证，下一步我想用 javascript 给这个测验打分。我的评分系统一切正常并且按预期工作，但我想阻止表单发布到 result.html 如果他们在测验中得分为 0。发生这种情况时，我设法显示了一个警报，但在按下“确定”后，结果页面仍然会加载。 (结果页面现在是空的)。我试过同时查看 window.history.back 和 preventDefault，但我忍不住认为我不理解其中一个或两个的语法。我希望显示警报，然后用户停留在同一页面上。我还想留在 Vanilla javascript 中，并避免内联的东西。谢谢:)

这是我的测验形式:

<form name="quiz" id="quiz" method="post" action="result.html">
    <fieldset>
        <legend>Student Details</legend>
        <p><label for="firstName">Name: </label>
            <input type="text" name="firstName" id="firstName" placeholder="First" maxlength="25" required="required" pattern="^[A-Za-z -]+$" title="Please use only letters/hyphens/spaces." />
            <input type="text" name="lastName" id="lastName" placeholder="Last" maxlength="25" required="required" pattern="^[A-Za-z -]+$" title="Please use only letters/hyphens/spaces." /></p>
        <p><label for="studentID">Student ID: </label>
            <input type="text" name="studentID" id="studentID" placeholder="e.g. s123456789" required="required" pattern="(\w{1}\d{6}(\d{3})?)" title="Please enter either 7 or 10 characters, beginning with the letter 's'." /></p>
    </fieldset>
    <br/>
    <fieldset>
        <legend>Question 1</legend>
        <p><label for="answer1">In what year was the SSH-1 protocol released?</label><br/><br/>
            <input type="text" name="answer1" id="answer1" pattern="[0-9]{1,4}" placeholder="e.g. 2018" required="required" title="Please enter a year with up to 4 digits." /></p>
    </fieldset>
    <br/>
    <fieldset>
        <legend>Question 2</legend>
        <p><label>Who developed the SSH-1 protocol?</label><br/><br/>
            <input type="radio" name="answer2" id="answer2_1" value="wuXian" required="required" /><label for="answer2_1">Wu Xian</label><br/>
            <input type="radio" name="answer2" id="answer2_2" value="mohammadHaddad" /><label for="answer2_2">Mohammad Haddad</label><br/>
            <input type="radio" name="answer2" id="answer2_3" value="tatuYlonen" /><label for="answer2_3">Tatu Ylönen</label><br/>
            <input type="radio" name="answer2" id="answer2_4" value="fredrikJohannsen" /><label for="answer2_4">Fredrik Jöhannsen</label></p>
    </fieldset>
    <br/>
    <fieldset>
        <legend>Question 3</legend>
        <p><label>Select as many SSH <em>protocols</em> as you see.</label><br/><br/>
            <input type="checkbox" name="answer3_1" id="answer3_1" value="ssh2" /><label for="answer3_1">SSH-2</label><br/>
            <input type="checkbox" name="answer3_2" id="answer3_2" value="openBSD" /><label for="answer3_2">OpenBSD</label><br/>
            <input type="checkbox" name="answer3_3" id="answer3_3" value="ssh1" /><label for="answer3_3">SSH-1</label><br/>
            <input type="checkbox" name="answer3_4" id="answer3_4" value="openSSH" /><label for="answer3_4">OpenSSH</label></p>
    </fieldset>
    <br/>
    <fieldset>
        <legend>Question 4</legend>
        <p><label for="answer4">SSH is a: </label><br/><br/>
            <select name="answer4" id="answer4" form="quiz" required="required">
                <option value="">Please select...</option>
                <option value="applicationLayer">Application layer protocol</option>
                <option value="transportLayer">Transport layer protocol</option>
                <option value="internetLayer">Internet layer protocol</option>
                <option value="linkLayer">Link layer protocol</option>
            </select></p>
    </fieldset>
    <br/>
    <fieldset>
        <legend>Question 5</legend>
        <p><label for="answer5">Click on the flag of the country where the SSH-1 protocol was first developed, and then click Submit.</label><br/><br/>
            <img src="images/flags.jpg" width="400" height="400" alt="Scandinavian Flags" usemap="#flagsMap" />
            <input type="text" name="answer5" id="answer5" value="" readonly="readonly" required="required" /><br/><br/>
            <map name="flagsMap">
                <area shape="rect" coords="0,0,200,200" alt="Finland" href="#bottom" onClick="document.forms['quiz'].answer5.value='Finland'"/>
                <area shape="rect" coords="200,0,400,200" alt="Iceland" href="#bottom" onClick="document.forms['quiz'].answer5.value='Iceland'"/>
                <area shape="rect" coords="0,200,200,400" alt="Norway" href="#bottom" onClick="document.forms['quiz'].answer5.value='Norway'"/>
                <area shape="rect" coords="200,200,400,400" alt="Sweden" href="#bottom" onClick="document.forms['quiz'].answer5.value='Sweden'"/>
            </map></p>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <input type="submit" />
    </fieldset>
</form>

这是我的 javascript:

"use strict";

function goBack() {
    window.history.back();
}

function checkScore() {

  var score = 0;

  var ans1 = document.getElementById("answer1");
  if (ans1.value == "1995") {
    score = score + 2;
  }

  var ans2_3 = document.getElementById("answer2_3");
  if (ans2_3.checked == true) {
    score = score + 2;
  }

  var ans3_1 = document.getElementById("answer3_1");
  var ans3_2 = document.getElementById("answer3_2");
  var ans3_3 = document.getElementById("answer3_3");
  var ans3_4 = document.getElementById("answer3_4");
  if (ans3_1.checked == true && ans3_2.checked == false && ans3_3.checked == 
true && ans3_4.checked == false) {
    score = score + 2;
  }

  var ans4 = document.getElementById("answer4");
  if (ans4.value == "applicationLayer") {
    score = score + 2;
  }

  var ans5 = document.getElementById("answer5");
  if (ans5.value == "Finland") {
    score = score + 2;
  }

  if (score == 0) {
    alert("You have attempted to submit this quiz, but you have scored 0/10. 
Please reconsider your answers, and try to raise your score.");
    goBack;

  }
}

function init() {
  var quiz = document.getElementById("quiz");
  quiz.onsubmit = checkScore;
}

window.onload = init;

Answer 1

两个地方要改:

checkscore 函数本身必须在失败时返回 false:

if (score==0) {
  alert('error');
  return false;
}

然后表单提交本身需要返回函数的返回值:

quiz.onsubmit=function(){
  return checkscore();
}

我知道您试图避免编写内联代码，但如果上述更改是内联的，则更容易看出区别:

<form ... onsubmit="checkscore();"> <-- this doesn't work

<form ... onsubmit="return checkscore();"> <-- this works