他の入力に依存する動的に生成された選択入力を「必須」に設定する

次の図は、ユーザーがプロパティの各部屋の詳細を入力できるようにする現在作業中のページの構造を示しています。ユーザーは好きなだけ多くの部屋を「追加」することができ、ページはjavascript/jQueryを使用して動的に追加の入力フィールドを生成しますが、これはうまくいきます。他の入力に依存する動的に生成された選択入力を「必須」に設定する

データを隣の「次元」に入力すると、選択ボックス（画像で「選択してください」が選択されていますが、「メートル」、「足」など）フィールド。

私はかなり有能なプログラマーですが、どこから始めても頭がおかしくなりません。ユーザーが送信ボタンをクリックしたときに検証が行われなければならないと思っています。ロジックは、選択範囲に隣接する次元フィールドをチェックし、次元フィールドにデータが見つかった場合に必要な選択を行います。入力が動的に生成されるので、私はそれらを参照する方法と、対応する「グループ」でそれらをチェックする方法を知らない。

ご協力いただければ幸いです。

ページのソース。

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

// room details 

// apply validation 
$("#manage_property_rooms").validate({ 
errorClass: "error-class", 
}); 

// add new room (dynamically created buttons) 

$(document).on('click','.addRoom',function() { 

var $div = $('div[id^="room_details_"]:last'); 
    var id = +$div[0].id.match(/\d+/g) + 1; 
    if (id<99) { 
    $div.after($div.clone().attr('id', 'room_details_' + id)); 
    //$('#room_details_' + id + ' legend').text('Room Details #' + id); 
    $('#room_details_' + id + ' input[type="text"]').val(''); 
    $('#room_details_' + id + ' textarea').val(''); 
    $('#room_details_' + id + ' .room_name').attr('name', 'property_room_name[' + id + ']'); 
    } else { 
    alert("You cannot add more than 98 rooms.");  
    } 

}); 

// delete all rooms 

$(function() { 
$("#deleteAllRooms").click(function() { 
$('.room_details').not('#room_details_0').remove(); 
}) 
}); 

// delete individual room 

$(document).on('click','.delete_div',function() { 
$(this).closest("div.room_details").not('#room_details_0').remove(); 
}); 

// check for unique room names 

$(document).on('blur','.room_name',function() { 

var values = []; 

$('.room_name').each(function() { 

    if ($.inArray(this.value, values) >= 0 && this.value!='') { 

     alert("Each room name must be unique."); 
     return false; // <-- stops the loop 

    } else { 

     values.push(this.value); 
    } 
}); 
}); 

}); 

</script> 
    <div class="content"> 
    <div class="headertitle"> 
    <h1>Manage Property Room Descriptions for 14 Beechwood Gardens, Cressington, Liverpool, L19 0LN</h1> 
    </div> 
    <div class="border"></div><div class="links"><a href="edit_property.php?property_id=497">Edit Property</a> | <a href="view_property.php?property_id=497">View Property</a> | <a href="manage_property_images.php?property_id=497">Manage Property Images</a> | <a href="manage_property_rooms_order.php?property_id=497">Manage Property Rooms Order</a> | <a href="manage_property_files.php?property_id=497">Manage Property Files</a> | <a href="manage_property_tenancies.php?property_id=497">Manage Property Tenancies</a> | <a href="manage_property_tenancies_order.php?property_id=497">Manage Property Tenancies Order</a></div><form id="manage_property_rooms" name="manage_property_rooms" action="https://www.property-system-uk.com/admin-area/files/manage_property_rooms.php" method="post"><input type="hidden" id="property_id" name="property_id" value="497"><fieldset> 
<legend>Property Room Information</legend> 

<table class="nobord"><tr><td><input type="button" class="addRoom" value="Add Room">&nbsp;<input type="button" id="deleteAllRooms" value="Delete All Rooms"></td></tr><tr><td>The sort order of rooms can be changed on the 'Manage Property Rooms Order' page.</td></tr></table> 

