不使用插件的Jquery验证消息

Question

    <form action="" method="post" class="a">
        Name : <input type="text" class="text" name="name" id="name" /> <br/>
<span id="sName"></span>
        Address : <input type="text" class="text" name="address" id="address" /> 
<span id="sAddress"></span>
<br/>
        email : <input type="text" class="text" name="email" id="email" /> <br/>
<span id="sEmail"></span>
        <input type="button" id="submit" value="Submit" name="submit" />
    </form>

如何在提交点击

上显示span标记中的错误消息

Answer 1

这是一种不使用插件的方法（这比使用插件更好，因为他们有更多的选择）

工作代码：

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

    $("#submit").click(function () {

        if (name == "") $("#sName").show();

        if (name == "") $("#sAddress").show();

        if (name == "") $("#sEmail").show();

    });


});

#sName, #sAddress, #sEmail {
    display: none;
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" class="a">Name :
    <input type="text" class="text" name="name" id="name" />
    <br/>
<span id="sName">Please enter your name</span>

    <br>Address :
    <input type="text" class="text" name="address" id="address" />
    <br>
<span id="sAddress">Please enter your address</span>

    <br>email :
    <input type="text" class="text" name="email" id="email" />
    <br/>
<span id="sEmail">Please enter your e-mail</span>

    <br>
    <input type="button" id="submit" value="Submit" name="submit" />
</form>