Question

我需要一个litle帮助来验证我的表单：

现在，我使用此代码验证我的表单：

 $(document).ready(function() {

      $("#set_search").validate({
            rules: {
                q: {
                    required: true,
                    minlength: 2
                },
                q2: {

                    number: true
                },

            },
            messages: {
                q: "Please enter your name",
                q2: "Only numbers allowed",

            }
        });
});

我有这个搜索表单，在for循环中：

for ($i=0;$i<5;$i++) {

       echo "<div class='showhide$i'><form name='set_search' id='set_search' action='settings.php' method='get'><p><label for='q1'>name</label><input type='text' id='q' name='q'/></p><p><label for='q2'>number</label><input type='text' id='q2' name='q2' /></p><p><input type='submit' value='Search'/></p></form></div></p>";

}

不幸的是，只有第一个搜索表单正在运行和验证，而下一个表单没有。所以我想：

我必须将from name和id修改为：

＆lt; form name='set_search$i' id='set_search$i'
我必须将验证修改为：

var sr = $（this）.attr（'id'）; $（“＃set_search”+ sr）.validate（{

但这不行。你能帮助别人吗？ THX。

Answer 1

只需将类名附加到必须验证的表单。

Answer 2

虽然Kieran Hayes的回应。

<form class="myxform"... , $(".myxform").validate({...

但是，生成的html（DOM）会出错。应该改变：

for ($i=0;$i<5;$i++) {

       echo "<div class='showhide$i'><form name='set_search_".$i."' id='set_search_".$i."' action='settings.php' method='get'><p><label for='q1'>name</label><input type='text' id='q' name='q'/></p><p><label for='q2'>number</label><input type='text' id='q2' name='q2' /></p><p><input type='submit' value='Search'/></p></form></div></p>";

}

在javascript中

 $("input[id^='set_search']").validate({...

或

 $("input[id^='set_search']").each(function(){
      $(this).validate({...});
 });

--- EDIT

Javascrit：

$(document).ready(function() {
    $("form[id^='set_search']").each(function(){
        alert($(this).attr("id"));
        $(this).validate({
            rules: {
                    q: {required: true, minlength: 2},
                    q2: {number: true}
            },
            messages: {
                    q: "Please enter your name",
                    q2: "Only numbers allowed"
            }
        });
     });
});

HTML：

<div class="showhide_1">
    <form name="set_search_1" id="set_search_1" action="settings.php" method="get">
        <p><label for="q1">name</label><input type="text" id="q" name="q"/></p>
        <p><label for="q2">number</label><input type="text" id="q2" name="q2" /></p>
        <p><input type="submit" value="Search"/></p>
    </form>
</div>
<div class="showhide_2">
    <form name="set_search_2" id="set_search_2" action="settings.php" method="get">
        <p><label for="q1">name</label><input type="text" id="q" name="q"/></p>
        <p><label for="q2">number</label><input type="text" id="q2" name="q2" /></p>
        <p><input type="submit" value="Search"/></p>
    </form>
</div>

Answer 3

这应该找到所有在其ID中都有'set_search'的表单：

$('form[id*="set_search"]').validate();

这个应该找到所有以set_search'开头的表单作为他们的id：

$('form[id^="set_search"]').validate();

任何一方都应该解决你的问题。

Answer 4

这应该现在可以使用，但有些不对劲......：

$(document).ready(function() {



  $('form[id*="set_search"]').validate({

            rules: {
                q: {
                    required: true,
                    minlength: 2
                },
                q2: {
                    email: true
                },

            },
            messages: {
                q1: "Please enter your name",
                q2: "Please enter a valid email address",

            }
        });


    });
</script>
<style type="text/css">
.error {
    color: red;
    font: 12pt verdana;
    padding-left: 10px
}
.input {
    margin-top:10px;
    margin-left:20px;
}
</style>

</head>
<?php include("config/kapcsolat.inc");?>
<body>
<?php
     for($i=0;$i<3;$i++) {

         echo "<p><div class='showhide$i'><form name='set_search".$i."' id='set_search".$i." ' action='settings.php' method='get'><p><label for='q1'>name</label><input type='text' id='q' name='q'/></p><p><label for='q2'>uniqid</label>
<input type='text' id='q2' name='q2' /></p><p><input type='hidden' id='q3' name='q3' value='1' /></p><p><input type='submit' value='Search'/></p></form></div></p>";
}


?>
</body>
</html>

Jquery表单验证 - 动态表单名称

4 个答案: