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

我创建了一个JavaScript数组，并使用搜索输入字段框来搜索数组，以返回匹配结果（如果找到或返回“未找到”结果如果不匹配。搜索输入字段以搜索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>

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

    });

来源

2016-03-03 Mark2012

为什么不动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">

来源

2016-03-03 08:12:46 NiZa

许多谢谢，这工作。我不知道为什么我没有看到。我可能以为我不能在那里插入验证功能。我猜没有什么冒险，没有增加。 – Mark2012

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

回答

相关问题