Notes

<!-- Modal4 -->
<div class="modal fade modal-lg" id="staticBackdropAddWindow" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
<div class="modal-dialog table-modal-manual-width">
<div class="modal-content bg-img-popup">
<div class=" d-flex justify-content-end btn-close-dealer">
<button type="button" class="btn-close window-opening-add-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="p-4">
<div class="container">
<div class="row ">
<div class="col-lg-12">
<div class=" d-flex justify-content-between pt-3">
<div class="heading">
<h1 class="Projects-list m-0">Add Window Openings</h1>
</div>
<div class="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="12" fill="#BDBDBD"></circle>
<rect x="10" y="9.33594" width="3.99999" height="10.6666" rx="2" fill="white"></rect>
<rect x="10" y="4" width="3.99999" height="3.99999" rx="2" fill="white"></rect>
</svg>
</div>
</div>
</div>
<div class="col-lg-12">
<form id="windowOpeningAddForm" method="post" action="">
{% csrf_token %}
<div class="row mt-3">
<div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-12">
<div class="input-container-d ">
<label class="lable-all-input">R/O Width (ft)</label>
<input type="number" min="0" placeholder="R/O Width (ft)" name="r_o_width_ft" class="Project-Name-input d-block w_r_o_width_ft">
<small class="error-message" id="error-r_o_width_ft">Please enter a valid number between 0 and 11.99.</small>
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-12">
<div class="input-container-d ">
<label class="lable-all-input">R/O Width (in)</label>
<input type="number" min="0" max="11.99" placeholder="R/O Width (in)" name="r_o_width_in" class="Project-Name-input d-block w_r_o_width_in">
<small class="error-message" id="error-r_o_width_in">Please enter a valid number between 0 and 11.99.</small>
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-12">
<div class="input-container-d ">
<label class="lable-all-input">R/O Height (ft)</label>
<input type="number" min="0" placeholder="R/O Height (ft)" name="r_o_height_ft" class="Project-Name-input d-block w_r_o_height_ft">
<small class="error-message" id="error-r_o_height_ft">Please enter a valid number between 0 and 11.99.</small>
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-12">
<div class="input-container-d ">
<label class="lable-all-input">R/O Height (in)</label>
<input type="number" min="0" max="11.99" placeholder="R/O Height (in)" name="r_o_height_in" class="Project-Name-input d-block w_r_o_height_in">
<small class="error-message" id="error-r_o_height_in">Please enter a valid number between 0 and 11.99.</small>
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-12">
<div class="input-container-d pt-3">
<label class="lable-all-input">No. of Openings</label>
<input type="number" min="0" placeholder="No. of Openings" name="no_openings" class="Project-Name-input d-block w_no_openings">
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-12">
<div class="input-container-d pt-3">
<label class="lable-all-input">Lintel Bar Size</label>
<input type="number" min="0" placeholder="Lintel Bar Size" name="lintel_bar_size" class="Project-Name-input d-block w_lintel_bar_size">
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-12">
<div class="input-container-d pt-3">
<label class="lable-all-input">No. of Lintel Bars</label>
<input type="number" min="0" placeholder="No. of Lintel Bars" name="no_lintel_bars" class="Project-Name-input d-block w_no_lintel_bars">
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-12">
<div class="input-container-d pt-3">
<label class="lable-all-input">Stirrup Bar Size</label>
<input type="number" min="0" placeholder="Stirrup Bar Size" name="stirrup_bar_size" class="Project-Name-input d-block w_stirrup_bar_size">
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-12">
<div class="input-container-d pt-3">
<label class="lable-all-input">Stirrup Spacing (in)</label>
<input type="number" min="0" max="11.99" placeholder="Stirrup Spacing (in)" name="stirrup_spacing_in" class="Project-Name-input d-block w_stirrup_spacing_in">
<small class="error-message" id="error-stirrup_spacing_in">Please enter a valid number between 0 and 11.99.</small>
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-12">
<div class="input-container-d pt-3">
<label class="lable-all-input">Notes</label>
<input type="text" placeholder="notes" name="notes" class="Project-Name-input d-block w_notes">
</div>
</div>
<div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 py-3">
<div class="input-container-d pt-5 text-end">
<button id="cancelWindowBtn" class="Cancel-btn-estmate-poup me-2">Cancel</button>
<button class="Confime-btn-estmate-poup ms-2 add-window-openings" type="submit">Confirm</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>




<script>
function validateInput(input, min, max) {
const value = parseFloat(input.value);
const errorMessage = document.getElementById('error-' + input.name);

if (isNaN(value) || value < min || value > max) {
errorMessage.style.display = 'block';
input.setCustomValidity('Please enter a valid number between ' + min + ' and ' + max + '.');
} else {
errorMessage.style.display = 'none';
input.setCustomValidity('');
}
}

document.querySelectorAll('input[type="number"][max]').forEach(function (input) {
input.addEventListener('input', function () {
const max = parseFloat(input.getAttribute('max'));
validateInput(input, 0, max);
});
});

document.querySelectorAll('input[type="number"]').forEach(function (input) {
if (!input.getAttribute('max')) {
input.addEventListener('input', function () {
validateInput(input, 0, Infinity);
});
}
});
</script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>