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

【问题标题】：Jquery form validation - dynamic form nameJquery 表单验证 - 动态表单名称
【发布时间】：2009-08-12 14:51:37
【问题描述】：

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

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

 $(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 修改为：

form name='set_search$i' id='set_search$i'
我必须将验证修改为这样的：

var sr= $(this).attr('id'); $("#set_search" +sr).validate({

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

【问题讨论】：

标签： php jquery validation

【解决方案1】：

虽然 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({...});
 });

---编辑

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>

【讨论】：

我改变 $("input[id^='set_search']") x $("form[id^='set_search']")

【解决方案2】：

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

【讨论】：

【解决方案3】：

这应该会找到所有在其 id 中包含“set_search”的表单：

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

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

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

任何一个都可以解决您的问题。

【讨论】：

这段代码应该可以工作，但有些问题：我用当前代码发布了一个答案..请看一下，也许你知道出了什么问题..

【解决方案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>

【讨论】：