Question

我创建了一个JavaScript数组并使用搜索输入字段框来搜索数组，以便在找到时返回匹配的结果，或者返回＆＃34; not found＆＃34;结果如果不匹配。

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

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

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

有什么建议吗？

这是我到目前为止的代码：

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>

SCRIPT

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");
    }

    });

Answer 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">

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

1 个答案: