HTML формы проверки нескольких полей с использованием JS

Question

HTML формы проверки нескольких полей с использованием JS

1

У меня есть HTML-форма, содержащая 4 числовых поля и одно текстовое поле. Я написал код проверки с использованием JS, как показано ниже.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function validateForm() {

    discount_threshold = document.myForm.discount_threshold.value;
    discountThreshold = document.myForm.discountThreshold.value;
    cpThreshold = document.myForm.cpThreshold.value;
    markdownCpThreshold = document.myForm.markdownCpThreshold.value;
    minInventoryThreshold = document.myForm.minInventoryThreshold.value;
    variationMode = document.myForm.variationMode.value;



   if (discount_threshold < 0 || discount_threshold > 100){
       window.alert("Please enter valid discount threshold between 0 to 100");
       discount_threshold.focus();
       return false;
   }
   if (cpThreshold < 0 || cpThreshold > 100){
       window.alert("Please enter valid CP threshold between 0 to 100");
       cpThreshold.focus();
       return false;
   }
   if (markdownCpThreshold < 0 || markdownCpThreshold > 100){
       window.alert("Please enter valid markdownCpThreshold threshold between 0 to 100");
       markdownCpThreshold.focus();
       return false;
   }
   if (minInventoryThreshold < 0 || minInventoryThreshold > 100){
       window.alert("Please enter valid minimum Inventory Threshold between 0 to 100");
       minInventoryThreshold.focus();
       return false;
   }
   if (variationMode !== "disabled" || variationMode !== "enabled"){
  window.alert("Please enter valid variation mode: disabled or enabled");
  variationMode.focus();
  return false;
}

}
</script>
</head>

<body>

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
Discount Threshold*: <input type="number" name="discount_threshold"> <br>
CP Threshold*: <input type="number" name="cpThreshold"> <br>
Markdown Threshold*: <input type="number" name="markdownCpThreshold"> <br>
Minimum Inventory*: <input type="number" name="minInventoryThreshold"> <br>
Variation Mode*: <input type="text" name="variationMode"> <br>

<button class="btn btn-primary" style="color:white !important; height:inherit; width:inherit;" type=submit>Save Configuration</button>
</form>
</body>
<html>

Я не ожидаю, что все поля будут заполнены от пользователя, и, следовательно, я поместил проверки. Когда пользователь не вводит значения в поле 1, а затем вводит значение за пороговое значение для поля 3, я должен был получить предупреждение для него. Однако это происходит не так, как ожидалось.

bhupesh khatu 08 окт. 2018, в 07:05

Источник

1

Вы слышали о сферах в JS?
Piterden 08 окт. 2018, в 04:12
0

На самом деле, нет. Но только что прошел через это.
bhupesh khatu 08 окт. 2018, в 04:33

Теги:

javascript

html5

2 ответа

Ещё вопросы

На самом деле, нет. Но только что прошел через это.

Piterden · Answer 1 · 2018-10-08T02-54-00.000Z

function validateForm(e) {
  e.preventDefault();
  
  const discount_threshold = e.target.elements.discount_threshold.value;
  const cpThreshold = document.myForm.cpThreshold.value;
  const markdownCpThreshold = e.target.elements.markdownCpThreshold.value;
  const minInventoryThreshold = e.target.elements.minInventoryThreshold.value;
  const variationMode = e.target.elements.variationMode.value;

  if (discount_threshold < 0 || discount_threshold > 100) {
    alert("Please enter valid discount threshold between 0 to 100");
    e.target.elements.discount_threshold.focus();
    return false;
  }
  if (cpThreshold < 0 || cpThreshold > 100) {
    alert("Please enter valid CP threshold between 0 to 100");
    e.target.elements.cpThreshold.focus();
    return false;
  }
  if (markdownCpThreshold < 0 || markdownCpThreshold > 100) {
    alert("Please enter valid markdownCpThreshold threshold between 0 to 100");
    e.target.elements.markdownCpThreshold.focus();
    return false;
  }
  if (minInventoryThreshold < 0 || minInventoryThreshold > 100) {
    alert("Please enter valid minimum Inventory Threshold between 0 to 100");
    e.target.elements.minInventoryThreshold.focus();
    return false;
  }
  if (variationMode !== "disabled" || variationMode !== "enabled") {
    alert("Please enter valid variation mode: disabled or enabled");
    e.target.elements.variationMode.focus();
    return false;
  }

}

<form name="myForm" action="demo_form.asp" onsubmit="validateForm(event)" method="post">
  Discount Threshold*: <input type="number" name="discount_threshold"> <br> CP Threshold*: <input type="number" name="cpThreshold"> <br> Markdown Threshold*: <input type="number" name="markdownCpThreshold"> <br> Minimum Inventory*: <input type="number"
    name="minInventoryThreshold"> <br> Variation Mode*: <input type="text" name="variationMode"> <br>

  <button class="btn btn-primary" style="color:white; height:inherit; width:inherit;" type=submit>Save Configuration</button>
</form>

Благодарю. Это работает, как я ожидал.

chaitanya muddammagari · Answer 2 · 2018-10-08T01-56-00.000Z

Синтаксическая проблема. Вы закрыли фигурные скобки для функции validateForm после получения значения переменной Variance, и у вас есть закрывающая скобка для функции, если все условия закончились. Попробуйте удалить закрывающую фигуру после переменной "changeMode".

Извиняюсь. При добавлении кода здесь он был добавлен. В реальном коде функция закрыта правильно. Но проблема все еще существует.
В форме нет поля "discountThreshold", но вы пытаетесь получить значение для неопределенного поля во второй строке метода validateForm. Попробуйте прокомментировать эту строку.