Question

我正在尝试执行一项简单的任务。我想验证表单或显示一条消息，说明“请填写表单！”＃39;我忽视了什么，因为除了信息之外的所有作品？我怎样才能做到这一点，或者我只是遗漏了什么？我已经尝试将脚本放在顶部和底部，但我想在底部，因为我希望页面加载更快而不是为JS暂停。

<!Doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Index</title>
    <!--[if it IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![end if]-->

    <link rel="stylesheet" href="styles.css">

</head>
<body>

<form action="login.php" method="post" id="loginForm">
    <fieldset>
        <legend>Login</legend>
        <div><label for="email">Email Address</label>
            <input type="email" name="email" id="email" required></div>

        <div><label for="password">Password</label>
            <input type="password" name="password" id="password" required></div>

        <div><label for="submit"></label><input type="submit" value="Login &rarr;" id="submit"></div>
    </fieldset>
</form>

<script src="login.js"></script>


</body>
</html>

JS

function validateForm() {
    'use strict';


    var email = document.getElementById('email');
    var password = document.getElementById('password');


    if ( (email.value.length > 0) && (password.value.length > 0) ) {
        return true;
    } else {
        alert('Please complete the form!');
        return false;
    }

} 


function init() {
    'use strict';


    if (document && document.getElementById) {
        var loginForm = document.getElementById('loginForm');
        loginForm.onsubmit = validateForm;
    }

} 
window.onload = init;

Answer 1

如果您想使用自己的验证而不是浏览器对必填字段的内置检查，请从required标记中删除<input>属性。

DEMO

为什么我的表单没有显示验证错误？

1 个答案: