HTML форма проверки нескольких полей с использованием JS - PullRequest
Новая
       0

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

0 голосов
/ 08 октября 2018

У меня есть 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, я должен был получить уведомление об этом.Тем не менее, это не происходит, как ожидалось.

Ответы [ 2 ]

0 голосов
/ 08 октября 2018

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

0 голосов
/ 08 октября 2018 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...