错误消息在简单 javascript 表单验证中不起作用

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 表单验证中不起作用

Error message not working in simple javascript form validation

javascript

validation

message