Как настроить конкретное сообщение об отклонении для элемента ввода номера HTML?

Question

У меня есть цикл html форм <input type="number">, которые в основном представляют собой простые вычисления алгебры для определенных людей, которые нужно заполнить. Я установил правильный ответ, ограничив максимальное и минимальное допустимое число одним и тем же числом.Однако, таким образом, если участник дает неправильный ответ, сообщение об отклонении будет выглядеть примерно так: «значения должны быть больше или равны ...».Это технически правильно, но я бы хотел сказать «неправильный ответ, пожалуйста, попробуйте еще раз».

Есть ли способ сделать это?

Пытался использовать что-то вроде alert =, но это не соответствует моим требованиям.

В коде ${parameters.numbers} и ${parameters.answers}, потому что я использую lab.js для цикла.Они просто означают каждый раз, когда число в уравнении и ответ будут меняться.Например, для первого цикла ${parameters.numbers} равно 200, а соответствующий ответ ${parameters.answers} равен 194. lab.js позаботится о преобразовании этих двух параметров в действительные числа для каждого цикла в форме.

<form>
  <label for="algebra">${parameters.numbers} - 6 = ?</label><br>
  <input name="algebra" type="number" id="algebra" required="" max="${parameters.answers}" min="${parameters.answers}"><br>

  <button type="submit">OK</button>
</form>

Я стараюсь избегать драматического оповещения об этом, просто не навязчивое сообщение, такое как стиль по умолчанию, было бы хорошо.Если вы хотите воссоздать сообщение «значения должны быть больше или равны ...» по умолчанию, просто замените параметры, как это было бы хорошо:

<form>
  <label for="algebra">200 - 6 = ?</label><br>
  <input name="algebra" type="number" id="algebra" required="" max="194" min="194"><br>

  <button type="submit">OK</button>
</form>

Answer 1

Я согласен с @ElroyJetson, что помещать ответ внутри тега не очень хорошая идея, но я сосредоточил этот ответ на том, как вы можете установить и сбросить сообщение об ошибке.

Я использовал jQuery, но этотакже может быть сделано с простым javascript.

Идея состоит в том, чтобы сгруппировать тег input с тегом span (здесь внутри div с классом input-field).

При изменении значения или при отправке формы (в данном случае при изменении значения) вы удаляете все предыдущие сообщения об ошибках из тега span, а затем выполняете проверку.Если есть ошибка, вы устанавливаете ее в теге span.

Таким образом, сообщение об ошибке будет отображаться под элементом ввода.

Чтобы попробовать, заполните ответ и щелкните за пределами поля ввода.поле ввода.

$(document).ready(function(){
  $(".input-field").change(function(){
      let $inputField = $(this);
      let $input = $inputField.find("input");
      let $errorMsg = $inputField.find("span.err-msg");
      let max = Number($input.data("max"));
      let min = Number($input.data("min"));
      $errorMsg.text("");
      let v = Number($input.val());
      if(v < min || v > max){
        $errorMsg.text("Invalid answer");
      }
  });
});

.err-msg{
    color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="input-field">
    <label for="algebra">200 - 6 = ?</label><br>
    <input name="algebra" type="number" id="algebra" required="" data-max="194" data-min="194"><br>
    <span class="err-msg"></span>
  </div>
</form>

Answer 2

Не устанавливайте правильный ответ с мин. И макс. Вместо этого просто вызовите функцию javascript, указав тегу кнопки onClick, чтобы оценить правильность ответа пользователя.

   <button onclick="evaluateAnswer('.algebra');" class="submitBtn" >OK</button>

Тогда ваш javascript должен выглядеть примерно так:

    function evaluateAnswer(cssClass){
        var usersAnswer = $(cssClass).val();
        var actualCorrectAnswer = 100;

        if(usersAnswer == actualCorrectAnswer){
          //Do something to proceed

        }else{
          alert('Sorry, your answer is incorrect');
        }

    }

Кроме того, я только что заметил, что вы не хотите предупреждать, как в предупреждении JavaScript. То, что вы могли бы сделать, это стилизовать ваше сообщение и дать ему класс css со свойством display:none. Затем, когда вы хотите показать сообщение, когда пользователь вводит неправильный ответ, вы можете использовать javascript, чтобы удалить класс, а также использовать javascript, чтобы добавить класс обратно, когда пользователь вводит правильный ответ.

Редактировать Возможно, вам следует хранить правильные ответы в базе данных, оценивать их правильность на стороне сервера и использовать Ajax для отображения сообщения, чтобы пользователи не могли щелкнуть правой кнопкой мыши -> просмотреть исходный код и посмотреть ответы в своем коде на стороне клиента

Answer 3

Мое текущее решение похоже на это.Есть невидимые html-элементы, в которых хранится правильный ответ, а скрипт js проверяет правильность ввода.Опять же, части $ {} представляют переменные, которые изменяются в каждом цикле.

html part

<main class="content-horizontal-center content-vertical-center">
  <form name="mathEvaluation">
    <label for="algebra">${parameters.numbers} - 6 = ?</label><br>
    <input name="answer" type="number" id="answer" required="" size="3"><br>
    <button type="submit">OK</button>
    <input type="hidden" id="hidenAnswer" value=${parameters.answers} />
  </form>
</main>

js part

this.options.validator = function(data) {
  if(mathEvaluation.answer.value == mathEvaluation.hidenAnswer.value){
    return true
      } else {
        alert("Please enter the correct number.")
        }
}