如何验证 jQuery UI 选项卡中的表单？

Question

似乎无法在动态加载的选项卡中验证：

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

在加载页面如tripinfo.php我有：

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

例如，如果我尝试使用 alert("#newform").valid() 检查验证状态，即使必填字段不存在，我总是会返回 true。

我也尝试在tabs 构造函数中进行验证，但没有成功：

$("#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",
        },
    }); 
    }
});

Answer 1

我在您的tripinfo.php 中没有看到您的javascript 周围的<script></script> 标签

从tripinfo.php 中删除准备好的文档，然后将您的Javascript 放在脚本标签内的表单中进行验证