Question

Can someone give me a hand with this please? I have been using jquery-validate without issues for html forms until I came across an issue with HTML forms embedded in php.

The example below is using jquery and jquery-validate.
Form1 is validating the email field fine. Form3 however is not validating the number field (form3 is embedded in php).

I have attempted to comment out all form1 validation to ensure it wasn’t multiple forms causing the issue.

I also tried commenting out the submitHandler from the javascript for form3 and this prevented form3 from submitting so this tells me that something is working it’s just not validating the number field in form3.

<script>
$(document).ready(function() {
    $("#form1").validate( {
        errorPlacement: function(error, element) {
            error.appendTo( element.parent("span").next("div") );
        },

        debug:true,
        wrapper: "li", 
        submitHandler: function(){
            form.submit();
        },
        rules: {                
            email: {required:false, email:true},
        },

        messages: {
            email: "Enter a valid email address",
        }
    })

    $("#form3").validate( {
        errorPlacement: function(error, element) {
            error.appendTo( element.parent("span").next("div") );
        },

        debug:true,
        wrapper: "li", 
        submitHandler: function(){
            form3.submit();
        },

        rules: {                
            quotaLimit: {required:true, number:true},
        },

        messages: {
            quotaLimit: "Enter a valid quota limit",
        }
    })
});
</script>

<br>

<div class="tab-button-row" style="position:relative;">
<a href="#" class="tab-button" onclick="toggleTab('editUserContent', 'details');">User Details</a>
<a href="#" class="tab-button" onclick="toggleTab('editUserContent','quotas');">Quota and Limits</a>
</div>
<br>

<div id="editUserContent">
<div id="details">
    <form id=form1 method=POST
          action="index.php?function=edituser&command=save&username=<?php echo $user->{"username"}; ?>"
          name=form>

        <?php
        if ($user->{'authenticationType'} == 0) {
            $visible = "";
        } else {
            $visible = "style='display:none;'";
        }
        ?>

        <table class="list">
            <tr>
                <td colspan=5><b>Edit Details</td>
                </td>
                <td width=25%><input type=submit value=save></td>
            </tr>

            <tr>
                <td>First Name:</td>
                <td>
                    <input name="fname" value="<?php echo $user->{"fname"};?>">
                </td>
                <td>Last Name:</td>
                <td>
                    <input name="lname" value="<?php echo $user->{"lname"};?>">
                </td>
                <td>Email:</td>
                <td>
                    <span>
                    <input name="email" value="<?php echo $user->{"email"};?>" class='validate'>
                    </span>
                <div></div>
                </td>
            </tr>
        </table>

        <br>
        <table class="list" <?php echo $visible; ?>>
            <tr>
                <td colspan=5><b>Password Settings</td>
                </td>
                <td width=25%><input type=submit value=save></td>
            </tr>
            <tr>
                <td>Set Password</td>
                <td><input type=checkbox name=change_password></td>
                <td>New Password:</td>
                <td><input name="password" type=password></td>
                <td>Re-enter Password:</td>
                <td><input name="re_password" type=password></td>
            </tr>
        </table>
    </form>
</div>

<div id="quotas">
    <?php
    $table = new Table();
    $name = new Column("Quota Period");
    $name->render = function($data, $id)
    {
        echo $data->{'period'};
    };

    $desc = new Column("Quota Limit(MB)");
    $desc->render = function($data, $id)
    {
        echo $data->{'quotaLimit'};
    };

    $owner = new Column("Group Owner");
    $owner->render = function($data, $id)
    {
        if (isset($data->{'owner'})) {
            echo "<a href=index.php?function=editgroup&group=" . $data->{'ownerid'} . ">" . $data->{'owner'} . "</a>";
        }
    };

    $reached = new Column("Quota Reached");
    $reached->render = function($data, $id)
    {
        if ($data->{'exceeded'} == true) {
            echo "true";
        } else {
            echo "false";
        }
    };

    $ops = new Column("Operations");
    $ops->render = function($data, $id)
    {
        if (!isset($quotas[$i]->{'owner'})) {
            echo "<a href=index.php?function=edituser&command=deletequota&username=" . $_GET['username'] . "&period=";
            echo $data->{'period'} . "&quotaLimit=" . $data->{'quotaLimit'} . ">delete</a>";
        }
    };

    $table->addColumn($name);
    $table->addColumn($desc);
    $table->addColumn($owner);
    $table->addColumn($reached);
    $table->addColumn($ops);
    $table->setData($quotas);
    $table->footerMethod = function($footerArgs)
    {
        echo" <form id=form3 method=POST action=index.php?function=edituser&command=addquota&username=" . $_GET['username'] . ">";
        echo "<tr><td>";
        echo "<select name='period'>";
        echo "<option>NONE</option>";
        echo "<option>DAY</option>";
        echo "<option>WEEK</option>";
        echo "<option>MONTH</option>";
        echo "</select>";
        echo "</td>";

        echo "<td>";
        echo "<span><input name=quotaLimit class='validate' /></span><div></div>";
        echo "</td>";

        echo "<td></td>";
        echo "<td></td>";
        echo "<td><input type=submit value='Add/Set'></td></tr>";
        echo "</form>";
    };

    $table->render();
    ?>

</div>
</div>

<script type="text/javascript">
initToggleTab("editUserContent", "details");
</script>

Answer 1

Thanks for the help. Managed to fix the issue by moving the form tags outside of the table to where it is rendered by php:

    $table->footerMethod = function($footerArgs)
    {
        echo "<tr><td>";
        echo "<select name='period'>";
        echo "<option>NONE</option>";
        echo "<option>DAY</option>";
        echo "<option>WEEK</option>";
        echo "<option>MONTH</option>";
        echo "</select>";
        echo "</td>";

        echo "<td>";
        echo "<span><input name=\"quotaLimit\" class=\"validate\" type='text' /></span><div></div>";
        echo "</td>";

        echo "<td></td>";
        echo "<td></td>";
        echo "<td><input type=submit value='Add/Set'></td></tr>";
    };

    echo" <form id=form3 method=POST action=index.php?function=edituser&command=addquota&username=" . $_GET['username'] . ">";
    $table->render();
    echo "</form>";