Question

我试图创建一个动态的联系表单错误检查脚本......除了当我尝试在输入字段的正上方更改html元素的类时，一切正常。其他＆＃39; s我的代码：

<div class="container">
                <div class="row">
                    <div class="col-sm-4">
                        <h4>Address:</h4>
                        <address>
                            <p>
                                Plot 12<br>
                                Ogudu Phase 2 <br>
                                Ogudu Lagos <br>
                                <a href="mailto:marketing@businessplusng.com">marketing@businessplusng.com</a>
                            </p>
                        </address>
                    </div>
                    <form method="post" id="contactform" class="form-minimal">
                        <div class="col-sm-4"> 
                            <div class="form-group">
                                <label for="name">Name</label>
                                <input type="text" class="form-control" name="name" id="name" placeholder="Enter name"  title="Please enter your name (at least 2 characters)"/>
                                <div class="form-line"></div>
                            </div>

                            <div class="form-group">
                                <label for="email">Email</label>
                                <input type="email" class="form-control" name="email" id="email" placeholder="Enter email" title="Please enter a valid email address"/>
                                <div class="form-line"></div>
                            </div>

                            <div class="form-group">
                                <label for="phone">Phone</label>
                                <input name="phone" class="form-control required digits" type="tel" id="phone" size="30" value="" placeholder="Enter email phone" title="Please enter a valid phone number (at least 10 characters)">
                                <div class="form-line"></div>
                            </div>

                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="comments">Your Brief</label>
                                <textarea name="comment" class="form-control" id="comments" cols="3" rows="5" placeholder="Enter your message…" title="Please enter your message (at least 10 characters)"></textarea>
                                <div class="form-line"></div>
                            </div>


                        </div>                        
                        <div class="col-md-8 col-md-offset-4">
                            <button name="submit" type="submit" class="btn large primary" id="submit"> Submit</button>
                            <div class="result"></div>
                        </div>
                    </form>

这是我的javascript代码

var form = $("#contactform");
var submit= $("#submit");
var name =$("#name");
var email =$("#email");
var comments =$("#comments");
form.submit(function(e) {
    e.preventDefault();
if($("input#name").val().length < 10)
    {
        $(this).parent(".form-group").addClass("has-error");
    }
    else
    {
        submit.addClass("disabled").html("Please wait");
        $.post("email.php",form.serialize(),"text")
        .done(function(data){
            submit.removeClass("disabled").html("Mail Sent");
            alert(data);
        })
        .fail(function(data)
        {   submit.removeClass("disabled").html("Mail Failed");
        });
    }
});

所以基本上当我调用.parent（）。addClass（）...它一直到地址列上方的行div ...我怎么能解决这个问题直接在名称输入元素上方（即父表格组div）

非常感谢任何帮助

Answer 1

您在表单提交功能中引用的$(this)是$("#contactform")本身的格式，而不是$("input#name")。因此$(this).parent()引用了<div class="row">。

实现目标的一种方法是$(this).find("input#name").parent(".form-group").addClass("has-error");

Jquery .parent在DOM中走得太远了

1 个答案: