'BunnyElement is not defined' console message with standalone validation.min.js

[jools-r]

Just a heads up. When using the dist/validation.min.js on its own, the console throw the following error:

validation.min.js:1 Uncaught (in promise) ReferenceError: BunnyElement is not defined at Object.focusInput (validation.min.js:1)

but validation still functions correctly. The position seems to refer to the scrollTo position. In my case this is unimportant so I removed that line from the minified js.

PS: In your docs, you mention the Validation Core itself is only 2kb. Is that this dist?

[Mevrael]

Hi @jools-r

Thank you for your interest in BunnyJS.

First of all recommended way to use JavaScript in web apps is to bundle all ES6 modules into one file and return only one compiled file which would contain only code you really use. You may use Bunny Assets Builder for that if you don't have any configured build process in your project.

According to Example https://bunnyjs.com/examples/form-validation/ if you are using dists you have to include all the dependencies first:

<script src=".../dist/ajax.min.js"></script>
<script src=".../dist/file.min.js"></script>
<script src=".../dist/image.min.js"></script>
<script src=".../dist/element.min.js"></script>
<script src=".../dist/validation.min.js"></script>

BunnyElement is still used in Validation, however, in the future it is going to be removed, while it functions will be moved into DOM utils and, may be, these additional features will be moved out of Validation into separate plugins like we already have in DataTables.

Ajax is going to be removed and replaced with fetch API. Ajax is used only for ajax validation rule. File and Image are used in file/image validation rules respectively.

PS: In your docs, you mention the Validation Core itself is only 2kb. Is that this dist?

Yes, this is Validation component itself only, however, today there might be a bit more functions which, probably, will be moved into separate plugins.

[jools-r]

Thank you for your very prompt reply! I appreciate that I am not using all of bunnyjs' potential but I was expressly looking for a lean non-jquery cross-browser validation module with in-place comments for a small site and the situation in question doesn't require file or image handling, or additional ajax verification queries. The form is small so scrolling is not necessary either. The standalone validation works fine except for the above console message. That it picks up the conditions from the markup rather than requiring a series of parallel directives is an added bonus. So, a big thank you!

Yes, this is Validation component itself only, however, today there might be a bit more functions which, probably, will be moved into separate plugins

I guess I was wanting to know if I could do an even slimmer build. The 'advertised' 2kb caught my eye, but at present, the minified validation.min.js is 16.5kb. mod_deflate / gzip compression will improve on that, but I'm not sure whether that will bring it down to 2kb.

[Mevrael]

I've rebuilt dists, there were babel helpers generated as well, now it is 10kb.

Yes, all numbers you see on BunnyJS website includes gzip compression.

If you are not using any specific logic, you have to manually remove many methods from ValidationValidators and _bn_getFile() and all the related data from other objects as well.

Fact is, in any modern web app there would be at least files/images and almost everywhere ajax as well, so removing everything now and keeping only core for one page, is not the best option either. For your case you may write own very simple validation in 10min, because in current situation you have to include Promise polyfill as well.

[Mevrael]

P.S. you may also join our Gitter https://gitter.im/bunny-js/Lobby for live discussions, sharing your feedback or proposals and additional support, as well as following the updates.