Question

以下代码在提交时无法显示错误消息。

问题是单击一次后错误消息显示不正确，但如果多次点击则错误消息有效。

帮助将不胜感激。

由于

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>JavaScript form validation - checking all letters</title>

    <style type="text/css">    
        li {list-style-type: none;
        font-size: 16pt;
        }
        .mail {
            margin: auto;
            padding-top: 10px;
            padding-bottom: 10px;
            width: 400px;
            background : #D8F1F8;
            border: 1px soild silver;
        }
        .mail h2 {
            margin-left: 38px;
        }
        input {
            font-size: 20pt;
        }
        input:focus, textarea:focus{
            background-color: lightyellow;
        }
        input submit {
            font-size: 12pt;
        }
        .rq {
            color: #FF0000;
            font-size: 10pt;
        }
    </style>

</head>
<body onload='document.form1.text1.focus()'>
    <div class="mail">
        <h2>Enter your Name and Submit</h2>
        <form name="form1" action="#">
            <ul>
                <li>
                    Code:
                </li>
                <li id="myList">
                    <input type='text' name='text1'/>
                    <p id="error"></p>
                </li>
                <li class="rq">
                    *Enter alphabets only.
                </li>
                <li>&nbsp;</li>
                <li>
                    <input type="submit" name="submit" value="Submit" onclick="allLetter(document.form1.text1)" />
                </li>
                <li>&nbsp;</li>
            </ul>
        </form>
    </div>

    <script type="text/javascript">
        function allLetter(inputtxt) {     
            var letters = /^[A-Za-z]+$/;
            if(inputtxt.value.match(letters)) {
                document.getElementById("error").innerHTML="error here";
                return false;
            } else {
                document.getElementById("error").innerHTML="success";
                return true;
            }
        }
    </script>
</body>
</html>

Answer 1

您的问题和解决方案非常简单。

当您单击表单按钮时，表单会自动提交，这就是您什么也看不见的原因。将其添加到按钮代码中，以便阻止提交输入的默认功能：

<input type="submit" name="submit" value="Submit" onclick="allLetter(document.form1.text1);return false" />

那应该解决它：

Answer 2

您应该使用event.preventDefault方法来阻止页面刷新。所以，你的函数应该是这样的：

    function allLetter(event) {
        event.preventDefault();
        var letters = /^[A-Za-z]+$/;
        if (document.form1.text1.value.match(letters)) {
            document.getElementById("error").innerHTML="error here";
            //return false;
        } else {
            document.getElementById("error").innerHTML="success";
            return true;
        }
    }

应该通过以下方式调用它： <input type="submit" name="submit" value="Submit" onclick="allLetter(event)" />

错误消息无法在简单的JavaScript表单验证中工作

2 个答案: