搜索輸入字段以搜索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數組 - 如何驗證空輸入框

回答

相關問題