Javascript表单验证错误

Question

我正在尝试使用javascript来设置注册表单，以确认用户是否在每个输入字段中输入了内容。现在，如果我点击提交按钮，则没有任何反应：（。

<form name="registration" id="registration">
                <label class="registration-spacing">
                    <input id="first-name-registration" type="text" name="first-name-registration" placeholder="First Name" size="35">
                </label>
                <label class="registration-spacing">
                    <input id="last-name-registration" type="text" name="last-name-registration" placeholder="Last Name" size="35">
                </label>
                <label class="registration-spacing">
                    <input id="date-of-birth-registration" type="text" name="date-of-birth-registration" placeholder="Date of Birth" size="35">
                </label>
                <label class="registration-spacing">
                    <input id="email-registration" type="text" name="email-registration" placeholder="Email" size="35">
                </label>
                <label class="registration-spacing">
                    <input id="username-registration" type="text" name="username-registration" placeholder="Username" size="35">
                </label>
                <label class="registration-spacing">
                    <input id="password-registration" type="password" name="password-registration" placeholder="Password" size="35">
                </label>
                <label class="registration-spacing">
                    <button type="button" id="submit-registration" onclick="registrationValidation()">Submit</button>
                </label>
            </form>

function registrationValidation() {
        var fName = document.forms["vaidation"].first-name-registration.value;
        var lName = document.forms["validation"].last-name-registration.value;
        var dob = document.forms["validation"].date-of-birth-registration.value;
        var email = document.forms["validation"].email-registration.value;
        var username = document.forms["validation"].username-registration.value;
        var password = document.forms["validation"].password-registration.value;

        if(fName == "" || lName == "" || dob == "" || email == "" || username == "" || password == "") {
            alert("Please fill out all required fields.");
            return false;
        } else {
            window.location = "file:///E:/Program Files/eclipse/Workspace/Overrated/WEB-INF/homepage.html";
            alert("Registration Successful!");
        }
    }

Answer 1

我建议使用此插件。 http://jqueryvalidation.org/我还建议你使用jQuery。

它非常易于使用，我一直都在使用表格。

以下代码可以正常使用。

但是你没有验证电子邮件是否有效，DOB是否有效，名称是否有效（没有数字......）我可以通过在每个文本框中添加随机内容来注册。

使用内置验证器的HTML5可以更近距离。 Ex <input type="email" name="email" required placeholder="Enter a valid email address">注意必需的属性。此外，type属性也会强制它成为格式正确的电子邮件。

以下是HTML 5表单验证的第一个搜索结果的链接： http://www.the-art-of-web.com/html/html5-form-validation/

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<form name="registration" id="registration">
    <label class="registration-spacing">
        <input id="first-name-registration" type="text" name="first-name-registration" placeholder="First Name" size="35">
    </label>
    <label class="registration-spacing">
        <input id="last-name-registration" type="text" name="last-name-registration" placeholder="Last Name" size="35">
    </label>
    <label class="registration-spacing">
        <input id="date-of-birth-registration" type="text" name="date-of-birth-registration" placeholder="Date of Birth" size="35">
    </label>
    <label class="registration-spacing">
        <input id="email-registration" type="text" name="email-registration" placeholder="Email" size="35">
    </label>
    <label class="registration-spacing">
        <input id="username-registration" type="text" name="username-registration" placeholder="Username" size="35">
    </label>
    <label class="registration-spacing">
        <input id="password-registration" type="password" name="password-registration" placeholder="Password" size="35">
    </label>
    <label class="registration-spacing">
        <button type="button" id="submit-registration" onclick="registrationValidation()">Submit</button>
    </label>
</form>


<script>
    function registrationValidation() {
        var fName = $("#first-name-registration").val();
        var lName = $("#last-name-registration").val();
        var dob = $("#date-of-birth-registration").val();
        var email = $("#email-registration").val();
        var username = $("#username-registration").val();
        var password = $("#password-registration").val();

        if(fName == "" || lName == "" || dob == "" || email == "" || username == "" || password == "") {
            alert("Please fill out all required fields.");
            return false;
        } else {
            window.location = "file:///E:/Program Files/eclipse/Workspace/Overrated/WEB-INF/homepage.html";
            alert("Registration Successful!");
        }
    }
</script>

Answer 2

由于JavaScript存在破折号问题，请将元素的id放在括号内的引号中。表单ID也是注册而不是验证。

function registrationValidation() {
        var fName = document.forms["registration"]["first-name-registration"].value;
        var lName = document.forms["registration"]["last-name-registration"].value;
        var dob = document.forms["registration"]["date-of-birth-registration"].value;
        var email = document.forms["registration"]["email-registration"].value;
        var username = document.forms["registration"]["username-registration"].value;
        var password = document.forms["registration"]["password-registration"].value;

        if(fName == "" || lName == "" || dob == "" || email == "" || username == "" || password == "") {
            alert("Please fill out all required fields.");
            return false;
        } else {
            window.location = "file:///E:/Program Files/eclipse/Workspace/Overrated/WEB-INF/homepage.html";
            alert("Registration Successful!");
        }
    }

<form name="registration" id="registration">
                <label class="registration-spacing">
                </label>
                    <input id="first-name-registration" type="text" name="first-name-registration" placeholder="First Name" size="35">
                <label class="registration-spacing">
                    <input id="last-name-registration" type="text" name="last-name-registration" placeholder="Last Name" size="35">
                </label>
                <label class="registration-spacing">
                    <input id="date-of-birth-registration" type="text" name="date-of-birth-registration" placeholder="Date of Birth" size="35">
                </label>
                <label class="registration-spacing">
                    <input id="email-registration" type="text" name="email-registration" placeholder="Email" size="35">
                </label>
                <label class="registration-spacing">
                    <input id="username-registration" type="text" name="username-registration" placeholder="Username" size="35">
                </label>
                <label class="registration-spacing">
                    <input id="password-registration" type="password" name="password-registration" placeholder="Password" size="35">
                </label>
                <label class="registration-spacing">
                    <button type="button" id="submit-registration" onclick="registrationValidation()">Submit</button>
                </label>
            </form>

Answer 3

尝试使用此方法获取输入值：

var fName = document.getElementById('first-name-registration').value;