Question

我正在为我的Javascript课程编写一个编程作业。我们需要创建一个包含验证规则的简单表单。我在实际验证方面遇到了很多麻烦，因为当我通过ID访问元素时，它似乎无法正常工作。如果验证失败，表单不应该提交并且应该显示错误消息，但由于某种原因，我无法使其工作。

我搜索了与此主题相关的其他帖子： Post 1, Post 2 ......但我仍然无法让它发挥作用。非常感谢任何帮助。

外部：Jsbin

<html>
<head>
    <title>Sam H - Assignment 2</title>
    <script>

    function focus() {
    var firstName = document.getElementById('firstName');
    firstName.focus();
    }

    function validation() {
        var errors = "";
        var firstName = document.getElementById("firstName").value;
        var lastName = document.getElementById("lastName").value;
        var email = document.getElementById("email").value;
        var confirmEmail = document.getElementById("confirmEmail").value;
        var password = document.getElementById("password").value;
        var birthday = document.getElementById("birthday").value;
        var country = document.getElementById("country").value;
        var city = document.getElementById("city").value;



        if(firstName == "") {

        errors = errors + "Please enter your first name. ";
        }


        if(lastName = "") {

        errors = errors + "Please enter your last name. ";

        }


        if(email = "") {

        errors = errors + "Please enter your email. ";

        }

        if(confirmEmail == "") {

        errors = errors + "Please confirm your email. ";

        }

        if(password == "") {

        errors = errors + "Please enter your password. ";

        }

        if(birthday == "") {

        errors = errors + "Please enter your birthday. ";

        }

        if (email != confirmEmail) {

        errors = errors + "Emails do not match. ";
        }

        var cityLength = city.length;
        if (cityLength > 12) {
        errors = errors + "Your city length must be less than 12 characters. ";
        }



        if (errors.length > 0) {
        document.getElementById("errortitle").innerHTML = "Errors:";
        document.getElementById("errors").innerHTML = " " + errors;
        return false;
        } else {
        return true;
        }
    }


        /*if (firstName.value = "" ||
            lastName.value = "" ||
            email.value = "" ||
            confirmEmail.value = "" ||
            password.value = "") {

        alert("Please fill all required fields.");

        return false;

        } */
        </script> 
</head>

<body onload="focus()">


    <form name="form1" method="POST" onsubmit="return validation();">
    <p>*First Name:</p>
    <input type="text" name="first" id="firstName">

    <p>*Last Name:</p>
    <input type="text" id="lastName" name="last">

    <p>*Email:</p>
    <input type="text" id="email" name="email">

    <p>*Confirm Email:</p>
    <input type="text" id="confirmEmail" name="confirm">

    <p>*Password:</p>
    <input type="password" id="password" name="pass">

    <p>*Birthday:</p>
    <input type="date" id="birthday" name="birth">

    <p>Nickname:</p> 
    <input type="text" id="nickname" name="nick">

    <p>Gender:</p>
    <select name="genders" id="genderList">
    <option value="female">Female</option>
    <option value="male">Male</option>
    </select>

    <p>Country</p> 
    <input type="text" id="country" name="userCountry"> 

    <p>City:</p>
    <input type="text" id="city" name="userCity">

    <br>
    <br>

    <input type="submit" value="Submit" action="return validation();">

    </form>

    <h1 id="errortitle"></h1>
    <p id="errors"></p>



</body>

Answer 1

代码末尾有一个多余的}。 lastName字段的id设置为“last”，导致它找不到它。您的变量也包含字段的值，而不是字段本身，因此没有为它们定义焦点方法。城市字段处理不正确。

输入标签也没有结束标记，但大多数浏览器都会忽略它。

如果你修复了上述错误，代码就可以了。

<script>

function focus() {
    var firstName = document.getElementById('firstName');
    firstName.focus();
}

function validation() {
    var errors = "";
    var firstName = document.getElementById("firstName");
    var lastName = document.getElementById("last");
    var email = document.getElementById("email");
    var confirmEmail = document.getElementById("confirmEmail");
    var password = document.getElementById("password");
    var birthday = document.getElementById("birthday");
    var country = document.getElementById("country");
    var city = document.getElementById("city");

    if (firstName.value == "") {
        firstName.focus();
        errors = errors + "Please enter your first name. ";
    }

    if (lastName.value = "") {
        lastName.focus();
        errors = errors + "Please enter your last name. ";
    }

    if (email.value = "") {
        email.focus();
        errors = errors + "Please enter your email. ";
    }

    if (confirmEmail.value == "") {
        confirmEmail.focus();
        errors = errors + "Please confirm your email. ";
    }

    if (password.value == "") {
        password.focus();
        errors = errors + "Please enter your password. ";
    }

    if (birthday.value == "") {
        birthday.focus();
        errors = errors + "Please enter your birthday. ";
    }

    if (email.value != confirmEmail.value) {
        email.focus();
        errors = errors + "Emails do not match. ";
    }

    var cityLength = document.getElementById('city').value.length;
    if (cityLength > 12) {
        errors = errors + "Your city length must be less than 12 characters. ";
    }

    if (errors.length > 0) {
        document.getElementById("errortitle").innerHTML = "Errors:";
        document.getElementById("errors").innerHTML = " " + errors;
        return false;
    } else {
        return true;
    }
}

 </script>

表单提交未经Javascript验证

1 个答案: