chetanpy priority asked 6 days ago


{% 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


chetanpy priority answered 20 hours 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 3 hours ago

Have you imported plugins?

Do you have package ESSENTIAL or ADVANCED?


chetanpy priority answered 6 days 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 5 days 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.


Kamila Pieńkowska staff answered 6 days 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.


Kamila Pieńkowska staff answered 6 days 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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • 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
Tags