javascript (Vanilla) - Как предотвратить публикацию HTML-формы после отображения предупреждения - PullRequest
Новая
       10

javascript (Vanilla) - Как предотвратить публикацию HTML-формы после отображения предупреждения

0 голосов
/ 26 апреля 2018

Я провел тест в html с некоторой проверкой, и следующий шаг, который я хотел бы предпринять, состоит в том, чтобы оценить этот тест в javascript.Моя система подсчета очков работает хорошо и работает как задумано, но я бы хотел запретить отправку формы в файл result.html ЕСЛИ они набрали 0 в тесте.Мне удалось отобразить предупреждение, когда это происходит, но после нажатия ОК страница результатов все равно загружается.(Страница результатов пока пуста).Я попытался просмотреть оба окна window.history.back, а также protectDefault, но я не могу не думать о том, что не понимаю синтаксис для одной или обеих этих вещей.Мне бы хотелось, чтобы показывалось оповещение, а затем пользователь оставался на той же странице.Я также хотел бы остаться в ванильном 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;

Ответы [ 2 ]

0 голосов
/ 26 апреля 2018

Два места для изменения:

Сама функция 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
0 голосов
/ 26 апреля 2018

Когда вы делаете это так, ваша функция вызывается, когда пользователь отправляет форму.На этом этапе он завершит функцию, а затем перейдет к отправке, если не указано иное.

Если ваша функция возвращает false, она должна отменить отправку, происходящую в данный момент, и оставить пользователя на странице.

Попробуйте изменить: 

  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;
  }

На: 

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.");
    return false;
}
...