我的表单的validate()不起作用

时间:2017-07-23 13:38:24

标签: javascript html forms validation

没有工作!我在表单中的注册按钮中添加了onSubmit =“validate()”,如果字段为空,我会创建函数和警报。但是没有工作! 控制台中没有警报没有错误。没希望!

<head>
    <title>WHAT THE TECH!</title>
    <script type="text/javascript">
    function validate() {
        let fullname = document.getElemenyByname("full_name").value;
        let email = document.getElemenyById("email").value;
        let pass = document.getElemenyById("password").value;
        let add = document.getElemenyById("address").value;
        if (fullname == "" || fullname.length == 0) {
            alert("Enter Full Name");
            document.getElemenyById("full_name").focus;
            return false;
        } else if (email == "" || email.length == 0) {
            alert("Enter Email Address!");
            document.getElemenyById("email").focus;
            return false;
        }
    }
    </script>
</head>

<body>
    <div class="mainwrap">
        <div class="content">
            <div class="SignUp">
                <div class="Formup">
                    <div class="title">New here? Register!</div>
                    <form name="register">
                        <table>
                            <tr>
                                <td>Full Name: </td>
                                <td><input type="text" id="full_name">
                                </td>
                            </tr>
                            <tr>
                                <td>Email: </td>
                                <td><input type="text" id="email">
                                </td>
                            </tr>
                            <tr>
                                <td>Password: </td>
                                <td><input type="password" id="password">
                                </td>
                            </tr>
                            <tr>
                                <td>Country: </td>
                                <td>
                                    <select>
                                        <option value="U.A.E">U.A.E</option>
                                        <option value="K.S.A">K.S.A</option>
                                        <option value="Qatar">Qatar</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>Gender: </td>
                                <td>
                                    <input type="radio" name="gender" value="male" checked> Male<br>
                                    <input type="radio" name="gender" value="female"> Female<br>
                                    <input type="radio" name="gender" value="other"> Other
                                </td>
                            </tr>
                            <tr>
                                <td>Address: </td>
                                <td><input type="text" id="address">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="submit" value="Register" class="registerbutton" name="register" onSubmit="validate()">
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                </div>
            </div>
        </div>
</body>

1 个答案:

答案 0 :(得分:0)

如果要使用name属性获取值,则应使用document.getElementsByName。我建议用&#34; id&#34;属性。

function submitFunction() {
        var firstName = document.getElementsByName("first_Name")[0].value;
         if (firstName == "" || firstName == null || firstName.length == 0) {
            alert("First Name is required");
            return false;
        } 
    }

同时将返回添加到onsubmit事件中以避免页面刷新。

<form name="Register" onsubmit="return submitFunction() " method="post">

选项2:使用HTML5

必需属性将执行验证检查,您可以跳过javascript。

<input type="text" name="first_Name" required>