javascript - jQuery 验证在联系表单中不起作用

Question

我想通过 jQuery 进行验证。我有两个字段名称和电子邮件。电子邮件空白字段验证不起作用。

这是我的代码，

<form>
    Name : <input type="text" name="name" id="name"><br>
    <span id="nameSpan"></span>
    <br>
    Email:<input type="email" name="email" id="email1"><br>
    <span id="emailSpan"></span>
    <br>
    <input type="submit" id="submitBtn">
</form>

JavaScript

$(document).ready(function(){
    var name = $("#name").val();
    var email1 = $("#email1").val();

    $("#submitBtn").on("click", function(){
        if(name == '')
        {
            $("#nameSpan").html('Name is required');
            return false;
        }
        else
        {
            $("#nameSpan").html('');
        }

        if(email1 == '')
        {
            $("#emailSpan").html('Email is required');
            return false;
        }
        else
        {
            $("#emailSpan").html('');
        }
    });        
});

请指导我哪里错了。提前致谢

Answer 1

您在页面加载时仅检查一次输入值。我们每次都需要检查它们，所以让我们将这部分移到 onclick 函数中。

$(document).ready(function(){

    $("#submitBtn").on("click", function(){
        var name = $("#name").val();
        var email1 = $("#email1").val();

        if(name == '')
        {
            $("#nameSpan").html('Name is required');
            return false;
        }
        else
        {
            $("#nameSpan").html('');
        }

        if(email1 == '')
        {
            $("#emailSpan").html('Email is required');
            return false;
        }
        else
        {
            $("#emailSpan").html('');
        }
    });        
});