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;
}

当用户点击onsubmit按钮时会触发submit事件。如果监听器返回false，则表单未提交。

Answer 2

这是我的解决方案;

// 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();

}

});
});

根据正在填充的其他输入，使动态生成的选择输入“必需”

2 个答案: