pageclip / valid-form Goto Github PK

the form is inside a hidden div, which is used as an inline popup.

error message not showing properly after loading the popup.

For the poppup, I'm using Glightbox plugin. I've also tried the onOpen function of glightbox

Fix: #7

I'm using the following options:

ValidForm(form, {
  validationErrorClass: 'Input-error has-text-danger'
})

while it does work perfectly when the error is shown for the first time, every subsequent display does not remove the first one – or every time I click on submit another error message is added:

Having only one validationErrorClass works perfectly:

ValidForm(form, {
  validationErrorClass: 'Input-error'
})

Ping me if you need a test repo :)

 input.addEventListener('input', function () {
    if (input.validity.valid) {
      input.classList.remove(invalidClass)
    }
  })

When insert first letter or select first option on required fields the input.validity.valid is false, but the second attempt the input.validity.valid is true.

So the input.validity.valid is set to true after EventListener('input'... happens.

Requires polyfills for node.remove() and classList.remove()

If I start entering text and then leave the focus of the box I was in, I want to know if there are errors before I submit. This is also in contrast to just leaving the errors displayed beforehand until the user satisfies the requirements.

I was trying this out with my project and got the following error, Never had any issues previously like this with gulp and babelify in this framework so unsure if my environment or the module.

`ReferenceError: Unknown plugin "transform-runtime" specified in "[repo]/node_modules/@pageclip/valid-form/.babelrc" at 0, attempted to resolve relative to "[repo]/node_modules/@pageclip/valid-form" while parsing file: [repo]/node_modules/@pageclip/valid-form/index.js
at [repo]/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
at Array.map (native)
at Function.normalisePlugins ([repo]/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
at OptionManager.mergeOptions ([repo]/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
at OptionManager.init ([repo]/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions ([repo]/node_modules/babel-core/lib/transformation/file/index.js:212:65)
at new File ([repo]/node_modules/babel-core/lib/transformation/file/index.js:135:24)
at Pipeline.transform ([repo]/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at Babelify._flush ([repo]/node_modules/babelify/index.js:26:24)
at Babelify.prefinish (_stream_transform.js:137:10)
at emitNone (events.js:105:13)
at Babelify.emit (events.js:207:7)
at prefinish (_stream_writable.js:576:14)
at finishMaybe (_stream_writable.js:584:5)
at endWritable (_stream_writable.js:595:3)
at Babelify.Writable.end (_stream_writable.js:546:5)

Currently, I have to overwrite the default classes:

ValidForm(document.querySelector('form'), {
  invalidClass: 'is-invalid',
  validationErrorParentClass: 'was-validated',
  validationErrorClass: 'invalid-feedback',
  errorPlacement: 'after'
});

to make it compatible with https://getbootstrap.com/docs/4.1/components/forms/#custom-styles

Given the popularity of bootstrap and the (I think) minor changes it requires, it would be really nice to have these as the default. I can make a PR if you like.

PS: I've created a demo app that demonstrates how Rails backend validations are used for frontend validation:

https://github.com/lafeber/rails-bootstrap-frontend-validations/