Question

我是jQuery的新手，我希望做一个简单的表单验证。因此，如果指定文本字段的值是空字符串，我希望显示相关的div元素。

到目前为止我的HTML和jQuery都在下面，任何帮助都会很棒。

<form id="frm">
    <p>Please enter your name</p>
    <input type="text" id="txtname" autofocus >
    <span id="msg_name"></span>

    <p>Please enter your surname</p>
    <input type="text" id="txtsurname" > <span id="msg_surname"></span>

    <input type="submit" id="send" value="Submit">
</form>

$(document).ready(function() {  
    $("#frm").submit(function(event) {      
        var vname = $("#txtname").val(),
            vsurname = $("#txtsurname").val();      

        if(vname == "") {           
            $("#msg_name").text("Please fill this out");
            event.preventDefault();         
        } else if (vsurname == "") {                
            $("#msg_surname").text("Please fill this out");
            event.preventDefault();
        }       
    });
});

Answer 1

使用插件进行制作会更合适，但这里的学习练习如下：

首先，您需要使用submit事件，而不是click，否则键盘将绕过验证并允许提交。

$("form").submit(function (e) {

从验证消息的公共类开始，并隐藏那些具有CSS样式的类。

.validation{
    display: none;
}

还要对要验证的项目使用公共类。如果您遵循模式（例如class="validate"）：

，则不需要ID

<input class="validate" type="text" id="txtsurname" />

然后验证只是循环遍历需要验证的每个输入，并检查它们是否为空白。如果是，则显示带有消息的next() .validation元素，并停止表单提交（使用e.preventDefault()）：

    $('.validate', this).each(function () {
        if ($(this).val() == "") {
            // Stop the form submitting
            e.preventDefault();
            // Show the assciated message
            $(this).next('.validation').show();
        } else {
            $(this).next('.validation').hide();
        }
    });

这里全部放在一起：

JSFiddle： http://jsfiddle.net/TrueBlueAussie/q8Lce28u/

正如@Matt Browne指出的那样，您可能希望忽略字段中的空白区域，因此也可以使用$.trim()修剪结果。

JSFiddle： http://jsfiddle.net/TrueBlueAussie/q8Lce28u/1/

没有插件的jQuery表单验证

1 个答案: