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?
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
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
I am not able to do client side validation, although the Layout seems to have the validator.
here is an example:
https://gozigzag.com/TestClientSideFormValidation
Although I saved the layout page, its code is:
<!doctype html>
<head>
<base href="/">
<script src="/dmxAppConnect/dmxAppConnect.js"></script>
<meta charset="UTF-8">
<title><%=_('\'Startup Landing Page\'')%></title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/style.css" />
<script src="/dmxAppConnect/dmxRouting/dmxRouting.js" defer></script>
<script src="/dmxAppConnect/dmxSwiper/dmxSwiper.js" defer></script>
<link rel="stylesheet" href="/dmxAppConnect/dmxSwiper/swiper.min.css" />
<script src="/dmxAppConnect/dmxSwiper/swiper.min.js" defer></script>
<script src="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>
<script src="/dmxAppConnect/dmxBootstrap5Modal/dmxBootstrap5Modal.js" defer></script>
<script src="/dmxAppConnect/dmxBootstrap5Offcanvas/dmxBootstrap5Offcanvas.js" defer></script>
<script src="/dmxAppConnect/dmxBrowser/dmxBrowser.js" defer></script>
<script src="/dmxAppConnect/dmxFormatter/dmxFormatter.js" defer></script>
<script src="/js/string.js" defer></script>
<script src="/dmxAppConnect/dmxStateManagement/dmxStateManagement.js" defer></script>
<link rel="stylesheet" href="/dmxAppConnect/dmxValidator/dmxValidator.css" />
<script src="/dmxAppConnect/dmxValidator/dmxValidator.js" defer></script>
</head>
<body is="dmx-app" id="LandingPage">
<div is="dmx-view" id="content">
<%- await include(content, locals); %>
</div>
<script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>
</html>