</fieldset><div id="room_details_0" class="room_details"><fieldset> 
<legend>Room Details</legend> 

<table class="nobord"><tr> 
    <td>Name:</td> 
    <td><input type="text" name="property_room_name[0]" maxlength="120" class="room_name" required>&nbsp;<a href="#" title="Each room name must be unique (e.g. Bedroom 1 and Bedroom 2 rather than Bedroom and Bedroom)." class="tooltip"><img src="https://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td> 
    </tr><tr> 
    <td>Dimensions:</td> 
    <td><input type="text" name="property_room_length[]" maxlength="7"> length x <input type="text" name="property_room_width[]" maxlength="7"> width&nbsp;<select name="property_room_dimension_unit[]"><option value="">Please Select</option><option value="6">Centimetres</option><option value="8">Feet</option><option value="9">Inches</option><option value="5">Metres</option><option value="7">Millimetres</option></select></td></tr><tr> 
    <td>Dimension Description:</td> 
    <td><input type="text" name="property_room_dimension_text[]" maxlength="120">&nbsp;<a href="#" title="Describe the room dimensions (e.g. if the room narrows or is an L-shape)." class="tooltip"><img src="https://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td> 
    </tr><tr> 
    <td>Description:</td> 
    <td><textarea name="property_room_description[]" rows="6" cols="40"></textarea></td></tr><tr> 
    <td>Actions:</td> 
    <td><input type="button" class="delete_div" value="Delete Room">&nbsp;<input type="button" class="addRoom" value="Add Room"></td> 
    </tr></table> 

</fieldset></div><div id="room_details_1" class="room_details"><fieldset> 
<legend>Room Details</legend> 

<table class="nobord"><tr> 
    <td>Name:</td> 
    <td><input type="text" name="property_room_name[1]" maxlength="120" class="room_name" value="Living/Dining Room" required>&nbsp;<a href="#" title="Each room name must be unique (e.g. Bedroom 1 and Bedroom 2 rather than Bedroom and Bedroom)." class="tooltip"><img src="https://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td> 
    </tr><tr> 
    <td>Dimensions:</td> 
    <td><input type="text" name="property_room_length[]" maxlength="7" value="6.00"> length x <input type="text" name="property_room_width[]" maxlength="7" value="3.18"> width&nbsp;<select name="property_room_dimension_unit[]"><option value="">Please Select</option><option value="6">Centimetres</option><option value="8">Feet</option><option value="9">Inches</option><option value="5">Metres</option><option value="7">Millimetres</option></select></td></tr><tr> 
    <td>Dimension Description:</td> 
    <td><input type="text" name="property_room_dimension_text[]" maxlength="120" value="">&nbsp;<a href="#" title="Describe the room dimensions (e.g. if the room narrows or is an L-shape)." class="tooltip"><img src="https://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td> 
    </tr><tr> 
    <td>Description:</td> 
    <td><textarea name="property_room_description[]" rows="6" cols="40">Windows to the front and rear aspects, fire surround, radiators, carpet flooring and coving.</textarea></td></tr><tr> 
    <td>Actions:</td> 
    <td><input type="button" class="delete_div" value="Delete Room">&nbsp;<input type="button" class="addRoom" value="Add Room"></td> 
    </tr></table> 

</fieldset></div><div id="room_details_2" class="room_details"><fieldset> 
<legend>Room Details</legend> 

