You must be doing something wrong if this isn’t happening. For example - are you properly building your form layout?
Paste your form code here for inspection.
Thanks for the feedback Teodor… that is good news then!
I’ve managed to work it out… you need to not have novalidate set on the form, and to have no client side validation checks set. Yippee!
However, I also need to make the message that Wappler/bootstrap creates be set to display:none, otherwise I’m getting both my own message and the one from the server side. Can you tell me which class to set that on please?
Thanks!
Antony.
I am not sure i understand what exactly do you mean by this? What is “your own message” and why would you hide the validation message created by the validator?
So I want to hide the message from the server side because it cannot contain database content… and I need this to make the app multi-lingual.
To get around this, I can put beneath each input my own error message:
<div class="row row_error" id="e_login_email" dmx-show="f_login.i_login_email.invalid">
<p>This input is required (client side message)</p>
</div>
And I now have that triggering when the server side validation shows there is an error.
However, the user is shown both the server side and client side messages:
So I want a class I can attach display:none to, in order to hide the server side message.
Why not use clientside validation then, instead of creating static containers and show/hide them?
Also this is not really a good condition:
dmx-show="f_login.i_login_email.invalid"
as it will trigger on ANY invalid event not only the required one … so if you user enters asdfasfas instead of an email he will still see the input is required message and not please enter a valid email
Why reinventing the wheel, when you have all of this taken care in the clientside validation?
There is already a bug report for this as I told you before. I don’t understand this FR to be honest.
Good question.
It is because I don’t like the way client side validation gives messages as you type… it feels too “Big Brother” and very annoying to me!
That is true… but I can use .validationMessage to trigger the correct message, so that isn’t a problem.
Not sure what you mean by this.
Validation as you type is actually a good UX practice. Why filling the form twice when you can see your errors as you type and correct them?
Yes, but being a mere pleb, your report is sufficiently technical that I don’t understand it.
Well it is turning into less of an FR and more of a RFU - Request for Understanding!
Well ask…you mortal pleb! In the bug report so it gets some visibility 
Well our views are just different on this subject Teodor!
Could you tell me which class is attached to the Wappler/Bootstrap generated error message please?
Antony i really don’t understand what are you asking about … really.
What does that mean?
What do you want to do on your page?
No problem Teodor… I’ll show you my implementation later when I have done it.
I just have one simple question left to be able to implement what I require…
In order to style the Wappler/Bootstrap generated validation message, what class should I attach the CSS to?
This really depend on how your form is setup.
Are you using input form groups, or are you just putting your inputs in a form tag?
I’m not using input groups… the structure is:
<form id="f_login" method="post" is="dmx-serverconnect-form" dmx-generator="bootstrap4" dmx-form-type="vertical" action="dmxConnect/api/login/login.php" >
<input class="form-control">
CAn you post your exact code please.
We always have this issue wiht you Antony refusing to paste what is the code on your page so i can answer your question directly.
Why paste the code when we can spend 1 more hour and 15 more messages?
Please post the whole form here as it is on your page.
1 Like
<form id="f_login" method="post" is="dmx-serverconnect-form" dmx-generator="bootstrap4" dmx-form-type="vertical" action="dmxConnect/api/login/login.php" dmx-on:success="flow_login.run()" id="f_login"
dmx-on:unauthorized="notification.warning('Wrong Login Details!')" dmx-on:forbidden="notification.warning('Login Forbidden')" dmx-on:abort="notification.warning('Login Aborted')" dmx-on:invalid="notification.warning('Login Invalid')"
class="h-100">
<div class="d-flex h-100 flex-column justify-content-around" id="d_login_flex">
<!-- ------------- Row login_header -------------- -->
<h3 class="text-center">{{apptext.value.210}} Workshop Angel </h3>
<!-- ------------- Row login_email -------------- -->
<div class="container-fluid container_field m-0" id="c_login_email">
<div class="row row_label">
<label for="i_login_email" dmx-hide="hide_labels.value==1" dmx-style:visibility="show_label.items.contains(220)||show_all_labels.value==1?'visible':'hidden'">{{apptext.value.220}}</label>
</div>
<div class="row row_input">
<p class="icon_field" dmx-style:visibility="show_input_icon.value==0?'hidden':'visible'" data-trigger="hover" data-placement="auto">
<i class="far fa-envelope" dmx-bs-tooltip="apptext.value.221"></i></p>
<div class="div_input">
<input id="i_login_email" name="user_email" type="text" class="form-control input_text" autocomplete="banana" data-msg-email="" required="" data-msg-required="This input is required (client side message)" minlength="7"
data-rule-number="">
</div>
<p dmx-on:click="show_help.items.contains(220)?show_help.remove(220):show_help.addUniq(220)" class="icon_help">
<i class="far fa-question-circle"></i>
</p>
</div>
<div class="row row_help" dmx-show="show_help.items.contains(220) || show_all_help.value==1" dmx-html="apptext.value.229">
<p></p>
</div>
<div class="row row_error" id="e_login_email" dmx-show="f_login.i_login_email.invalid">
<p>This input is required (custom message)</p>
</div>
</div>
<!-- ------------- Row login_password -------------- -->
<div class="container-fluid container_field m-0" id="c_login_password">
<div class="row row_label">
<label for="i_login_email" dmx-hide="hide_labels.value==1" dmx-style:visibility="show_label.items.contains(230)||show_all_labels.value==1?'visible':'hidden'">{{apptext.value.230}}</label>
</div>
<div class="row row_input">
<p class="icon_field" dmx-style:visibility="show_input_icon.value==0?'hidden':'visible'" dmx-bs-popover="'This is a popover Content'" dmx-bind:popover-title="'This is a popover Text'" data-trigger="hover"
data-placement="auto">
<i class="fas fa-user-secret" dmx-bs-tooltip="apptext.value.231"></i></p>
<div class="div_input">
<input id="i_login_password" name="user_password" class="form-control input_text" autocomplete="banana" data-msg-required="This input is required (client side message)" required="" dmx-bind:value="f_login.i_login_password.validationMessage">
</div>
<p dmx-on:click="show_help.items.contains(230)?show_help.remove(230):show_help.addUniq(230)" class="icon_help">
<i class="far fa-question-circle"></i>
</p>
</div>
<div class="row row_help" dmx-show="show_help.items.contains(230) || show_all_help.value==1" dmx-html="apptext.value.239">
<p></p>
</div>
<div class="row row_error" id="e_login_password" dmx-show="f_login.i_login_password.invalid">
<p>This input is required (custom message)</p>
</div>
</div>
<!-- ------------- Row login_button -------------- -->
<div class="container-fluid text-center" id="c_login_login_button">
<button class="button_save w-100" id="b_login_login" type="submit">{{apptext.value.204}}</button>
</div>
<!-- ------------- login_last_bit -------------- -->
<div class="container-fluid text-center" id="c_login_login_last_bit">
<div class="row justify-content-around" id="r_login_remember_forgot">
<div class="col p-0" id="c_login_remember_email">
<input novalidate class="form-check-input" type="checkbox" value="" id="i_login_remember" name="remember">
<label class="form-check-label" for="i_login_remember">{{apptext.value.213}}</label>
</div>
<div class="col p-0" id="c_login_forgot_password">
<button class=" button_link login_link" href="" dmx-on:click="window.setValue('login_password')">{{apptext.value.214}}</button>
</div>
<div class="container-fluid my-1 text-center border-top border-dark" id="r_login_click_to_signup">
<button class="button_link login_link" dmx-on:click="window.setValue('login_signup')">{{apptext.value.215}}</button>
</div>
</div>
</div>
</div>
</form>
See - that’s better.
In your case the validation messages are placed inside an element with a class of: .invalid-feedback
1 Like
Yeay, thank you Teodor… 
