Bootstrap 4.1.3 datepicker validation issue

[sbattoh]

I need help figuring out how to get Aurelia validation to work with Bootstrap 4.1.3. I tried the example you provided but no luck on getting it to work. If you could post a working GistRun I would really appreciate it. Here is my attempt @ghiscoding

[ghiscoding]

The demo is in the repo (under doc folder), you can see the Form Validation for how to do it

[sbattoh]

Thank you for taking the time to get back to me @ghiscoding, I really appreciate it. I tried the demo you sent and the same thing happens, I get the error message Date Entered is required. when I try to submit without specifying a date but the input does not change to the red color. I tried using different bootstrap renderers too but no luck.

[ghiscoding]

The demo might be using older version of the Aurelia validation, but I would still be surprised that the code changed. I tried the demo, and the input does go red, so I'm not sure what you mean or how you use the code.

[sbattoh]

Yes it goes red on your demo but as soon as I try to port it over to my code it doesn't. What version of bootstrap are you using?. I'm on the latest (4.1.3) @ghiscoding

[sbattoh]

Also this is what I see on my code @ghiscoding

[ghiscoding]

The demo is made with Bootstrap 3, so yes you will have to change some stuff, like css classes and possibly other things.

[sbattoh]

I replaced is-success and is-error by is-valid and is-invalid anything else you might think off if you have a minute to spare? @ghiscoding

[sbattoh]

This is what I'm getting with the following configuration: `

Enter some input

Date

Submit

and a new bootstrap renderer:

import { ValidationController } from 'aurelia-validation';
import { Container } from 'aurelia-dependency-injection';
import { ValidationControllerFactory } from 'aurelia-validation';
import {
    ValidationRenderer,
    RenderInstruction,
    ValidateResult
  } from 'aurelia-validation';

  export class BootstrapFormRenderer {
    render(instruction: RenderInstruction) {

      for (let { result, elements } of instruction.unrender) {
        for (let element of elements) {
          this.remove(element, result);
        }
      }

      for (let { result, elements } of instruction.render) {
        for (let element of elements) {
          this.add(element, result);
        }
      }
    }

    add(element: Element, result: ValidateResult) {
      if (result.valid) {
        return;
      } 

      // add the is-invalid class to the enclosing form-group div
      element.classList.add('is-invalid');

      const formGroup = element.closest('.form-group');      
      if (!formGroup) {
        return;
      }

      // add help-block
      const message = document.createElement('div');
      message.className = 'invalid-feedback';
      message.textContent = result.message;
      message.id = `validation-message-${result.id}`;
      formGroup.appendChild(message);
    }

    remove(element: Element, result: ValidateResult) {
      if (result.valid) {
        return;
      }

      const formGroup = element.closest('.form-group');
      if (!formGroup) {
        return;
      }

      // remove help-block
      const message = formGroup.querySelector(`#validation-message-${result.id}`);
      if (message) {
        formGroup.removeChild(message);

        // remove the is-invalid class from the enclosing form-group div
        if (formGroup.querySelectorAll('.invalid-feedback').length === 0) {
          element.classList.remove('is-invalid');
        }
      }
    }
}

export class BootstrapValidationControllerFactory extends ValidationControllerFactory {
  constructor(container: Container) {
    super(container);      
  }
  public static get(container: Container) {
      return new BootstrapValidationControllerFactory(container);
  }

  createForCurrentScope(): ValidationController {
      let ctrl = super.createForCurrentScope();
      ctrl.addRenderer(new BootstrapFormRenderer());        
      return ctrl;
  }
}

export class BootstrapValidationController extends ValidationController {
  public static get(container: Container) {              
      return new BootstrapValidationControllerFactory(container).createForCurrentScope();
  }
}
(BootstrapValidationController as any)['protocol:aurelia:resolver'] = true;

why is class="form-control" creating a duplicate input? @ghiscoding

[ghiscoding]

Are you using the Bootstrap 4 patch to for the date picker?

You are getting close to the resolution, it's probably just css classes to tweak. This lib was built for personal usage, not for work, and I don't have time to test everything. If you find places we can tweak by css or other things, then please make PR. However, I want this lib to still support both Bootstrap 3 and 4.

[sbattoh]

Yes I am using the Bootstrap 4 patch . I'll try a few more things to get it to work, otherwise I'll just implement my own validation I think

[sbattoh]

@ghiscoding I got it to work using JQuery as I don't have much time to spend on this but if you ever decide to add validation support for Bootstrap 4 please let me know. I'll be happy to test it out.

You will need to add the following in order to show the error message under the datepicker: .invalid-feedback { display: block; } You will also need to upgrade the Bootstrap renderer to what I had previously posted. Hope this helps.