Ограничение значения формы Javascript

Question

Я пытаюсь создать форму, которая будет хранить значения в пустом массиве, но значения должны быть от 0 до 5 и разделены запятыми. проблема в том, что он предупреждает, если значения больше 5, но все еще сохраняет значение в массиве. Я хочу, чтобы он предупредил, а затем восстановил значение формы.

Вот мой код:

<form name ="form1" onsubmit="return validateForm()">
    <input type="number" name="text" id="inputText" name="inputText" />
    <button onclick="pushData();">Insert</button>
    <p id="pText"></p>
</form>

И JavaScript

function validateForm () {
    var form = document.forms["form1"]["inputText"].value;
    if(form <0 && form >= 6) {
        alert('value should must be between 0 to 5');
        return false;
    }
}

// create an empty array
var myArr = [];

function pushData() {
    // get value from the input text
    var inputText = document.getElementById('inputText').value;

    // append data to the array
    myArr.push(inputText);

    var pval = "";

    for(i = 0; i < myArr.length; i++) {
        pval = pval + myArr[i];
    }

    // display array data
    document.getElementById('pText').innerHTML = "Grades: "  + pval ;

}

Answer 1

Пытаться

if (form <0 || form >= 6)

Answer 2

Обратите внимание, что в MDN:

Ввод числа считается действительным, когда пусто и когда вводится одно число, но в противном случае он недействителен.

С этим конкретным элементом формы вы можете добавить атрибуты min и max, чтобы пользователь мог ввести значение в указанном диапазоне. Следовательно, текущее содержимое функции validateForm() в OP является излишним. Кроме того, эта функция имеет проблемную строку кода:

if(form <0 && form >= 6) {

Вы не можете иметь значение, которое одновременно меньше нуля и больше или равно шести. Используйте вместо логического ИЛИ, то есть "||" оператор для логики для работы.

Следующий код позволяет пользователю выбирать числовые значения в диапазоне, указанном OP, а затем отображает их в формате через запятую, как показано ниже:

var d = document;
d.g = d.getElementById;
var pText = d.g('pText');
pText.innerHTML = "Grades: ";

var inputText = d.g("inputText"); 
var myArr = [];


function pushData() {
   var notrailingcomma = "";
   
   myArr.push(inputText.value);
   
   if (myArr.length > 1) {
     notrailingcomma = myArr.join(", ").trim().replace(/,$/g,"");
     pText.innerHTML = "Grades: " + notrailingcomma;   
   }
   else
   {
      pText.innerHTML += inputText.value;
   }   
}


d.forms["form1"].onsubmit = function(event) {
    event.preventDefault();
    pushData();
};

p {
padding: 1em;
margin:1em;
background:#eeeeff;
color: #009;
}

<form name="form1">
<input type="number" id="inputText"  name="inputText"  min=0 max=5 value=0>

<button type="submit">Insert</button>

</form>
        
 <p id="pText"></p>

Пара моментов относительно формы:

• HTML-код OP содержит ошибку в поле ввода: он имеет два имени. Я бросил один с именем "текст".
• Мне нравится то, что @thgaskell рекомендует в отношении изменения "Вставить" в кнопку отправки, предотвращения действия по умолчанию при отправке формы и связывания pushData с событием onsubmit формы. Итак, я изменил код соответственно.

Answer 3

Я думаю, что это может работать лучше, если вы реорганизуете, где функции связаны.

Порядок распространения событий:

1. Кнопка нажата, и значение помещается в массив.
2. Форма submit событие запускает и проверяет значения, но уже слишком поздно.

Есть много способов приблизиться к этому, но самым простым было бы позвонить pushData в конце вашего validateForm,

Скорректировано условие, потому что число не может быть меньше 0 И больше или равно 6 в то же время.

Также добавлено event.preventDefault прекратить отправку формы.

JavaScript

function validateForm (event) {
  event.preventDefault();
  var form = document.forms["form1"]["inputText"].value;
  if (form < 0 || form > 5) {
    alert('value should must be between 0 to 5');
    return false;
  }
  pushData();
}

HTML

<form name="form1" onsubmit="validateForm(event)">
  <input type="number" id="inputText" />
  <button type="submit">Insert</button>
  <p id="pText"></p>
</form>

JSFiddle