form select validation


Topic: form select validation

dsuciu asked 6 years ago

I am having some problems with the form validation. On some field types validation works like a charm but on others I just can't get it to work. Here is the link to a snippet.

This is the form I am trying to validate:

<form class="needs-validation container" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3 md-form">
      <label for="validationCustom012">First name</label>
      <input type="text" class="form-control" id="validationCustom012" value="" required>
      <div class="invalid-feedback">Nope!</div>
    </div>
    <div class="col-md-4 mb-3 md-form">
      <input type="text" name="date" id="date" class="form-control datepicker" value="" required/>
      <label for="date">Date</label>
      <div class="invalid-feedback">Please select a valid date.</div>
    </div>
    <div class="col-md-4 mb-3">
      <select class="mdb-select md-form" searchable="Search here.." required>
        <option value="" disabled selected>Choose your country</option>
        <option value="1">USA</option>
        <option value="2">Germany</option>
        <option value="3">Poland</option>
      </select>
      <div class="invalid-feedback">Please select a country.</div>
    </div>
  </div>
  <div class="form-row mb-4">
    <div class="form-check pl-0">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">Agree to terms and conditions </label>
      <div class="invalid-feedback">You shall not pass! </div>
    </div>
  </div>
  <button class="btn btn-primary btn-rounded" type="submit">Submit form</button>
</form>

In the example I have provided all fields are mandatory. The date and select fields don't work as expected.

Here's what I have tried so far:

  1. I removed the novalidate attribute from the form tag to see how html5 validation works. Validation works for all fields except date. It just skips validation on the date field. If I fill in all the other fields except date, the form gets submitted even without a value in the date field. It should not submit with a blank required field.

  2. With the novalidate tag on the form bootstrap / mdb validation does not work on date and select. The select is still treated as invalid and the form is not submitted but the styling is not applied on the select field and the invalid-feedback message is not triggered.

What am I doing wrong? Why does validation not work on the date? Why is the select not being styled properly?

Please feel free to modify my snippet and add write the solution.

I tried to understand what the problem is by looking at your sample code on the supported elements section in the form validation page but the snippet does not contain md form styling. You should fix that.


Jakub Mandra staff premium answered 6 years ago

Hi,

I've forked and modified your snippet, have a look here: https://mdbootstrap.com/snippets/jquery/mandra/397124

Fileds that are set as readonly won't be validated, that is the first cause of the problem. But Select is computed so much, so the first input which you use in your html markup, isn't the real input that holds select's value. I've added some extra js code to allow to validate Select, but it requires some refactoring. I will send the ticket to our JQery team.

Hope this will help.

Best,

Jakub


dsuciu commented 6 years ago

Thank you for the quick response. This is exactly what I was looking for. I am happy with the resolution.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.6.1
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: Yes