我是js的新手[客户端脚本]
我以前在php上工作过，现在我想我需要为我的应用程序使用js，这里是一个小代码。
<form name = "Purchase" action = "purchase.php" method = "POST">
<select name = "pname">
<option value = "p1"> p1 </option>
<option value = "p2"> p2 </option>
<input type = "number" name = "price" required></input>
<input type = "number" name = "Total" required></input>
<input type = "submit" name = "NewPurchase" Value = "Add">
</form>
我想验证所有的值是否设置，主要是下拉的形式，如果它没有被选中，那么警告消息应该显示说，值没有被选中，我已经修改了相同的文件如下所示，但不工作。
<SCRIPT LANGUAGE="JavaScript">
function validateForm(objForm)
{
var returnStatus = 1;
if (objForm.Make.selectedIndex == 0)
{
alert("Please select a all select options");
returnStatus = 0;
};
if (returnStatus)
{
objForm.submit();
}
}
</script>
修改输入提交标签为
<input type = "submit" name = "NewPurchase" Value = "Add" onClick="validateForm(document.testform)">
目前我正在验证所有的值使用php在下一页["purchase.php"]使用isset()
请让我知道如何在js中使用相同的
基本上我不推荐alerts()。当然，他们很好，履行了他们的职责，但他们也阻塞了浏览器的其他部分。
<html>
<head>
<Script>
function validateForm(e){
var tStatus = 1;
if (e){
var tE = e.parentNode; //Getting the form container.
var tL = document.querySelectorAll('[required]'); //Get required elements;
for(var i=0, j=tL.length;i<j;i++){
tL[i].style.backgroundColor = '#ffffff'; //Reseting our error marks.
if (tL[i].tagName === 'SELECT' && tL[i].selectedIndex === 0){
//For dropdowns, we check if not the first option is selected
var tStatus = 0;
tL[i].style.backgroundColor = 'crimson';
//alert('..') //Can put alerts instead, but alerts are rarely a good option
}
else if (tL[i].tagName === 'INPUT' && tL[i].type == 'number' && (tL[i].value.trim() === '' || isNaN(tL[i].value))){
//For number input, we check if a value is entered which is a number.
var tStatus = 0;
tL[i].style.backgroundColor = 'crimson';
//alert('..') //Can put alerts instead, but alerts are rarely a good option
}
else if (tL[i].tagName === 'INPUT' && tL[i].type == 'text' && tL[i].value.trim() === ''){
//For input, we check if any text is entered which is not only whitespaces.
var tStatus = 0;
tL[i].style.backgroundColor = 'crimson';
//alert('..') //Can put alerts instead, but alerts are rarely a good option
};
};
};
//Proceed how ever you want with your status [0|1]
return (tStatus === 1);
};
</Script>
</head>
<body>
<form name = "Purchase" action = "purchase.php" method = "POST">
<select name = "pname" required>
<option value = "p1"> p1 </option>
<option value = "p2"> p2 </option>
</select> <!-- Close the select? -->
<input type = "text" name = "text" required></input>
<input type = "number" name = "Total" required></input>
<input type = "number" name = "Total" required></input>
<input type = "submit" name = "NewPurchase" Value = "Add" onsubmit="return validateForm(this)">
</form>
</body>
</html>
您错过了关闭select，因此您的select将像:
<select name = "pname" id="pname">
<option value = "p1"> p1 </option>
<option value = "p2"> p2 </option>
</select>
为每个输入字段分配id;
在js代码中删除;
如果检查它在你的js函数使用，document.getElementById("id_of_input");
if (value==""){
alert("fill abc field");
return false;
}
代替onclick Event添加一个事件到表单
onsubmit="return validateForm();"
在你的js函数中返回true，如果任何输入失败，它将返回false，这样表单就不会被提交。
你可以使用isset()函数，但这是毫无意义的，因为你正在做客户端验证…
你可以user required="required"，这在html5中是不允许用户提交表单的，除非在字段中添加一些值