javascript - 第二次单击时表行更新。表单验证 JavaScript

标签 javascript html forms validation

我正在尝试使用 JavaScript 验证表单。文本字段嵌入在表行中。留下空白表格行以显示警告(例如“不能为空”)。当我在 onsubmit 上调用 validateForm() 方法时,警告出现在表行中并消失。当我第二次按下按钮时,警告保留在 html 页面上。我不知道发生了什么。

function validateForm() {
var warnmsg = checkNames();
document.getElementById("row1").innerHTML = warnmsg;
}
function checkNames() {
var fname = document.getElementById("fname");
if (fname.value.length==0)
    return "Cannot be left blank";
else
    return "";

}

最佳答案

您必须返回 false 才能使页面不离开。

            function validateForm() 
            {
                var warnmsg = checkNames();
                document.getElementById("row1").innerHTML = warnmsg;
                return !warnmsg.length >0;//if there is a warning message, return false
            }

然后在您的表单中:

onsubmit="return validateForm()"

这是我的测试页面

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script>
            function validateForm() 
            {
                var warnmsg = checkNames();
                document.getElementById("row1").innerHTML = warnmsg;
                return !warnmsg.length >0;
            }
            function checkNames() 
            {
                var fname = document.getElementById("fname");
                if (fname.value.length==0)
                    return "Cannot be left blank";
                else
                    return "";
            }
        </script>
    </head>

    <body>
        <form onsubmit="return validateForm()">
                    <p id="row1"></p>
            <input type="text" id="fname" />
            <input type="submit" />
        </form>
    </body>
</html>

关于javascript - 第二次单击时表行更新。表单验证 JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12719090/

相关文章:

javascript - 实现一个 div 部分显示在另一个 div 的底部以在鼠标悬停时完全显示

javascript - 以松散模式将 ES6 编译为 ES5 构造函数

javascript - 具有不同时间的for循环中的setTimeout

javascript - 有没有办法在 javascript 或 jquery 中创建变量选择器?

javascript - 是否可以在不使用 jquery 中的附加的情况下添加整个 html 部分?

javascript - 如何在用户输入时实时获取表单结果?

javascript - dijit/form/Select 在使用 Esri Javascript 3.7 的 Internet Explorer 中损坏

javascript - 如何防止 javascript 赋值创建自己的属性

java - 表单布局调用 JColorChooser

python - 使用模板自定义 Django FormWizard 步骤