Jquery form validation - dynamic form name

Question

I need a litle help to validate my form:

Now, i use this code to validate my form:

 $(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",

            }
        });
});

And i have this search form, in the for cycle:

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>";

}

Unfortunatelly with this code only the first search form is working and validated , and the next forms didnt. So i think:

i have to modify the from name and id to:

<form name='set_search$i' id='set_search$i'
and i have to modify the validation to something like this:

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

But this not ok. Could you help someone? Thx.

andres descalzo · Accepted Answer · 2009-08-13 11:47:28Z

though Kieran Hayes's response.

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

but, the generated html (DOM) would be wrong. should be changed by:

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>";

}

in javascript

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

or

 $("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>

I change $("input[id^='set_search']") x $("form[id^='set_search']")

Kieran Hayes · Accepted Answer · 2009-08-12 14:54:13Z

1

Just attach a class name to the forms that have to be validated.

answered Aug 12, 2009 at 14:54

Kieran Hayes

6416 silver badges12 bronze badges

Comments

Steerpike · Accepted Answer · 2009-08-12 14:59:59Z

0

This should find all forms that have 'set_search' in their id:

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

This one should find all forms that start with set_search' as their id:

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

Either one should fix your issue.

answered Aug 12, 2009 at 14:59

Steerpike

17.6k8 gold badges41 silver badges54 bronze badges

1 Comment

Holian Over a year ago

This code is should work, but something not ok: I posted an answer with the current code..pls take a look, maybee u see what is wrong..

Holian · Accepted Answer · 2009-08-12 20:42:13Z

This should work now, but something wrong..:

$(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>

Collectives™ on Stack Overflow

Jquery form validation - dynamic form name

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related