I have required in my input element and I want to set custom error message there.
this works:
oninvalid="this.setCustomValidity('custom error')"
But I want to read that error message from resources which is in json file. I'm using i18n and ng2-translate which works fine if I'll do:
<span>{{'General.EmptySearch' | translate }}</span> it displays my error message.
so If I'll do that:
oninvalid="this.setCustomValidity('{{'General.EmptySearch' | translate }}')"
it says
Binding to event property 'oninvalid' is disallowed for security reasons, please use (invalid)=...
If 'oninvalid' is a directive input, make sure the directive is imported by the current module.
ok I'll change it. I'm doing that:
(invalid)="this.setCustomValidity('{{'General.EmptySearch' | translate }}')"
error is:
Got interpolation ({{}}) where expression was expected at column 24 in [this.setCustomValidity('{{'General.EmptySearch' | translate }}')]
What's wrong?
Here is my form:
int .ts file
searchval: FormGroup;
ngOnInit() {
this.searchval = new FormGroup({
Search: new FormControl('')
});
}
and html
<form (ngSubmit)="onSubmit(searchval)" [formGroup]="searchval">
<input type="text" class="form-control" required formControlName="Search" placeholder="{{ 'General.Search' | translate }}">
<button type="submit"></button>
</form>
OK, so you are using the model-driven form syntax.
Check out the official doc on form validation. It shows how to do form validation the proper way. It ALSO shows how to have validation messages in your code (vs in your template), which is what your question was about. Once your validation messages are in your code, you'll have no problem translating them.
Side note: I'm really curious why you wanted to validate your fields watching the (invalid) DOM event. I've never seen it done that way.
Related
I am using Vee Validate with Vuetify like this:
<v-text-field
v-model="email"
type='email'
required
v-validate="'required|email'"
:error-messages="errors.collect('email')"
label="E-mail"
data-vv-name="email"
ref="email"
required
></v-text-field>
I want to use some field flags shown in the docs like this:
<span v-show="errors.has('email') && fields.email.touched">{{ errors.first('email') }}</span>
I want to use the built in Vuetify form errors since they look nice but can not seem to get the flags to work. I have tried:
:error-messages="errors.collect('email') && fields.email.touched"
This clearly is not correct. Any ideas?
Edit
I have added a code pen example, you will notice that as soon as you start typing in the email field you get an error in the confirm email field. What I am trying to do is only show the error if the field has an error and has been touched/changed.
https://codepen.io/tjquinn/pen/gKrVdX?&editors=101
Have you tried to rename your fields bag when adding VeeValidate to Vue in your main.js ? Sometimes conflicts happen whit global name fields.
I do it this way, in my main.js :
Vue.use(VeeValidate, {fieldsBagName: 'formFields'})
and in my code I add the prop data-vv-scope="myFormName" and access it like this :
this.formFields['$myFormName']['keyName'].touched
We are re-designing a site and part of that re-design involves making the site accessible to screen readers and the like. I'm using latest version (2.8.0). Here's what's happening --- validation for all text, select and textarea fields in our forms work perfectly. In order to be accessible, checkbox and radio inputs are wrapped in tags. The html for a set of checkboxes looks like this:
<div class="form-group">
<p id="applicant_type_desc" style="margin-bottom: 6px;"><strong>I am: <span class="text-danger" aria-hidden="true">*</span><span class="sr-only">Required</span></strong> <em class="small">(check all that apply)</em></p>
<div class="checkbox">
<label id="applicant_type_patient_desc">
<input type="hidden" name="applicant_type_patient" id="" value="N">
<input type="checkbox" name="applicant_type_patient" id="applicant_type_patient" value="Y" {checked_applicant_type_patient} aria-labelledby="applicant_type_desc applicant_type_patient_desc" data-parsley-multiple="type" data-parsley-error-message="Please specify whether you are a patient, relative, employee or other.">
A patient
</label>
</div>
followed by more checkbox divs without error messages and ended with an end div for the for form-group wrapper.
If I load the form and click 'submit', all the text fields are validated properly. If I add 'required' to the checkbox above, when 'submit' is clicked nothing happens and the form is submitted with no validation at all.
The same thing happens when I try to validate a radio button set as required.
There is some custom jQuery and parsley code which creates a div to hold all the error messages and transforms the error messages into links to the field id so that a screen reader can follow them and focus on the field in error. But imho, this should have no effect on why the form validation doesn't kick in.
I'm absolutely baffled.
FYI - I tried this using an earlier version (2.0.3) of parsley and the validation actually worked, although all my custom error processing was ignored.
Any insight would be greatly appreciated.
As it turns out, parsley handles the errorswrapper element differently for text, textarea and selects then it does for checkboxes and radio buttons.
The starting wrapper element for text, textarea and select contains the parsley-data-id attribute whereas checkbox and radio button elements contain the parsley-data-multiple attribute whether that was generated by parsley or entered manually in the html.
My code was looking for parsley-data-id and, of course the jquery selector failed and generated an error. A colleague was able to spot this for me while we were looking at the page in chrome inspector. Once i saw the error, making a simple adjustment to the form:error event function allowed everything to work.
I am facing an issue that is really hard to debug. I have a JSP page that has some form elements on it that submit to a Struts2 action. I also have a XML form validation file to perform some validation on the submitted fields. The file has the naming convention 'actionName-validation.xml'
This works fine, but when I add a drop down box, outside of the form, the validation now fails. Instead it redirects to a blank page and my breakpoint in my action class is not hit.
Is there a way to turn on some kind of debugging or logging for the validation? Why would adding a tag outside of a form cause this to happen?
Here is the code on the JSP page:
<s:select id="dataSource" name="selectedDataSource" theme="simple" listValue="top"
headerKey="" headerValue="Choose Data" list="dataSources" size="1" />
<div id="forms">
<s:form method="post" action="MyAction" theme="simple">
<p>
<label class="input" for="name"
<span style="color:red;">*</span>
<span>Name</span><br>
<s:textfield theme="simple" name="name" maxlength="11" size="11" />
<br>
<s:fielderror theme="plain"><s:param value="'name'" /</s:fielderror></label>
</p>
<s:submit value="Create New" theme="simple" cssStyle="display: block; clear: left;"/>
</s:form>
</div>
If I remove the <s:select> tag, it works.
Any help would be greatly appreciated it.
EDIT2: I found the problem. I needed a get method for the list that is used to populate the select drop down inside the action that the form submits to.
I had one for the action that initially is called for the page, but when the validation fails and it re-loads that page from the form action class, it tries to re-populate the select drop down and needs a getter there. I feel silly for not finding that sooner. Would be nice if there were some type of logging or messaging of these types of issues.
thanks.
The error you are encountering is not a validation error (handled by the Validation Interceptor), but an error occurred when setting the parameters (raised by the Parameters Interceptor) and for which the Conversion Error Interceptor added a fieldError, which you are not seeing because
your INPUT result lands on a blank page and
you are using theme="simple" on the textfield, which forces you to add <s:fielderror fieldName="dataSource" /> to show it (or <s:fielderror /> to show them all).
Read how the INPUT result works, set your page as the INPUT page, print the errors, then you will discover the problem, that is most likely related to the fact that you've not specified a listKey attribute in your select, that is sending the description instead of the code of the datasource to selectedDataSource, which is probably an Integer.
I found the problem. I needed a get method for the list that is used to populate the select drop down inside the action that the form submits to.
I had one for the action that initially is called for the page, but when the validation fails and it re-loads that page from the form action class, it tries to re-populate the select drop down and needs a getter there. I feel silly for not finding that sooner. Would be nice if there were some type of logging or messaging of these types of issues.
I am now getting trouble by the following code.
<input type="text" v-validate:startdate="['required']" v-model="current.start_at">
<date-picker :model.sync="current.start_at"></date-picker>
The problem is that the required validation works with the old value instead of new value of current.start_at when I change start_at on date-picker.
So, for example, instead of 01/01/2001, it still keeps 01/01/200 when validate with required, so it makes me mad.
I hope to get a solution about it.
Please help me!
While trying the bassistance.de's jQuery form validation plugin I ran into something interesting.
If I provide an errorPlacement option to append errors in a <div id="errContainer"></div> and place this div outside the <form>, the error messages are duplicated each time a validation occurs. Whereas, if the errContainer div is placed inside the <form>, things work just fine.
Example HTML:
<form id="frmQuote" action="#" method="get">
<input type="text" name="txtQuote"/>
<button type="submit" id="btn">Send</button>
</form>
<div id="errContainer"></div>
plugin option:
errorPlacement: function(error, element){
error.appendTo($("#errContainer"));
}
//... further options
For this case, the errors duplicate as and when an element is validated. If I submit the form, the whole bunch of errors is displayed again, below the previous errors.
Is the placement of the div a dependency? Or am I doing something wrong?
Thanks for the help :)
Instead of using errorPlacement in this case, you should use the errorLabelContainer, which would do exactly what you are wanting, and also manage the errors correctly (i.e. not duplicate them):
$('#my-form').validate({
//other options, rules, etc
errorLabelContainer:'#errContainer'
});