Javascript 表单验证：如何强制焦点停留在“不正确”字段上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4150718/
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
Javascript form validation: how to force focus to remain on 'incorrect' field?
提问by Bennett Von Bennett
I can't believe that I can't find the answer to this question but I really have searched and can't find it! honest!
我不敢相信我找不到这个问题的答案，但我真的搜索过了，找不到！诚实的！
anyway - here is the question: I am trying to create a validation function for a form that will not permit the user to proceed to the next form field if the field doesn't validate. I just want the 'incorrect' field to have focus until it is 'correct'.
无论如何 - 这是问题：我正在尝试为表单创建一个验证函数，如果该字段未验证，该函数将不允许用户继续到下一个表单字段。我只希望“不正确”字段具有焦点，直到它“正确”为止。
because this is for a JS class I cannot use jQuery or any other framework.
因为这是一个 JS 类，我不能使用 jQuery 或任何其他框架。
here is one of the HTML fields:
这是 HTML 字段之一：
<li>Number 1:<input class="field2" type="text" id="star1" onchange="validateAndDraw(this.value);"></li>
and here is a truncated version of the JS function:
这是 JS 函数的截断版本：
function validateAndDraw(theValue) {
if (isNaN(theValue)) {
alert("no good");
} else {
[do stuff here]
}
}
I have tried using 'this.focus();' and 'this.parentNode.focus();' but no joy.
我试过使用'this.focus();' 和'this.parentNode.focus();' 但没有快乐。
I am sure the answer is ridiculously simple, but I can't seem to find it.
我相信答案非常简单，但我似乎找不到。
thanks, bennett
谢谢，贝内特
采纳答案by Ben
document.getElementById('star1').focus();
document.getElementById('star1').focus();
Using thisinside your function will refer back to the function.
this在函数内部使用将引用回函数。
Alternatively, you could pass the object in the onclickevent:
或者，您可以在onclick事件中传递对象：
<input class="field2" type="text" id="star1" onchange="validateAndDraw(this);">
so the function could look like
所以函数看起来像
function validateAndDraw(obj) {
alert(obj.value);
}
回答by Jason McCreary
Try sending the object reference to the function instead of the value.
尝试将对象引用发送到函数而不是值。
So in your input event:
所以在你的输入事件中：
validateAndDraw(this);
And change your function to:
并将您的功能更改为：
function validateAndDraw(input) {
if (isNaN(input.value)) {
alert("no good");
input.focus();
} else {
[do stuff here]
}
}
As a side, I would suggest looking into Progressive Enhancement.
一方面，我建议研究Progressive Enhancement。
回答by SLaks
Try calling focus()in the blurevent.
尝试focus()在blur事件中调用。
Also, thisin your function refers to the global context, not the element.
(It only refers to the element inside the inlinehandler; you are making an ordinary function call from there)
You should change your function to accept the element as a parameter (which you can pass as thisinsidethe inline handler)
此外，this在您的函数中是指全局上下文，而不是元素。
（它仅指内联处理程序内的元素；您正在从那里进行普通函数调用）
您应该更改您的函数以接受该元素作为参数（您可以作为this内联处理程序内部传递）
回答by Anthony Corbelli
Why not pass in the element?
为什么不传入元素？
function validateAndDraw(theElement) {
var theValue = theElement.value;
if (isNaN(theValue)) {
alert("no good");
theElement.focus()
} else {
[do stuff here]
}
}
回答by antelove
Sendas trigger
作为触发器发送
There are for each loop function for check input in form.
每个循环函数都有用于检查表单中的输入。
If there are input[x].value = "", so alert and focus in it, next input and next alert
如果有input[x].value = ""，那么alert和focus在里面，next input和next alert
<html>
<body>
<form onsubmit="return validateForm(this)">
Name: <input type="text" name="name"><br />
E-mail: <input type="text" name="email"><br />
Password: <input type="password" name="password"><br />
<input type="submit" value="Send">
</form>
<script >
function validateForm(input) {
for (x in input) {
if (input[x].value == "") {
alert(input[x].name + " must be filled out");
input[x].focus();
return false;
}
}
}
</script>
</body>
</html>