1

我们需要在这个 codeIgniter/PHP 应用程序中检索所有必填字段，因为使用了隐藏/显示 js 代码，我如何使用 jquery 获取所有可见的必填字段？请参阅随附的示例 html。

在 prod 应用程序中，所有必填字段在标签 [ * ] 上都有这个 css。有没有办法使用 jquery 提取所有这些字段？这是问题，这个 [ * ] 在标签上，我实际上需要获取/检查关联字段是否为空，并且该字段可以是文本、下拉列表、复选框、单选等。如果为空，我需要防止提交表单并显示错误消息。

简而言之，提交按钮的OnClick ，如果这些字段中的任何一个为空，则抓取当前可见的字段集中的所有必需字段[与检测高度和宽度有关]，停止表单提交并显示错误消息，即: "此字段为必填项" "此字段为必填项" "此字段为必填项" [这将进入页面顶部的 div]

下面的测试代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Project Overview</title>
<script type="text/javascript">
var projectType_Field_Id = '1169';

//Project Types
var projectTypes = new Array (
    {id : '11', value:'Cars'},
    {id : '12', value:'Boats'},
    {id : '13', value:'Planes'});

//occurs onLoad
function formOnLoad()
{
    var project_type = document.getElementById(projectType_Field_Id).value;
    refreshSections(project_type);
    }
/*
 *  Onchange - Project Type
 */
function projectTypeChange()
{ 
    var project_type = document.getElementById(projectType_Field_Id).value;
    refreshSections(project_type);
}

function refreshSections(selectedType) 
{    
    for (var i = 0; i < projectTypes.length; i++) 
    {
        if (projectTypes[i].value == selectedType) 
        {
            document.getElementById("section-"+ projectTypes[i].id).style.display = '';
        } else {
            document.getElementById("section-"+ projectTypes[i].id).style.display = 'none';
        }
    }

}


</script>
</head>

<body onload="formOnLoad();">
<form method="post" action="">
<fieldset name="mainSection">
                <legend style="color:blue; font-weight:bold">Project Overview Section</legend>

                <table style="width: 100%">
                    <tr>
                        <td style="height: 33px; width: 178px; color:maroon">Name<span class="required"> * </span></td>
                        <td style="height: 33px"><input  id="1125" name="1125" type="text" class="valuetext fld_required"/></td>
                    </tr>
                    <tr>
                        <td style="height: 33px; width: 178px; color:maroon">Email<span class="required"> * </span></td>
                        <td style="height: 33px"><input  id="1026" name="1026" type="text" class="valuetext fld_required"/></td>
                    </tr>
                    <tr>
                        <td style="width: 178px">Product Title</td>
                        <td><input  id="1089" name="1089" type="text" /></td>
                    </tr>
                    <tr>
                        <td style="width: 178px">Product Type</td>
                        <td><select id="1169" name="1169"  onChange="projectTypeChange();">
                        <option value="">Select</option>
                        <option value="Cars">Cars</option>
                        <option value="Boats">Boats</option>
                        <option value="Planes">Planes</option>
                        </select></td>
                    </tr>
                                    </table>
            </fieldset><br /><br />

            <fieldset id="section-11" name="section-11">
                <legend style="color:fuchsia; font-weight:bold">Car Details Section</legend>

                <table cellpadding="2" style="width: 100%">
                    <tr>
                        <td style="width: 334px; height: 35px"><label style="color:maroon">Size:</label><span class="required"> * </span></td>
                        <td style="height: 35px"><input id="1245" name="1245" type="text" class="valuetext fld_required"/></td>
                    </tr>
                    <tr>
                        <td style="height: 35px; width: 334px">Color:</td>
                        <td style="height: 35px">
                        <select id="1433" name="1433">
                <option value="Orange">Orange</option>
                        <option value="Blank">Blank</option>
                        <option value="Green">Green</option>
            </select></td>
                    </tr>
                    <tr>
                        <td style="width: 334px">Description:</td>
                        <td>
                        <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td>
                    </tr>
                </table>
                            </fieldset>
                            <br />
            <fieldset id="section-12" name="section-12">
                <legend style="color:fuchsia; font-weight:bold">Plane Details Section</legend>

                <table cellpadding="2" style="width: 100%">
                    <tr>
                        <td style="width: 334px; height: 35px"><label  style="color:maroon">Size:</label><span class="required"> * </span></td>
                        <td style="height: 35px"><input id="1254" name="1254" type="radio" class="valuetext fld_required"/>Small
                        <input id="1254" name="1254" type="radio" />Large</td>
                    </tr>
                    <tr>
                        <td style="height: 35px; width: 334px">Color:</td>
                        <td style="height: 35px">
                        <select id="1433" name="1433">
                <option value="Orange">Orange</option>
                        <option value="Blank">Blank</option>
                        <option value="Green">Green</option>
            </select></td>
                    </tr>
                    <tr>
                        <td style="width: 334px">Description:</td>
                        <td>
                        <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td>
                    </tr>
                </table>
                            </fieldset><br />
            <fieldset id="section-13" name="section-13">
                <legend style="color:fuchsia; font-weight:bold">Boat Details Section</legend>

                <table cellpadding="2" style="width: 100%">
                    <tr>
                        <td style="width: 334px; height: 35px"><label  style="color:maroon">Size:</label><span class="required"> * </span></td>
                        <td style="height: 35px"><select id="1245[]" name="1245[]" class="valuetext fld_required">
                        <option value="">Select</option>
                        <option value="Small">Small</option>
                        <option value="Medium">Medium</option>
                        <option value="Large">Large</option>
                        </select></td>
                    </tr>
                    <tr>
                        <td style="height: 35px; width: 334px">Color:</td>
                        <td style="height: 35px">
                        <select id="1433" name="1433">
                <option value="Orange">Orange</option>
                        <option value="Blank">Blank</option>
                        <option value="Green">Green</option>
            </select></td>
                    </tr>
                    <tr>
                        <td style="width: 334px">Description:</td>
                        <td>
                        <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td>
                    </tr>
                </table>
                            </fieldset>
