Bootstrap 5 Validation not working

Hi There,

I am using latest Wappler version and having trouble making this work. I followed the steps above, but the client side validation on the form is not working. Has anybody experienced the same or is it just me?

1 Like

What is not working exactly?

When I make data entry that does not meet the validation rules, it does not show up the custom message? So basically does not warn the user that the entry does not meet the validation rules.

The validation messages appear on form submit.

It should validate on from submit however it does not. I am using bootstrap 5, server connect form. Not sure what I am doing wrong here… apologies if these questions seem silly. I am very new to Wappler. Please direct me to any resource that you think can help me understand - thanks for your patience.

1 Like

Please check for any errors in the browser console.

I noticed this message on the BootStrap 5 From validation page: https://getbootstrap.com/docs/5.0/forms/validation/

We are aware that currently the client-side custom validation styles and tooltips are not accessible, since they are not exposed to assistive technologies. While we work on a solution, we’d recommend either using the server-side option or the default browser validation method.

I will move on validate with server side option now.

No that has nothing to do with our validation component. Client side validation is also working fine with Bootstrap 5.

@seriatim if possible, do you have a live link to the page with the issue, or a screenshot of your form code and head section could also assist in tracking down the issue easier.

<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="Play" appConnect="local" components="{dmxValidator:{}}" -->
<meta name="ac:route" content="/Play">
<main>
    <div class="container">
        <div class="row">
            <div class="col">
                <form is="dmx-serverconnect-form" id="form1" method="post" action="api/AddRTO" dmx-generator="bootstrap5" dmx-form-type="horizontal">
                    <div class="mb-3 row">
                        <label for="inp_input1" class="col-sm-2 col-form-label">Some text</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inp_input1" name="input1" aria-describedby="inp_input1_help" placeholder="Enter Some text" required="">
                            <small id="inp_input1_help" class="form-text text-muted">Your input is very valuable.</small>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="inp_input2" class="col-sm-2 col-form-label">Input2</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="inp_input2" name="input2" aria-describedby="inp_input2_help" placeholder="Enter Input2" required="">
                            <small id="inp_input2_help" class="form-text text-muted">Your input is very valuable.</small>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <div class="col-sm-10">
                            <button type="submit" class="btn btn-primary">Button</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
</main>

So it’s a nodejs content page?
Are you sure you have saved your layout page when adding the validation? And are you sure the validator js file is included there on the layout page?

2 Likes

Thanks @Teodor. I didn’t have the template page saved. I have now and its working fine.

1 Like

I had a different issue just 5 min ago but the solution is the same, I had forgotten to save my layout page and it solved it. Just started reading some threads while taking a quick break, thanks for this thread hahaha