Question

没有调用validateRegistrationForm方法，我已经通过在里面放置一个警告进行了测试，并且无法找出原因。

还有其他JavaScript可以验证其他内容，但我已将其删除，直到此问题得到解决。

JavaScript本身通过正文内部的脚本标记链接到HTML。我在JS的顶部发出警告，以确保链接正常工作，并且确实如此。

HTML：

<form name="registrationForm" id="registrationForm" action="AddUserDetails">
    <div class="form-group">
        <label for="firstName">First Name</label>
        <span id="firstNameError">*</span>
        <input type="text" class="form-control" id="firstName">
    </div>
    <div class="form-group">
        <label for="lastName">Second Name</label>
        <span id="lastNameError">*</span>
        <input type="text" class="form-control" id="lastName">
    </div>
    <div class="form-group">
        <label for="phoneNumber">Phone Number</label>
        <span id="phoneNumberError">*</span>
        <input type="text" class="form-control" id="phoneNumber">
    </div>
    <div class="form-group">
        <label for="eMail">E-Mail</label>
        <span id="eMailError">*</span>
        <input type="text" class="form-control" id="eMail">
    </div>
    <div class="form-group">
        <label for="eMailConfirmation">Confirm E-Mail</label>
        <span id="eMailConfirmationError">*</span>
        <input type="text" class="form-control" id="eMailConfirmation">
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <span id="passwordError">*</span>
        <input type="password" class="form-control" id="password">
    </div>
</form>

<div class="text-center">
    <input type="button" id="submitRegistationForm" value="Submit">
</div>

JavaScript的：

var $ = function (id) {
    return document.getElementById(id);
}

var validateRegistrationForm = function () {
    alert("");
    var isValid = true;

    //First Name Validation
    if ($("firstName").value == "") {
        $("firstNameError").firstChild.nodeValue = "This Text Box Cannot Be Blank";
        isValid = false;
    } else {
        $("firstNameError").firstChild.nodeValue = "";
    }

    //Second Name Validation
    if ($("lastName").value == "") {
        $("lastNameError").firstChild.nodeValue = "This Text Box Cannot Be Blank";
        isValid = false;
    } else {
        $("lastNameError").firstChild.nodeValue = "";
    }

    if (isValid) {
        $("registrationForm").submit();
    }
}

window.onload = function () {
    $("submitRegistationForm").onclick = validateRegistrationForm;
}

Answer 1

重新定义$似乎是一个糟糕的主意，特别是如果这是其他开发人员共享的代码。在任何一种情况下，为什么甚至等待window.onload？你可以在它之外声明你的点击处理程序。工作jsfiddle：

$("submitRegistationForm").onclick = validateRegistrationForm;

https://jsfiddle.net/ou3gLLqe/

JavaScript / HTML表单验证问题

1 个答案: