javascript 如果表单没有有效值，则显示 alert() 对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7870474/
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
Showing an alert() dialog box if a form does not have valid values
提问by n0pe
I have a simple form which accepts a Title and a Contents variable from a textbox and a textarea. The form will send its data to a file called add-post.php. However, I am looking for a way to alert the user that either the textbox or the textarea has invalid data (is empty) in case they click the submission button.
我有一个简单的表单，它接受来自文本框和文本区域的标题和内容变量。该表单将其数据发送到名为add-post.php. 但是，我正在寻找一种方法来提醒用户文本框或文本区域具有无效数据（为空），以防他们单击提交按钮。
I was thinking that an alert()popup box would be the best idea because it doesn't redirect to any other page and the user never loses their data (imagine they entered a whole lot of text but forgot a title. Sending the data to add-post.phpand performing the check there will result in loss of data for the user).
我认为alert()弹出框是最好的主意，因为它不会重定向到任何其他页面，并且用户永远不会丢失他们的数据（假设他们输入了大量文本但忘记了标题。将数据发送到add-post.php并执行检查那里将导致用户数据丢失）。
However, I'm not sure how to actually implement the alert()popup. How would I make it so that the check is done AFTER they have clicked the submit button but BEFORE the data is sent off to the next file. Any advice is appreciated.
但是，我不确定如何实际实现alert()弹出窗口。我将如何做到这一点，以便在他们单击提交按钮后但在将数据发送到下一个文件之前完成检查。任何建议表示赞赏。
回答by Brombomb
On your form add something like this
在你的表单上添加这样的东西
<form name="frm1" onsubmit="InputChecker()">
Then in javascript
然后在javascript中
<script type="text/javascript">
function InputChecker()
{
if(document.getElementById({formElement}) != '') { // not empty
alert("This element needs data"); // Pop an alert
return false; // Prevent form from submitting
}
}
</script>
Also as others have said jQuerymakes this a little bit easier. I highly recommend the jQuery Validate Plugin
也正如其他人所说，jQuery使这更容易一些。我强烈推荐jQuery Validate Plugin
Some people do find the alert box "annoying", so it may be better to append a message into the DOM to let the user know what needs to be fixed. This is useful if there are numerous errors as the errors will be more persistent allowing the user to see all the things they need to be fixed. Again, the jQuery Validate plugin has this functionality built in.
有些人确实觉得警告框“很烦人”，因此最好在 DOM 中附加一条消息，让用户知道需要修复的内容。如果存在大量错误，这将非常有用，因为错误将更加持久，允许用户查看他们需要修复的所有内容。同样，jQuery Validate 插件内置了此功能。
回答by Niet the Dark Absol
Attach an onsubmitevent to the form, and return false;to stop the submission if checks fail.
将onsubmit事件附加到表单，并return false;在检查失败时停止提交。
回答by Dhaivat Pandya
Form validation with Javascript. Or easier with jQuery.
使用 Javascript 进行表单验证。或者使用 jQuery 更容易。
Basically, validate the form when the submit button is clicked (with an onsubmit handler), and then use an alert() box if needed. By the way, people usually hate alert boxes.
基本上，在单击提交按钮时验证表单（使用 onsubmit 处理程序），然后在需要时使用 alert() 框。顺便说一下，人们通常讨厌警报框。
回答by Terrance
You have a number of options when it comes to client side validation. This is just one.
在客户端验证方面，您有多种选择。这只是其中之一。
<form id="tehForm" method="post">
<input type="text" id="data2check" >
<input type="button" id="btnSubmit" />
</form>
<script type="text/javascript">
function submit_form(){
if(document.getElementById("data2check").value!="correct value"){
alert("this is wrong");
}else{
document.getElementById("tehForm").submit();
}
}
</script>For a more indepth example check out this link
有关更深入的示例，请查看此链接
