[英]Make a dynamically generated select input 'required' dependent on other inputs being populated
下图显示了我当前正在处理的页面的结构，该页面的结构允许用户输入有关属性中每个房间的详细信息。 用户可以根据需要“添加”尽可能多的房间，并且页面使用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"> <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> <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 <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"> <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"> <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> <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 <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=""> <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"> <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> <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 <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=""> <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"> <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> <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 <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=""> <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"> <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> <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 <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=""> <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"> <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> <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 <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=""> <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"> <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> <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 <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=""> <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"> <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> <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 <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=""> <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"> <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 © 2013 to 2017 - Atlas Estate Agents Limited</div></td></tr>
</table></div>
</div>
</body>
</html>
您可以使用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 ，则不提交表单。
这是我的解决方案；
// 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();
}
});
});
如何使依赖于其他输入的 select 输入始终在 React 中显示默认值？
[英]How to make a select input that is dependent on other inputs to always show a default value in React?
在填充所有必填字段（输入，选择..）之前，禁止提交
[英]Prevent submit until all required fields (input,select..) are populated
填充使用 jquery 动态生成的输入，同时在 select 框中选择一个选项
[英]Fill inputs that are generated dynamically with jquery while selecting an option in the select box
如果输入值大于0，则在页面上动态填充其他输入
[英]If the value of an input is greater than 0 dynamically populate other inputs on a page
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.