如果表单没有有效值，则显示alert()对话框

Question

我有一个简单的表单，它接受来自文本框和文本区域的标题和内容变量。该表单会将其数据发送到名为 add-post.php 的文件。但是，我正在寻找一种方法来提醒用户，如果用户单击提交按钮，文本框或文本区域包含无效数据（为空）。

我认为 alert() 弹出框将是最好的主意，因为它不会重定向到任何其他页面，并且用户永远不会丢失数据（想象一下他们输入了大量文本但忘记了将数据发送到 add-post.php 并在那里执行检查将导致用户丢失数据）。

但是，我不确定如何实际实现 alert() 弹出窗口。我该如何做到这一点，以便在他们单击提交按钮之后但在数据发送到下一个文件之前完成检查。任何建议表示赞赏。

Answer 1

在您的表单上添加类似这样的内容

<form name="frm1" onsubmit="InputChecker()">

然后在 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>

也正如其他人所说的 jQuery 使这变得更容易一些。我强烈推荐 jQuery 验证插件

有些人确实觉得警报框“烦人”，所以它可能最好在 DOM 中附加一条消息，让用户知道需要修复什么。如果存在大量错误，这非常有用，因为错误会更加持久，从而允许用户看到需要修复的所有内容。同样，jQuery Validate 插件内置了此功能。

Answer 2

将 onsubmit 事件附加到表单，并在检查失败时return false; 停止提交。

Answer 3

使用 Javascript 进行表单验证。 或者使用 jQuery 更容易。

基本上，在单击提交按钮时验证表单（使用 onsubmit 处理程序），然后根据需要使用alert() 框。顺便说一句，人们通常讨厌警报框。

Answer 4

当涉及到客户端验证时，您有多种选择。这只是其中之一。

<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>

有关更深入的示例，请查看此链接