Question

我的网页上有一些表单字段，其中包含一个提交它的按钮。如果在生成错误消息时字段为空，则会生成错误消息。

Html代码：

<div class = "contacts">
        <div class = "container-fluid">
            <center><text><b>Contact Me!</b></text></center>
            <center><form role="form">
                <div class = "form-group">
                    <label for="inputname"></label>
                    <input type ="text" class = "form-control" id = "inputname" placeholder = "Name" >
                    <span></span>
                </div>


                <div class = "form-group">
                    <label for="inputemail"></label>
                    <input type ="email" class = "form-control" id = "inputemail" placeholder = "Email Address"  >
                    <span></span>
                </div>


                <div class = "form-group">
                    <label for="inputphone"></label>
                    <input type ="number" class = "form-control" id = "inputphone" placeholder = "Phone Number" >
                    <span></span>
                </div>


                <div class = "form-group">
                    <label for="inputmessage"></label>
                    <textarea type ="text" class = "form-control" id = "inputmessage" rows = "5" placeholder = "Message" ></textarea>
                    <span></span>
                </div>

            <div class = "form-group">
                <center><button type="submit">SEND</button></center>
            </div>
        </form></center>
    </div>
</div>

Jquery脚本：

                $("form").submit (function () {
                    var flag = 0;
                    if ($ ("#inputname").val() === "") {
                        $("#namespan").text("*Enter your name please!").show();
                        flag = 1;


                    }

                    if ($ ("#inputemail").val() === "") {
                        $("#emailspan").text("*Enter your email id please!").show();
                        flag = 1;


                    }

                    if ($ ("#inputphone").val() === "") {
                        $("#phonespan").text("*Enter your phone number please!").show();

                        flag = 1;
                    }

                    if ($ ("#inputmessage").val() === "") {
                        $("#msgspan").text("*Enter your message please!").show();
                        flag = 1;

                    }

                    if (flag === 0){
                        return true;

                    } else {
                        return false;
                    }

                });

如何在点击表单字段时清除消息以输入内容？

Answer 1

你可以这样做：

$("input, textarea").focus(function(){
    $(this).next("span").empty();
});

当您专注于input或textarea时，会找到旁边的span，并清空其内容（您可以将其更改为hide()）

演示：http://jsfiddle.net/alan0xd7/Lww8hnfj/

注意：由于您的id中没有正确的span，您的代码实际上无法正常运行，因此我冒昧地为您解决了这个问题。

Answer 2

为每个输入提供一个类，例如，.input和最近的错误消息跨越一个类，例如.error，以使其更容易一些。或...：

$('input, textarea').focus(function() { 
    $(this).parent().find('span').hide();
});

您也可以用同样的方式改进当前的脚本：

var valid = true;
$('input, textarea').each(function(i, el) {
    if ($(this).val() === "") { 
        valid = false;
        $(this).parent().find('span').show();
    }
});

另外要小心，因为目前您的验证将允许输入仅包含空格。

使用Jquery在单击表单字段时清除错误消息

2 个答案: