搜索输入字段以搜索 JavaScript 数组 - 如何验证空输入框答案

【问题标题】：Search Input Field to search a JavaScript Array - How to Validate an Empty Input Box搜索输入字段以搜索 JavaScript 数组 - 如何验证空输入框
【发布时间】：2016-06-16 09:15:29
【问题描述】：

我创建了一个 JavaScript 数组并使用搜索输入字段框搜索数组，如果找到则返回匹配结果，如果不匹配则返回“未找到”结果。

搜索结果正常，但我使用的表单验证代码不起作用。事实上，它似乎被脚本的其余部分忽略或完全无效。

当输入框留空并提交时，结果与错误匹配相同，但单引号之间没有值。

相反，我需要创建一个验证脚本来首先检查输入框是否为空白，如果为空白，则告诉用户需要一些输入。当然，如果不是空白，脚本的其余部分将按描述工作。

有什么建议吗？

这是我目前的代码：

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Test Search Page</title>
</head>
<body>
<form method="get" action="input" onsubmit="return validate();">
<fieldset>
<input id="formInput" name="formInput" type="text" placeholder="Type Code Number Here" required/>
</fieldset>
</form>
<input id="searchBtn" type="submit" value="Submit">
</body>
</html>

脚本

var data = [{
    code: "2222",
    value: "$10.00"   
}, {
    code: "3333",
    value: "$30.00"
}, {
    code: "4444",
    value: "$50.00"
}, {
    code: "5555",
    value: "$100.00"
}, {
    code: "1111",
    value: "$300.00"
}, {
    code: "7777",
    value: "$500.00"
}, {
    code: "8888",
    value: "$1,000.00"
}, {
    code: "9999",
    value: "$3,000.00"
} ];

//Script to validate an empty input box
function validate()
{
var ch = document.getElementById('formInput');
if(ch.value === '')
{
alert('You Must Enter A Code Number First.');
return false;
}
}

//Script to search array for a match 
document.getElementById("searchBtn").addEventListener('click', function() {
    var formInput = document.getElementById("formInput").value,
        foundItem = null; //we'll store the matching value here

    for (i = 0; i < data.length; i++) {
        if (data[i].code == formInput) {
            foundItem = data[i];
            break; //we've found a match, no sense to continue
       }
    }

    if (foundItem) {
        alert("Jewellery Code # '" + foundItem.code + "' Value: " + foundItem.value);
    } else {
        alert("Code Number: '" + formInput + "' Was Not Found");
    }

    });

【问题讨论】：

标签： javascript arrays validation input textfield

【解决方案1】：

为什么不将validate 函数移到您的另一个click event 中？

var data = [{
  code: "2222",
  value: "$10.00"
}, {
  code: "3333",
  value: "$30.00"
}, {
  code: "4444",
  value: "$50.00"
}, {
  code: "5555",
  value: "$100.00"
}, {
  code: "1111",
  value: "$300.00"
}, {
  code: "7777",
  value: "$500.00"
}, {
  code: "8888",
  value: "$1,000.00"
}, {
  code: "9999",
  value: "$3,000.00"
}];



//Script to search array for a match 
document.getElementById("searchBtn").addEventListener('click', function() {
  var formInput = document.getElementById("formInput").value,
    foundItem = null; //we'll store the matching value here

  if (formInput === '') {
    alert('You Must Enter A Code Number First.');
    return false;
  }

  for (i = 0; i < data.length; i++) {
    if (data[i].code == formInput) {
      foundItem = data[i];
      break; //we've found a match, no sense to continue
    }
  }

  if (foundItem) {
    alert("Jewellery Code # '" + foundItem.code + "' Value: " + foundItem.value);
  } else {
    alert("Code Number: '" + formInput + "' Was Not Found");
  }

});

<form method="get" action="input">
  <fieldset>
    <input id="formInput" name="formInput" type="text" placeholder="Type Code Number Here" required/>
  </fieldset>
</form>
<input id="searchBtn" type="submit" value="Submit">

【讨论】：

非常感谢，这有效。我不知道为什么我没有看到。我可能认为我无法在此处插入验证功能。我想没有什么冒险，没有任何收获。