javascript - 根据填充的其他输入动态生成选择输入 'required'

Question

下图显示了我当前正在处理的页面结构，该页面允许用户输入有关属性中每个房间的详细信息。用户可以“添加”任意数量的房间，页面使用 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> 

Answer 1

您可以在提交表单之前使用 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，则不会提交表单。