用于验证表单并显示 css 加载屏幕的 Javascript 函数答案

【问题标题】：Javascript function to validate form AND display css loading screen用于验证表单并显示 css 加载屏幕的 Javascript 函数
【发布时间】：2013-04-02 17:56:16
【问题描述】：

我是 javascript 新手，我正在尝试将两段单独工作但不一起工作的代码组合起来：

验证我的表单以检查长度、宽度和高度是否非零
如果表单有效，则提交表单并在内容加载时显示 css 初始加载屏幕

这是我失败的尝试：

<script type = "text/javascript">

function notEmpty(elem, helperMsg){
    if (elem.value.length == 0) {
        alert(helperMsg);
        elem.focus(); // set the focus to this input
        return false;
    }
    return true;
}

function show() {
    if ((notEmpty(document.getElementById('length'), 'Please Enter a Length')==true) &&
        (notEmpty(document.getElementById('height'), 'Please Enter a Height')==true) &&
        (notEmpty(document.getElementById('weight'), 'Please Enter a Weight')==true)) {
        document.getElementById("myDiv").style.display="block";
        setTimeout("hide()", 10000);  // 10 seconds
    }
}
function hide() {
    document.getElementById("myDiv").style.display="none";
}
</script>

我的表单将在表单提交时调用show()。 myDiv 是一个 CSS 加载页面元素，在页面加载时出现。再次，如果我的尝试失败了，我深表歉意，我对 javascript 很陌生，如果有任何建议可以为我指明正确的方向，我将不胜感激。

【问题讨论】：

您有任何错误吗？有什么事吗？或许可以尝试在 notEmpty 函数中添加 console.log(elem) 并检查元素是否正确。
没有错误，'1' 或 '2' 都不起作用，即表单仍然提交空字段，并且在任何一种情况下（有效/无效），myDiv 元素都无法显示
好的，所以我建议在notEmpty 函数中添加console.log(elem) 作为第一行，并检查是否获得了正确的元素作为参数。如果您使用 Chrome 或 Firefox，您应该能够挖掘日志输出并检查例如价值。
第一步是确保您的show() 函数正在被调用。首先将console.log('show it!') 放在那里以确保它被调用。一旦你确定它被调用了，你就可以看看它是否与你尝试显示 div 的方式有关。
另一方面，hide 函数不会被调用，因为setTimeout() 接受函数作为参数，而不是字符串。如果您将其更改为 setTimeout(hide, 10000);，则可以，但这可能不是您的主要问题。

标签： javascript css forms validation loading

【解决方案1】：

在 HTML 表单中添加 onClick="validate(event)" 到提交按钮：

<form action="someAction">
    <input type="text" id="length"/><br/>
    <input type="text" id="height"/><br/>
    <input type="text" id="weight"/><br/>
    <input type="submit" onClick="validate(event)"/>
</form>
<div id="myDiv" style="display: none">Loading....</div>

然后试试这个代码：

function validate(e) {
    (e.preventDefault) ? e.preventDefault() : e.returnValue = false;//stop the form from submitting before validating
    var arr = ['length', 'height', 'weight'],
        valid = true,
        helperMsg = ['please choose length value', 'please choose height value', 'please choose weight vale'];
    for (var i in arr) {
        var elm = document.getElementById(arr[i]);
        if (elm.value.length == 0) {
            alert(helperMsg[i]);
            elm.focus();
            valid = false;            
            break;//stop looping and move to the next step
        }
    }
    if (valid) {
        var div = document.getElementById('myDiv');
        document.getElementsByTagName('form')[0].submit();//submit the first form, or you can change it to document.getElementBY('id') instead if you add an id to your form which would be better.
        div.style.display = 'block';//show div
        setTimeout(function () {
            div.style.display = 'none';//hide div after 10 sec
        }, 10000);
    }

}

DEMO

【讨论】：

非常感谢 razzak，它运行良好，并且在缺少（空）表单值的情况下正确地阻止了表单提交。虽然我不是 100% 确定我理解你的代码为什么会这样做（防止表单提交），但 MickJ 的不是
欢迎您，这是因为提交按钮将提交表单而不管 javascript，除非您使用 event.preventDefault 阻止它的默认操作 submitting form。
如果听起来有点对抗性，我很抱歉 razzak，但是您在我的代码中哪里看到了“提交”按钮？当然“值”是“提交”，但类型是“按钮”而不是“提交”。
我一定是看错了，我以为是input type="submit"，在这种情况下我不确定为什么你的代码不起作用

【解决方案2】：

以下是一个可行的解决方案（可能不是最好的或理想的），它也应该适合你。尝试将该功能附加到提交按钮。使其键入“按钮”将“显示”附加到其单击事件并稍微修改“显示”方法，如下所示。希望这会有所帮助：

<html>
<head>
<script type = "text/javascript">

function notEmpty(elem, helperMsg){
    if (elem.value.length == 0) {
        alert(helperMsg);
        elem.focus(); // set the focus to this input
        return false;
    }
    return true;
}

function show() {
    if ((notEmpty(document.getElementById('length'), 'Please Enter a Length')==true) &&
        (notEmpty(document.getElementById('height'), 'Please Enter a Height')==true) &&
        (notEmpty(document.getElementById('weight'), 'Please Enter a Weight')==true)) {
        document.getElementById("myDiv").style.display="block";
        setTimeout("hide()", 10000);  // 10 seconds
        document.getElementById("myform").submit();
    }
}
function hide() {
    document.getElementById("myDiv").style.display="none";
}
</script>
</head>
<body>
<form id="myform" action="someAction" onSubmit="show()">
    <input type="text" id="length"/>
    <input type="text" id="height"/>
    <input type="text" id="weight"/>
    <input type="button" value="submit" id="mySubmitBtn" onClick="show()"/>
</form>
<div id="myDiv"></div>
</body>
</html>

【讨论】：

我只是尝试运行它，但没有运气......我将尝试使用上面建议的 console.log 函数。作为一个新手，我绝对会感谢任何关于如何做得更好的简短 cmet
请参阅上面的替代解决方案。那应该对你有用（对我有用）。与此同时，当我有更多时间时，我会尝试制定一个更清洁的解决方案。
感谢这工作得很好（在有效的表单提交上加载启动画面，在无效时显示错误消息），除了表单似乎仍然提交无效的输入案例。我将阅读更多关于 jquery 函数的内容，如您上面所建议的那样。谢谢
当然，学习做最好的方法总是最好的。虽然我很好奇，因为它对我来说非常有效。作为证据：jsfiddle.net/K4EBU/4 我很想知道为什么它对无效入境案例不起作用。