<table class="nobord"><tr> 
    <td>Name:</td> 
    <td><input type="text" name="property_room_name[2]" maxlength="120" class="room_name" value="Kitchen" required>&nbsp;<a href="#" title="Each room name must be unique (e.g. Bedroom 1 and Bedroom 2 rather than Bedroom and Bedroom)." class="tooltip"><img src="https://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td> 
    </tr><tr> 
    <td>Dimensions:</td> 
    <td><input type="text" name="property_room_length[]" maxlength="7" value="5.44"> length x <input type="text" name="property_room_width[]" maxlength="7" value="2.70"> width&nbsp;<select name="property_room_dimension_unit[]"><option value="">Please Select</option><option value="6">Centimetres</option><option value="8">Feet</option><option value="9">Inches</option><option value="5">Metres</option><option value="7">Millimetres</option></select></td></tr><tr> 
    <td>Dimension Description:</td> 
    <td><input type="text" name="property_room_dimension_text[]" maxlength="120" value="">&nbsp;<a href="#" title="Describe the room dimensions (e.g. if the room narrows or is an L-shape)." class="tooltip"><img src="https://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td> 
    </tr><tr> 
    <td>Description:</td> 
    <td><textarea name="property_room_description[]" rows="6" cols="40">Range of kitchen wall and base units, laminate worktops, electric oven, electric hob, extractor hood, sink with mixer tap, window to the rear aspect, glazed door to the rear aspect, vinyl flooring, integrated storage and tiled splashback.</textarea></td></tr><tr> 
    <td>Actions:</td> 
    <td><input type="button" class="delete_div" value="Delete Room">&nbsp;<input type="button" class="addRoom" value="Add Room"></td> 
    </tr></table> 

</fieldset></div><div id="room_details_3" class="room_details"><fieldset> 
<legend>Room Details</legend> 

<table class="nobord"><tr> 
    <td>Name:</td> 
    <td><input type="text" name="property_room_name[3]" maxlength="120" class="room_name" value="Master Bedroom" required>&nbsp;<a href="#" title="Each room name must be unique (e.g. Bedroom 1 and Bedroom 2 rather than Bedroom and Bedroom)." class="tooltip"><img src="https://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td> 
    </tr><tr> 
    <td>Dimensions:</td> 
    <td><input type="text" name="property_room_length[]" maxlength="7" value="3.60"> length x <input type="text" name="property_room_width[]" maxlength="7" value="3.18"> width&nbsp;<select name="property_room_dimension_unit[]"><option value="">Please Select</option><option value="6">Centimetres</option><option value="8">Feet</option><option value="9">Inches</option><option value="5">Metres</option><option value="7">Millimetres</option></select></td></tr><tr> 
    <td>Dimension Description:</td> 
    <td><input type="text" name="property_room_dimension_text[]" maxlength="120" value="">&nbsp;<a href="#" title="Describe the room dimensions (e.g. if the room narrows or is an L-shape)." class="tooltip"><img src="https://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td> 
    </tr><tr> 
    <td>Description:</td> 
    <td><textarea name="property_room_description[]" rows="6" cols="40">Window to the front aspect, integrated storage cupboard and carpet flooring.</textarea></td></tr><tr> 
    <td>Actions:</td> 
    <td><input type="button" class="delete_div" value="Delete Room">&nbsp;<input type="button" class="addRoom" value="Add Room"></td> 
    </tr></table> 

</fieldset></div><div id="room_details_4" class="room_details"><fieldset> 
<legend>Room Details</legend> 

<table class="nobord"><tr> 
    <td>Name:</td> 
    <td><input type="text" name="property_room_name[4]" maxlength="120" class="room_name" value="Bedroom Two" required>&nbsp;<a href="#" title="Each room name must be unique (e.g. Bedroom 1 and Bedroom 2 rather than Bedroom and Bedroom)." class="tooltip"><img src="https://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td> 
    </tr><tr> 
    <td>Dimensions:</td> 
    <td><input type="text" name="property_room_length[]" maxlength="7" value="3.56"> length x <input type="text" name="property_room_width[]" maxlength="7" value="3.19"> width&nbsp;<select name="property_room_dimension_unit[]"><option value="">Please Select</option><option value="6">Centimetres</option><option value="8">Feet</option><option value="9">Inches</option><option value="5">Metres</option><option value="7">Millimetres</option></select></td></tr><tr> 
    <td>Dimension Description:</td> 
    <td><input type="text" name="property_room_dimension_text[]" maxlength="120" value="">&nbsp;<a href="#" title="Describe the room dimensions (e.g. if the room narrows or is an L-shape)." class="tooltip"><img src="https://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td> 
    </tr><tr> 
    <td>Description:</td> 
    <td><textarea name="property_room_description[]" rows="6" cols="40">Combi boiler, window to the rear aspect and carpet flooring.</textarea></td></tr><tr> 
    <td>Actions:</td> 
    <td><input type="button" class="delete_div" value="Delete Room">&nbsp;<input type="button" class="addRoom" value="Add Room"></td> 
    </tr></table> 

