How do I validate a form inside a jQuery UI tab?

Question

Cannot seem to validate within the dynamically loaded tab:

<div id="tabs">
  <ul>
    <li><a href="ajax/divs/tabbed/tripinfo.php?id=<?php echo $_REQUEST["id"]; ?>">Trip Information</a></li>
    <li><a href="ajax/divs/tabbed/tripinfo_expenses.php?id=<?php echo $_REQUEST["id"]; ?>">Trip Expenses</a></li>
    <li><a href="ajax/divs/tabbed/fuel.php?id=<?php echo $_REQUEST["id"]; ?>">Fuel Log</a></li>
  </ul>
</div>

<script>
$("#tabs").tabs({
    show: { effect: "slide", duration: 600 }
});
</script>

On the loaded page such as tripinfo.php I have:

<script>
$(document).ready(function () {

  $("#newfrm").validate({
    // No error message
    errorPlacement: function (error, element) {
        $(element).prop("title", $(error).text())
    },
    rules: {
        newdate: {
            required: true,
            dateITA: true,          
        },
        newexp: "required",
        newloc: "required",
        newval: "required",
    },
  });
});

</script>

<form id="newfrm" name="newfrm">
<table class="tbllistnoborder" border="0" cellspacing=0 cellpadding=2 style="width: 650px">
<tr>
    <th>Date</th>
    <th>Expense Description</th>
    <th>Location</th>
    <th>Value</th>
</tr>
<?php
if(pg_num_rows($res) > 0) {
    while($row = pg_fetch_assoc($res)) {
        echo    "
        <tr>
            <td>" . uinput("tledate", $row["tleid"], $row["tledate"], "trip_log_expenses", "tledate", "tleid", $row["tleid"], false,false,80,"dp",null,false) . "</td>
            <td>" . uinput("etdescription", $row["tleid"], $row["etdescription"], "trip_log_expenses", "tleetid", "tleid", $row["tleid"], false,true,180,"exp",null,true) . "</td>
            <td>" . uinput("tlelocation", $row["tleid"], $row["locdescription"], "trip_log_expenses", "tlelocation", "tleid", $row["tleid"], false,true,200,"loc",null,true) . "</td>
            <td>$ " . uinput("tlevalue", $row["tleid"], $row["tlevalue"], "trip_log_expenses", "tlevalue", "tleid", $row["tleid"], false,true,70,"centered",null,false) . "</td>
            <td class='smallbtn'>" . delbtn("trip_log_expenses", "tleid", $row["tleid"], null, "del", null)  . "</td>
        </tr>";
    }
} else {
    echo "<tr><td colspan='3'>No expenses currently added for this trip. You can start adding them.</td></tr>";
}   
?>
<tr>
    <td><input type="text" style="width: 80px" id="newdate" name="newdate" class="dp"></td>
    <td><input type="text" id="newexp" name="newexp" class="exp" style="width: 180px"><input type="hidden" id="newexp_id"></td>
    <td><input type="text" id="newloc" name="newloc" style="width: 200px" class="loc"><input type="hidden" id="newloc_id"></td>
    <td>$ <input type="text" style="width: 70px" id="newval" name="newval"></td>
    <td><button id="add">ADD</button></td>
</tr>
</table>
</form>

If I try and check the status of the validation with alert("#newform").valid() for example, I always get true back even if the required fields are not present.

I have also tried to validate in the tabs constructor but with no success:

$("#tabs").tabs({
    show: { effect: "slide", duration: 600 }
    select: function () {
        $("#newfrm").validate({
        // No error message
        errorPlacement: function (error, element) {
            $(element).prop("title", $(error).text())
        },
        rules: {
            newdate: {
                required: true,
                dateITA: true,          
            },
            newexp: "required",
            newloc: "required",
            newval: "required",
        },
    }); 
    }
});

*"dynamically loaded"* would mean it's loaded via Ajax or JavaScript DOM manipulation sometime after the page has been loaded. Your PHP is located only on the server and then rendered just before it's sent to the browser. In other words, the JavaScript does not care about what's happening on the server, only what's already been loaded into the browser. Please only show the HTML as it is rendered on the page, rather than your PHP. — Sparky, Feb 04 '16 at 15:42

score -1 · Answer 1 · answered Feb 04 '16 at 10:49

-1

i don't see the <script></script> tags around your javascript in your tripinfo.php

Remove the document ready from tripinfo.php and put your Javascript to validate after yor form inside a script tag

answered Feb 04 '16 at 10:49

Adil El

44
3

Sorry did not include tags in question. In any case tried to move the script after the form but with no success. – Fabrizio Mazzoni Feb 04 '16 at 10:59

How do I validate a form inside a jQuery UI tab?

1 Answers1