pageclip / valid-form Goto Github PK
View Code? Open in Web Editor NEWHTML5 form validation helpers
Home Page: http://valid-form.pageclip.co
HTML5 form validation helpers
Home Page: http://valid-form.pageclip.co
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/
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.