Topic: Select tag issue
{% load static %}
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<!-- MDB -->
<link rel="stylesheet" href="{% static 'css/mdb.min.css' %}" />
<title>Dashboard</title>
<style>
.modal-content {
background: #efefef;
}
.modal-body {
background: #fff
}
.export {
margin-left: 10px;
}
.add,
.add:hover {
background: #38598b;
color: #fff;
}
.export,
.export:hover {
background: #2c786c;
color: #fff
}
.table-editor {
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.alert-dismissible {
padding-right: unset !important;
}
.modal-body {
padding: 10px !important;
}
.results tr[visible='false'],
.no-result {
display: none;
}
.results tr[visible='true'] {
display: table-row;
}
.counter {
padding: 8px;
color: #ccc;
}
.datatable-pagination {
display: none;
}
.select-wrapper {
width: 100%;
}
</style>
{% block navbar_content %}
<!-- Navbar content goes here -->
{% include 'navbar.html' %}
{% endblock %}
{% block content %}
{% endblock %}
<!-- MDB -->
<script type="text/javascript" src="{% static 'js/mdb.umd.min.js' %}"></script>
<!-- MDB PLUGINS -->
<script type="text/javascript" src="{% static 'js/all.min.js' %}"></script>
<script>
$(document).ready(function () {
$('select').each(function () {
mdb.Select.getOrCreateInstance(this);
});
});
</script>
This is my base.html page
Add Asset User {% csrf_token %}
<div class="modal-body">
<div class="row">
<div class="col-12">
<div data-mdb-input-init class="form-outline mb-4">
<input required type="text" id="first_name" name="first_name"
class="form-control" />
<label class="form-label" for="first_name">First Name <span style="color: red;">*</span>
</label>
</div>
</div>
<div class="col-12">
<div data-mdb-input-init class="form-outline mb-4">
<input required type="text" id="last_name" name="last_name" class="form-control" />
<label class="form-label" for="last_name">Last Name <span style="color: red;">*</span>
</label>
</div>
</div>
<div class="col-12">
<div data-mdb-input-init class="form-outline mb-4">
<input type="text" id="employee_code" name="employee_code" class="form-control" />
<label class="form-label" for="employee_code">Employee Code</label>
</div>
</div>
<div class="col-12">
<div data-mdb-input-init class="form-outline mb-4">
<input type="email" id="email" name="email" class="form-control" />
<label class="form-label" for="email">Email</label>
</div>
</div>
<div class="col-12">
<div class="form-outline mb-4">
<select required class="form-select" name="branch_name">
<option value=""></option>
{% for data in branch_name_data %}
<option value="{{ data }}">{{ data }}</option>
{% endfor %}
</select>
<label class="form-label select-label" for="branch_name">Branch Name<span style="color: red;">*</span></label>
</div>
</div>
<div class="col-12">
<div class="form-outline mb-4">
<select required
class="form-select" name="department_name">
<option value=""></option>
{% for data in department_name_data %}
<option value="{{ data }}">{{ data }}</option>
{% endfor %}
</select>
<label class="form-label select-label" for="department_name">Department Name <span style="color: red;">*</span></label>
</div>
</div>
<div class="col-12">
<div class="form-outline mb-4">
<select required class="form-select" name="cost_center">
<option value=""></option>
{% for data in cost_center_data %}
<option value="{{ data }}">{{ data }}</option>
{% endfor %}
</select>
<label class="form-label select-label" for="cost_center">Cost Center <span style="color: red;">*</span></label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" id="submitBtn" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
This is my asset.html page which extends base.html
and below this i have a script this
<script>
$(document).ready(function () {
$('select').each(function () {
mdb.Select.getInstance(this);
});
// First DOM logic for form validation
$('#assetUserAddForm').submit(function (event) {
// Prevent form submission
event.preventDefault();
// Perform form validation
var isValid = true;
$('.form-control[required]').each(function () {
if ($(this).val() == '') {
$(this).addClass('is-invalid');
isValid = false;
} else {
$(this).removeClass('is-invalid');
}
});
// Check for select elements with the 'form-select' class
$('.form-select[required]').each(function () {
var mdbSelectInstance = mdb.Select.getInstance(this);
if (!mdbSelectInstance || mdbSelectInstance.getSelected().length === 0) {
$(this).siblings('.select-wrapper').addClass('is-invalid'); // Adjust selector to target the select wrapper
isValid = false;
} else {
$(this).siblings('.select-wrapper').removeClass('is-invalid'); // Adjust selector to target the select wrapper
}
});
// If form is valid, submit the form
if (isValid) {
this.submit();
}
});
// Second DOM logic for submitting the form when the button is clicked
$('#submitBtn').click(function () {
$('#assetUserAddForm').submit();
});
// Display the modal when messages exist
{% for message in messages %}
{% if messages %}
$('#messageModal').modal('show');
{% endif %}
{% endfor %}
});
</script>
so bascially the validation of select tag is not working if i initialize the select tag then also like which you have told
Kamila Pieńkowska staff answered 7 months ago
Please create working example that recreates behavior you experience using Create snippet
button. I cannot recreate your problem from this cut off code parts you provided.
Kamila Pieńkowska staff answered 7 months ago
As of now I can direct you to select validation example: https://mdbootstrap.com/docs/standard/forms/select/#section-validation
Please crate your components based on code snippets from documentation. You create your select component wrong. You should not have form-outline
in it. Select creates those elements during initiation.
chetanpy pro premium priority answered 7 months ago
<div class="col-6">
<select data-mdb-select-init>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
</select>
<div class="d-flex justify-content-end mb-4">
<div data-mdb-input-init class="form-outline">
<input data-mdb-search data-mdb-target="#table_modal" type="text" id="search_modal" class="form-control" />
<label class="form-label" for="search_modal">Search</label>
</div>
<button data-mdb-ripple-init class="btn btn-primary btn-sm ms-3" data-mdb-add-entry data-mdb-target="#table_modal">
<i class="fa fa-plus"></i>
</button>
</div>
<hr />
<div id="table_modal" data-mdb-datatable-init class="table-editor">
<table class="table">
<thead>
<tr>
<th class="th-sm" data-mdb-width="250">Company</th>
<th class="th-sm" data-mdb-width="250" data-mdb-sort="false">Address</th>
<th class="th-sm" data-mdb-width="250" data-mdb-sort="false">Employees</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith & Johnson</td>
<td>Park Lane 2, London</td>
<td>30</td>
</tr>
<tr>
<td>P.J. Company</td>
<td>Oak Street 7, Aberdeen</td>
<td>80</td>
</tr>
<tr>
<td>Food & Wine</td>
<td>Netherhall Gardens 3, Hampstead</td>
<td>12</td>
</tr>
<tr>
<td>IT Service</td>
<td>Warwick Road 14, London</td>
<td>17</td>
</tr>
<tr>
<td>A. Jonson Gallery</td>
<td>Oaklands Avenue 2, London</td>
<td>4</td>
</tr>
<tr>
<td>F.A. Architects</td>
<td>Frognal Way 7, Hampstead</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>
hi i have got the issue when i add in the table data-mdb-datatable-init attribute the styles of css get removed automaticallyso how to overcome that ??
Kamila Pieńkowska staff commented 7 months ago
I am not sure what you mean by styles of CSS gets removed.
During initiation inline styling gets removed on purpose.
If you want to add single cell you can wrap its content in div
tag. If you want to forma whole table/rows you can work with css variables.
chetanpy pro premium priority answered 7 months ago
How to use Tree View Plugin I have just copied the code snippet and pasted but its not working
Kamila Pieńkowska staff commented 7 months ago
Have you imported plugins?
Do you have package ESSENTIAL or ADVANCED?
chetanpy pro premium priority answered 7 months ago
I am using this files direct and using advanced
Kamila Pieńkowska staff commented 7 months ago
How are you importing the files in the html file? Do you get any errors in the console? Plaese create a snippet with a code you use.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.1.0
- Device: laptop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No