</fieldset></div><div id="room_details_5" class="room_details"><fieldset> 
<legend>Room Details</legend> 

<table class="nobord"><tr> 
    <td>Name:</td> 
    <td><input type="text" name="property_room_name[5]" maxlength="120" class="room_name" value="Bedroom Three" required>&nbsp;<a href="#" title="Each room name must be unique (e.g. Bedroom 1 and Bedroom 2 rather than Bedroom and Bedroom)." class="tooltip"><img src="https://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td> 
    </tr><tr> 
    <td>Dimensions:</td> 
    <td><input type="text" name="property_room_length[]" maxlength="7" value="3.62"> length x <input type="text" name="property_room_width[]" maxlength="7" value="1.79"> width&nbsp;<select name="property_room_dimension_unit[]"><option value="">Please Select</option><option value="6">Centimetres</option><option value="8">Feet</option><option value="9">Inches</option><option value="5">Metres</option><option value="7">Millimetres</option></select></td></tr><tr> 
    <td>Dimension Description:</td> 
    <td><input type="text" name="property_room_dimension_text[]" maxlength="120" value="">&nbsp;<a href="#" title="Describe the room dimensions (e.g. if the room narrows or is an L-shape)." class="tooltip"><img src="https://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td> 
    </tr><tr> 
    <td>Description:</td> 
    <td><textarea name="property_room_description[]" rows="6" cols="40">Window to the front aspect, integrated storage and carpet flooring.</textarea></td></tr><tr> 
    <td>Actions:</td> 
    <td><input type="button" class="delete_div" value="Delete Room">&nbsp;<input type="button" class="addRoom" value="Add Room"></td> 
    </tr></table> 

</fieldset></div><div id="room_details_6" class="room_details"><fieldset> 
<legend>Room Details</legend> 

<table class="nobord"><tr> 
    <td>Name:</td> 
    <td><input type="text" name="property_room_name[6]" maxlength="120" class="room_name" value="Bathroom" required>&nbsp;<a href="#" title="Each room name must be unique (e.g. Bedroom 1 and Bedroom 2 rather than Bedroom and Bedroom)." class="tooltip"><img src="https://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td> 
    </tr><tr> 
    <td>Dimensions:</td> 
    <td><input type="text" name="property_room_length[]" maxlength="7" value="2.29"> length x <input type="text" name="property_room_width[]" maxlength="7" value="2.65"> width&nbsp;<select name="property_room_dimension_unit[]"><option value="">Please Select</option><option value="6">Centimetres</option><option value="8">Feet</option><option value="9">Inches</option><option value="5">Metres</option><option value="7">Millimetres</option></select></td></tr><tr> 
    <td>Dimension Description:</td> 
    <td><input type="text" name="property_room_dimension_text[]" maxlength="120" value="">&nbsp;<a href="#" title="Describe the room dimensions (e.g. if the room narrows or is an L-shape)." class="tooltip"><img src="https://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td> 
    </tr><tr> 
    <td>Description:</td> 
    <td><textarea name="property_room_description[]" rows="6" cols="40">Fully tiled walls, bath with mixer taps, thermostatic shower, wash basin, W/C, radiator, frosted window to the rear aspect, extractor fan, vinyl flooring and LED spotlights.</textarea></td></tr><tr> 
    <td>Actions:</td> 
    <td><input type="button" class="delete_div" value="Delete Room">&nbsp;<input type="button" class="addRoom" value="Add Room"></td> 
    </tr></table> 

</fieldset></div><div id="room_details_7" class="room_details"><fieldset> 
<legend>Room Details</legend> 

