根据正在填充的其他输入，使动态生成的选择输入“必需”
The following image shows the structure of a page I'm currently working on that allows the user to enter details about each room in a property. The user can 'add' as many rooms as they like and the pages uses javascript/jQuery to dynamically generate additional input fields, this is all working fine.
I want to add some validation whereby the select box (populated with 'Please Select' in the image but other options are 'metres', 'feet', etc) becomes required if data is entered in the adjacent 'Dimensions' fields.
I'm a fairly competent programmer but am struggling to get my head round even where to begin with this. I'm thinking the validation must be done when the user clicks the submit button and the logic is that you want to check the dimension fields adjacent to the select and make the select required if data is found in the dimensions fields. As the inputs are dynamically generated, I don't know how to reference them and how to check them in their corresponding 'groups'.
Any help would be much appreciated!
Page source;
<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>
You can use an onsubmit listener to check whatever you want before submitting the form. The code, roughly, would be like this:
<form onsubmit="return validate()">
and the listener:
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;
}
The onsubmit event is fired when the user clicks the submit button. If the listener returns false, the form is not submitted.
Here is my solution;
// 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();
}
});
});