使用 javascript 强制字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21449608/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
make a field mandatory using javascript
提问by Vineeth Varma
I am trying to make a select field mandatory on a web page. I know how to do it with help of JS and form attribute 'onsubmit' and returning the function. But the problem is that form code is already written and I dont know how to add attribute now. Let me know if I can append attribute dynamically from JS. The other way I tried is to call the JS after page loaded. But this isnt making the field mandatory and form can be submitted. Following is my code..
我试图在网页上强制选择一个字段。我知道如何在 JS 和表单属性“onsubmit”的帮助下完成它并返回函数。但问题是表单代码已经写好了，现在不知道如何添加属性。让我知道我是否可以从 JS 动态附加属性。我尝试的另一种方法是在页面加载后调用 JS。但这并没有使该字段成为必填字段，并且可以提交表单。以下是我的代码..
<!DOCTYPE html>
<html>
<head>
<script>
function f1()
{
var countryValue = document.getElementById('count ID').value;
if (countryValue == "")
{
alert("field value missing");
return false;
}
var stateValue = document.getElementById('state ID').value;
if (stateValue == "")
{
alert("state field value missing");
return false;
}
}
</script>
</head>
<body>
<form method = "post" action = "33.html">
Country: <input type="text" id="count ID">
state: <select id="state ID">
<option></option>
<option value="ap">ap</option>
<option value="bp">bp</option>
</select>
<br>
<input type = "submit">
</form>
<script>window.onload=f1</script>
</body>
</html>
Please help.
请帮忙。
采纳答案by mplungjan
Have a look at this since you have messed up the IDs
看看这个，因为你弄乱了 ID
window.onload=function() {
document.forms[0].onsubmit=function() { // first form on page
var countryValue = this.elements[0].value; // first field in form
if (countryValue == "") {
alert("Please enter a country");
return false;
}
var stateIdx = this.elements[1].selectedIndex; // second field
if (stateIdx < 1) { // your first option does not have a value
alert("Please select a state");
return false;
}
return true; // allow submission
}
}
PS: It is likely that POSTing to an html page will give you an error
PS：很可能 POST 到 html 页面会给你一个错误
To get the last button to do the submission
获取最后一个按钮进行提交
window.onload=function() {
var form = document.forms[0]; // first form
// last element in form:
form.elements[form.elements.length-1].onclick=function() {
...
...
...
this.form.submit(); // instead of return true
}
}
回答by kuroi neko
Once you've got a function to detect improper values (empty mandatory field or anything else, like a bad e-mail address for instance) you have a few different options :
一旦您有了检测不正确值的功能（空的必填字段或其他任何内容，例如错误的电子邮件地址），您就有几个不同的选择：
- disable the submit button
- cancel the onclick event on the button
- cancel the submit event on the form
- 禁用提交按钮
- 取消按钮上的onclick事件
- 取消表单上的提交事件
disabling the submit button can be annoying for the user (it might flash on and off while the values are entered).
禁用提交按钮对用户来说可能很烦人（在输入值时它可能会闪烁）。
回答by voiski
I had the same issue, but i made a extension. Using hook system to translate fields with "*", in the names, to validate like required field. This is a simple solution not intrusive where is not required addition of fields in the database, only by the use of sufix "*" in configuration of custom fields.
我有同样的问题，但我做了一个扩展。使用钩子系统翻译名称中带有“*”的字段，以验证必填字段。这是一个简单的解决方案，不需要在数据库中添加字段，只需在自定义字段的配置中使用后缀“*”即可。
There is the code: https://github.com/voiski/bugzilla-required-field