<fieldset id="section-1011" name="section-1011">
                <legend style="color:green; font-weight:bold">Misc Info Section</legend>

                <table cellpadding="2" style="width: 100%">
                    <tr>
                        <td style="width: 334px; height: 35px"><label>Size:</label></td>
                        <td style="height: 35px"><input id="1301" name="1301" type="text" /></td>
                    </tr>
                    <tr>
                        <td style="height: 35px; width: 334px">Color:</td>
                        <td style="height: 35px">
                        <select id="1302" name="1302">
                <option value="Orange">Orange</option>
                        <option value="Blank">Blank</option>
                        <option value="Green">Green</option>
            </select></td>
                    </tr>
                    <tr>
                        <td style="width: 334px">Description:</td>
                        <td>
                        <textarea id="1303" name="1303" rows="2" style="width: 433px"></textarea></td>
                    </tr>
                </table>
                            </fieldset>
                            <input name="Send Job" type="submit" value="Send Job" />

</form>
</html>
4

3 回答 3

0

我会做这样的事情：

$("form").on("submit", function () {

    // get the empty elements of the visible fieldsets
    var $empties = $("fieldset:visible").find(":input").filter(function () {

        // for me, a blank space is empty
        // remove the $.trim() if that's not the case
        return $.trim($(this).val()) === "";
    });

    // put some error messages somewhere
    if ($empties.length) {
        $empties.each(function () {

            // I am assuming the "name" attribute is meaningful
            $("#errorDiv").append("Please fill in the " + this.name + "<br />");
        });
    }

    // only submit if there are no empties
    return !$empties.length;
});
于 2012-04-26T15:55:17.577 回答
0

使用 JQuery，您可以使用:visible选择器来查找所有可见的内容

$("form > :visible")

然后你可以使用 JQuery 中的is方法来找出它是什么元素......然后对它们做任何你想做的事情。

或者，您可以使用JQuery Validation向控件添加一些规则，如果您禁用它们，它们将自动不被验证，如果它们被重新启用，您可以执行他们在这篇文章中所做的事情。

于 2012-04-26T15:49:15.343 回答
0

如果您可以稍微修改 html，最简单的方法（IMO）是在必填字段本身而不是标签上放置一个“必需”类。然后，您可以选择它们

$("fieldset:visible *.required").each(function() {
... check if $(this) is empty and display a message if necessary...
})
于 2012-04-26T15:50:24.337 回答