Mevrael / bunny

BunnyJS - Lightweight native (vanilla) JavaScript (JS) and ECMAScript 6 (ES6) browser library, package of small stand-alone components without dependencies: FormData, upload, image preview, HTML5 validation, Autocomplete, Dropdown, Calendar, Datepicker, Ajax, Datatable, Pagination, URL, Template engine, Element positioning, smooth scrolling, routing, inversion of control and more. Simple syntax and architecture. Next generation jQuery and front-end framework. Documentation and examples available.

Home Page:https://bunnyjs.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Validation preSubmit and isValid method

andtankian opened this issue · comments

What's up guys?

I couldn't found neither in docs or source code a way to verify if the form is valid.

In fact, I need to do extra things before properly submit the form (like sanitize inputs, made some animations, etc.)

Today, is it possible? Am I missing some method here?

If not, I suggest to implement these methods. It would be very interesting to have these.

Thank you very much.

Hi @andtankian

I believe you are well.

The first docs for BunnyJS are Web Standards.

You can check if form is valid with native form.checkValidity() and you can listen for submit event and add event.preventDefault() to cancel form submission within event listener.

Cheers

Thank you for replying.

The problem I'm having is about the Validation form submit event handler that is calling form.submit(). So doesn't matter if I event.preventDefault() cause although submit event handler is successfully prevented in my custom handler, the Validation form submit event handler is still invoked again.
For obvious reasons, browsers prevent these handlers to be executed eternally, so the submit is actually done regardless of my custom prevent default.

Do you have any ideas?

Thank you very much.

Thank you for notes.

Well, I suppose easiest option in that case would be to add onSubmit(form, promise / callback) method into Validation component and adjust init(). If it's a promise, wait till it's fulfilled. If it's a function, run it immediately.

In that case you could add additional actions before form is submitted like animations and you won't need to worry about checking if form is valid since it already is done for you inside if in init().

I am currently unavailable to do so. Maybe you could submit this commit and I would later push it to NPM.

Cheers

By now I'm also not able to perform a validation and send the form via Ajax when form is valid due this implementation detail. Also I didn't understand what you meant on

[...] add onSubmit(form, promise / callback) method into Validation component and adjust init().

preventDefault(); didn't work in any way.

I've searched on source code but didn't find references to this onSubmit method.