1

hide/display js コードが使用されているため、この codeIgniter/PHP アプリですべての必須フィールドを取得する必要があります。jquery を使用して、表示されているすべての必須フィールドを取得するにはどうすればよいですか? 添付のサンプル html を参照してください。

prod アプリでは、すべての必須フィールドのラベル [ * ] にこの css があります。jqueryを使用してこれらすべてのフィールドを取得する方法はありますか? ここにキャッチ、問題があります。この [ * ] はラベルにあります。関連フィールドが空であり、フィールドがテキスト、ドロップダウン、チェックボックス、ラジオなどである可能性があることを実際に取得/確認する必要があります。空の場合は、防止する必要がありますフォームの送信とエラー メッセージの表示。

要するに、送信ボタンのクリック時、現在表示されているフィールドセットにある必要なすべてのフィールドを取得します[高さと幅の検出に関係しています] これらのフィールドのいずれかが空の場合、フォームの送信を停止し、エラーメッセージを表示します。 : "このフィールドは必須です" "このフィールドは必須です" "このフィールドは必須です" [これはページ上部の 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

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 に答える
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 に答える