Question

理想情况下，我想要发生的是触发一个我已经在我的电子邮件span / form元素中已经拥有的相同功能，但是我是JQuery的新手并且无法完全理解它。无论如何，所以在我的电子邮件功能中，它基本上抓住用户输入并触发css类“form span error”，它将span元素变为红色。在用户输入“@”符号之前，触发“形式范围有效”。我还想让JQuery在productId forum / span元素上触发“form span.error”规则。能有人解释一下吗？ 以下是范围的CSS规则：

#form span {
    border-radius: 20px;
    margin-left:15px;
    padding: 8px 35px;
    background: #FA5700;
    color:#faf3bc;
}
#form span.valid {
    background-color :#c0ce51;
    color: #faf3bc;
}
#form span.error {
    background-color:#b0240f;
    color: #faf3bc;
}

HTML / JQUERY：

   <form method="post" action="contact-thanks.php">

                    <p>
                            <label for="name">Name:</label>
                            <input type="text" name="name" id="name" class="required" value="<?php if (isset($name)) { echo htmlspecialchars($name); } ?>">
                            <span>Please enter your name</span>
                    </p>

                    <p>
                            <label for="email">Email:</label>
                            <input type="text" name="email" id="email" class="required" value="<?php if(isset($email)) { echo htmlspecialchars($email); } ?>">
                            <span>Please enter a valid email address</span>
                    </p>

                    <p> 
                            <label for="productId">Product Id:</label>
                            <input type="text" name="productId" id="productId" class="required" value="<?php if(isset($productId)) { echo htmlspecialchars($productId); } ?>">
                            <span>Please enter a ID number</span>
                    </p>
               <p class="submit">
                    <input type="submit" value="Submit" class="btn-submit">
                </p>
            </form>

</div>
<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        var $submit = $(".submit input");
        var $required = $(".required");
        function containsBlanks(){
            var blanks = $required.map(function(){ return $(this).val() == "";});
            return $.inArray(true, blanks) != -1;
        }
        //Checks for valid email
        function isValidEmail(email){
            return email.indexOf("@") != -1;
        }
        //Does not let the user submit if all text fields are not filled in
        function requiredFilledIn(){
            if(containsBlanks() || !isValidEmail($("#email").val())) 
                $submit.attr("disabled","disabled");
            else 
                $submit.removeAttr("disabled");
        }

        //Here's what I've tried, I'm playing around with it here for testing purposes
        //I'm afraid this syntax is terribly wrong  
        $("#productId").focus(function(){

            $(this).next().removeClass("valid").addClass("error");
        });
        $("#form span").hide();
        $("input,textarea").focus(function(){
            $(this).next().fadeIn("slow");
        }).blur(function(){
            $(this).next().fadeOut("slow");
        }).keyup(function(){
            //Check all required fields.
            requiredFilledIn();
        });

        $("#email").keyup(function(){
            //Check for a valid email.
            if(isValidEmail($(this).val()))
             $(this).next().removeClass("error").addClass("valid");
            else 
             $(this).next().removeClass("valid").addClass("error");
        });




        requiredFilledIn();
    </script>

提前感谢任何帮助！

Answer 1

经过一些简单的实验，我发现了它。如果有人好奇，这是代码：

$("#productId").show(function(){
                $(this).next().fadeIn("slow").removeClass("valid").addClass("error");
            });

触发不同span元素上的类似JQuery元素

1 个答案: