jQuery验证无法以联系方式工作

时间:2016-09-23 17:06:26

标签: javascript jquery html email

我想通过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('');
        }
    });        
});

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

1 个答案:

答案 0 :(得分: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('');
        }
    });        
});