mdb-select validation

Topic: mdb-select validation

KenHartwigsen free asked 6 years ago

How do I use mdb-select class with validation. I am using "asp-validation-for " in conjunction with my select element (with class='mdb-select'). The field associated with this drop down is a required field. However, no warning is displayed when the page is submitted (even though the field is required). When I click the Save button, the form is submitted, even though it should not have passed because the field has a REQUIRED attribute on the model.

Start

<select id="ddlMatterTimeZone" name="MatterTimeZone" asp-for="MatterTimeZone" class="mdb-select">

<option value="" disabled selected>Select time zone</option>

<option value="1">AST Atlantic Standard Time</option>

<option value="2">EST Eastern Standard Time</option>

</select>

<span id="spnMatterTimeZone" asp-validation-for="MatterTimeZone" class="text-danger"></span>

code here

KenHartwigsen free commented 6 years ago

Here is the code. There is validation span located right below the options (I have taken several of the options out for brevity). However, the form gets submitted even though a valid value has not been selected. <select id="ddlMatterTimeZone" name="MatterTimeZone" asp-for="MatterTimeZone" class="mdb-select"> <option value="" disabled selected>Select time zone</option> <option value="1">AST Atlantic Standard Time</option> <option value="2">EST Eastern Standard Time</option> </select> <span id="spnMatterTimeZone" asp-validation-for="MatterTimeZone" class="text-danger"></span> Select time zone AST Atlantic Standard Time EST Eastern Standard Time

<option value="" disabled selected>Select time zone</option>

<option value="1">AST Atlantic Standard Time</option>

<option value="2">EST Eastern Standard Time</option>

</select>

Select time zone
AST Atlantic Standard Time
EST Eastern Standard Time

Please insert min. 15 characters.

Add comment

Adam Stapleton pro answered 6 years ago

3 0 Best answer

Hi Ken
I've just stumbled accross your question and thought I'd post a solution in case anyone else wants to use it (or you still need it). I have just encountered this issue and solved it by overriding the styles that cause the issue with the following sass/scss.
<pre>select {
    &.mdb-select {
        height: 0;
        display: block !important;
        visibility: hidden;
    }
}</pre>
That translates to this css class
<pre>select.mdb-select {
 height: 0;
 display: block !important;
 visibility: hidden;
}</pre>
JQuery Validation is what sits behind ASP.NETs asp-validation-for tag helper. That doesn't pick up elements with "display: none;" so making it displayed is a solution.
I also added this class to move the validation error messages closer to the bottom of the select that is invalid.
<pre>input[type=text] {
    &.select-dropdown {
        margin-bottom: 0;
    }
}</pre>
Hope it's useful to someone,
Adam
NOTE: This doesn't apply the valid/invalid class that provides the green/red underline to elements. I haven't got time to work out how to do that at the moment but I will give it some attention when I can and update this answer if I find a solution

Please insert min. 20 characters.

Hi Ken

I've just stumbled accross your question and thought I'd post a solution in case anyone else wants to use it (or you still need it). I have just encountered this issue and solved it by overriding the styles that cause the issue with the following sass/scss.

select {
    &.mdb-select {
        height: 0;
        display: block !important;
        visibility: hidden;
    }
}

That translates to this css class

select.mdb-select {
    height: 0;
    display: block !important;
    visibility: hidden;
}

JQuery Validation is what sits behind ASP.NETs asp-validation-for tag helper. That doesn't pick up elements with "display: none;" so making it displayed is a solution.

I also added this class to move the validation error messages closer to the bottom of the select that is invalid.

input[type=text] {
    &.select-dropdown {
        margin-bottom: 0;
    }
}

Hope it's useful to someone,

Adam

NOTE: This doesn't apply the valid/invalid class that provides the green/red underline to elements. I haven't got time to work out how to do that at the moment but I will give it some attention when I can and update this answer if I find a solution

Mikołaj Smoleński staff commented 6 years ago

Thanks Adam for the great solution!

Cooper pro commented 6 years ago

Thank you for this. If you are able to look at the valid/invalid class that would be perfect. Thanks again - I was about to give up on MDB after paying for it too.

Jakub Strebeyko staff commented 6 years ago

The community, in turn, is never gonna give up on you, Cooper. :)

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi there Ken, Thanks for reaching out. For material select to work properly mdb.min.css hides (display: none !important;) all existing select input fields in your project for mdb.min.js to re-initiate them with material design features. A byproduct of the solution is that applying the required attribute does not in itself enable HTML5-style validation, since it cannot be validating form elements not being displayed. A workaround here is creating a custom JS function checking whether the value attribute of a chosen option belongs to the range of acceptable options on submit. Hope it helps. With Best Regards, Kuba

KenHartwigsen free commented 6 years ago

Kuba, I have already done that on one particular dropdown and that does work for that particular case. However, I was looking for a long range solution which we could use for all our dropdown situations. We will have a lot of these. The problem with this solution is that it has to integrate with other fields on the form that need validation and how those other fields get submitted or not submitted depending on validation results. Thanks, Ken

KenHartwigsen free commented 6 years ago

Jakub Strebeyko staff commented 6 years ago

I see. Unfortunately, there seems to be no instant solution to the issue of numerous, highly interdependentmaterial selectinput fields validation yet. At the time being my suggestion would be a rather simple-minded one and revolve around trying to extend the existing function onto all the dropdowns - perhaps by using their commonly-shared class to address them, a simple siblingsubmitbutton seeking function to designate the triggers and the above mentioned validating function. With Best Regards, Kuba

Add comment

Write

Create snippet

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: Free
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

KenHartwigsen

2Support score
5Questions 0Answers 0Snippets