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

Posted 2023-05-08

【中文标题】如何验证 jQuery UI 选项卡中的表单？

【英文标题】：How do I validate a form inside a jQuery UI tab?

【发布时间】：2016-05-13 22:26:40

【问题描述】：

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

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

【问题讨论】：

“动态加载” 意味着它是在页面加载后的某个时间通过 Ajax 或 javascript DOM 操作加载的。您的 PHP 仅位于服务器上，然后在发送到浏览器之前呈现。换句话说，JavaScript 不关心服务器上发生了什么，只关心已经加载到浏览器中的内容。请仅显示在页面上呈现的 html，而不是您的 PHP。

【参考方案1】：

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

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

【讨论】：

抱歉没有包含有问题的标签。在任何情况下都试图在表单之后移动脚本但没有成功。