<table class="nobord"><tr> 
    <td>Name:</td> 
    <td><input type="text" name="property_room_name[7]" maxlength="120" class="room_name" value="Exterior" required>&nbsp;<a href="#" title="Each room name must be unique (e.g. Bedroom 1 and Bedroom 2 rather than Bedroom and Bedroom)." class="tooltip"><img src="https://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td> 
    </tr><tr> 
    <td>Dimensions:</td> 
    <td><input type="text" name="property_room_length[]" maxlength="7" value="0.00"> length x <input type="text" name="property_room_width[]" maxlength="7" value="0.00"> width&nbsp;<select name="property_room_dimension_unit[]"><option value="">Please Select</option><option value="6">Centimetres</option><option value="8">Feet</option><option value="9">Inches</option><option value="5">Metres</option><option value="7">Millimetres</option></select></td></tr><tr> 
    <td>Dimension Description:</td> 
    <td><input type="text" name="property_room_dimension_text[]" maxlength="120" value="">&nbsp;<a href="#" title="Describe the room dimensions (e.g. if the room narrows or is an L-shape)." class="tooltip"><img src="https://www.property-system-uk.com/admin-area/img/tooltip_icon.png" height="14" width="14" alt=""></a></td> 
    </tr><tr> 
    <td>Description:</td> 
    <td><textarea name="property_room_description[]" rows="6" cols="40">Gardens to the front and rear.</textarea></td></tr><tr> 
    <td>Actions:</td> 
    <td><input type="button" class="delete_div" value="Delete Room">&nbsp;<input type="button" class="addRoom" value="Add Room"></td> 
    </tr></table> 

</fieldset></div><fieldset><legend>Actions</legend><table class="nobord"> 
    <tr> 
    <td><input type="submit" value="Save"></td> 
    </tr></table></fieldset></form></div> 
<div id="footer"> 
<table class="nobordeven" style="width:100%;"> 
    <tr><td><div class="center">Copyright &copy; 2013 to 2017 - Atlas Estate Agents Limited</div></td></tr> 
</table></div> 
</div> 
</body> 
</html>

出典

2017-12-11 Michael LB

"私はかなり有能なプログラマーです"なぜこれを書く必要が感じられましたか？ –

サーバー側で検証を行い、メッセージを表示するためにjQueryを使用します。 – user2182349

@FedericoklezCulloca純粋に、私は、誰かに私にラインコードでラインを与えるために時間と労力を費やすことを求めていないので、正しい方向にポイントを与えます –

onsubmitリスナーを使用して、フォームを送信する前に確認することができます。コードは、大体、次のように次のようになります。

<form onsubmit="return validate()">

とリスナー：

function validate(){ 
    var validationError = false; 
    $('select[name=property_room_dimension_unit[]]').each(
     function(i, el){ 
      if(el.val() === ''){ 
       validationError = true; 
      } 
     } 
    ); 
    if(validationError){ 
     alert('Please check required fields') 
     return false; 
    } 
    return true; 
}

ユーザーがsubmitボタンをクリックしたときにonsubmitイベントが発生します。リスナーがfalseを返す場合、フォームは送信されません。

出典

2017-12-11 12:38:34 romifz

私の答えはこの回答に基づいています。 –

私の解決策です。

// check for dimension unit 

$("#manage_property_rooms").submit(function(event) { 

$('.dimension_unit').not("#room_details_0 .dimension_unit").each(function() { 

var dim_unit = $(this).val(); 
var roomName = $(this).prevAll('.room_name').val(); 
var length = $(this).prevAll('.room_length').val(); 
var width = $(this).prevAll('.room_width').val(); 

if ((length > 0 || width > 0) && dim_unit=='') { 

     alert("Please select the dimensions unit for the room; " + roomName); 
     $(this).prop('required', true); 
     event.preventDefault(); 

} 

}); 
});

出典

2017-12-11 13:39:10

他の入力に依存する動的に生成された選択入力を「必須」に設定する

答えて

関連する問題