Question

我有一个简单的表单，它接受来自文本框和文本区域的Title和Contents变量。表单将其数据发送到名为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 Validate Plugin

有些人确实发现警报框“烦人”，因此最好将消息附加到DOM中以让用户知道需要修复的内容。如果存在大量错误，这将非常有用，因为错误将更加持久，允许用户查看他们需要修复的所有内容。同样，jQuery Validate插件内置了此功能。

Answer 2

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

Answer 3

Form validation with Javascript。 Or easier with 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>

有关更深入的示例，请查看 this link

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

4 个答案: