Using VeeValidate for the first time and things "look" correct but I am not getting any feedback from the errors. Following the documentation I have implemented the ValidationProvider around my input.
<ValidationProvider
v-if="!coinbaseKeys.existing"
v-slot="{ errors }"
rules="required|alphaNum"
>
<span>{{ errors[0] }}</span>
<input>type="text" class="form-control"></input>
</ValidationProvider>
I have also created some rules of my own inside a validation.js file.
import { extend } from 'vee-validate';
import {
required,
email,
alpha_num,
length
} from 'vee-validate/dist/rules'
extend('email', email);
extend('required', required);
extend('alpha_num', alpha_num);
extend('length', length);
I am not getting any console errors, but when I type in this field there are no errors showing up?
I had no v-model on the input very...very rookie mistake. VeeValidator doesn't know where the data to validate is if there is no v-model. I wish VeeValidator would make an error show in this circumstance.
Related
Good evening to all,
I have an error when I want to modify an entity.
I have my post entity, another error entity, and an associative postError entity.
So I want to modify the errors chosen for the concerned item on the updatePosteErreur form.
I already managed the case for the addition of the itemError, and it works.
However, when I want to modify the itemError by modifying the errors, I have this error message:java.lang.IllegalArgumentException: Parameter value [6] did not match expected type [com.MailleCoTech.SuiviProduction.entities.Poste (n/a)]
I don't understand...
Here is my service and my updateView:
<th:block th:each="erreur: ${erreurs}">
<input class="form-label mt-4" type="checkbox" name="erreurs" th:field="*{erreurs}" th:value="${erreur.id}"/>
<label th:text="${erreur.name}"></label>
<br>
</th:block>
if(!posteUpdateForm.getErreurs().isEmpty()){
List<PosteErreur> posteErreurs = posteUpdateForm.getErreurs().stream().map(erreur -> {
PosteErreur posteErreur = posteErreurService.findByIdPoste(posteUpdateForm.getId());
posteErreur.setId(posteErreur.getId());
posteErreur.setIdErreur(erreur);
posteErreur.setIdPoste(poste);
return posteErreur;
}).collect(Collectors.toList());
this.posteErreurService.save(posteErreurs);
}
return poste;
I don't put all the code, because I have the same view to add, and an add function in the service and everything works, it's when I modify that I get this error message :/
thank you in advance for your help and your time
I have implemented form validation with formik and react. I am using material-UI.
<Formik
initialValues={{ name: '' }}
onSubmit={values => {
console.log('submitting', values);
}}
validate={values => {
alert();
let errors = {};
if (!values.name) {
errors.name = 'Name is required';
}
return errors;
}}>
{({
handleSubmit,
handleChange,
values,
errors
}) => (
<form onSubmit={handleSubmit}>
<div>
<input name="name"
onChange={handleChange}
name="name"
value={values.name}
type="text"
placeholder="Name">
</input>
{errors.name &&
<span style={{ color: "red", fontWeight: "bold" }}>
{errors.name}
</span>
}
</div>
<div>
<button>Submit</button>
</div>
</form>
)}
</Formik>
Above code is working fine for normal input tags but it is not working for Select and TextField material widgets.
Is there a compatibility issue with material UI ?
Please help.
As Chris B. commented, the solution is to wrap each desired element inside a React component that has what Formik requires. In the case of Material-UI, Gerhat on GitHub has created some of those components.
You can use those by downloading the source from the github link above. There is also a usage example there, showing how to use Gerhat's "wrapper" for a Material TextField and a Select.
In Gerhat's usage example, TextField is a component in that github repo; it isn't the Material UI TextField directly; it is a Formik-compatible "wrapper" around the Material TextField widget.
By looking at gerhat's source code, you can learn how to do the same for other Material widgets you need.
HOWEVER, gerhat's implementation may not be the easiest for a beginner to understand. Those wrappers are easy to use, but it may not be obvious from that code how to write your own wrappers for other widgets or components.
See my answer here for a discussion of Formik's <Field> and useField. Those are easier ways to "wrap" existing React components. (Not specifically Material-UI widgets, but AFAIK, you can wrap those like any other React component.)
If you do want to understand gerhat's approach, here are some comments about the code you'll see at github.
This is the source to TextField.jsx in that repo.
The "heart" of TextField.jsx, is its wrapping around Material's TextField. The generated virtual-DOM element (representing a Material TextField) is seen in these lines:
return (
<TextField
label={label}
error={hasError}
helperText={hasError ? errorText : ''}
{...field}
{...other}
/>
)
See the source link above, for the details of how this is made compatible with Formik. IMHO, a fairly advanced understanding of both React and Formik is required, to understand what is being done there. This is why I mentioned Field and useField as the place to start, for writing your own "Formik-compatible wrappers".
One detail I'll mention. The implementation relies on a file index.js in the same folder as TextField.jsx, to map the default of TextField.jsx, which is FTextField, to the name TextField, which is how you refer to it in the "usage" code at the start of this answer. SO Q&A about index.js file of a React component.
index.js contents:
export { default as TextField } from './TextField'
The other two files in the TextField source folder are ".d.ts" files. See this Q&A to understand those. You don't need them unless you are using TypeScript.
Having issue with form validation .
i want to submit the form only when form is valid.
but with the empty inputs and clicking on submit button is submitting the form although the inputs are empty.
<form name="equipmentForm" #f="ngForm" (ngSubmit)="f.form.valid && addEquipment()" validate>
Inputs be like this.
<input name="equimentId" class="text-input form-control" type="text" [(ngModel)]="model.equipmentNumber" pattern="^[0-9][0-9]{1,19}$" title="Equipment ID. can be upto 20 digits only.">
I cant post the whole code although.
this
f.form.valid is true from form initialization
wanted to acheive something like this
<div *ngIf="!model.equipmentModel && f.submitted" class="text-danger">
Please enter Equipment Model
</div>
So on submit i want to show this message instead of default browser's.
but this f.form.valid is goddamn true from default.
You should add required attribute to your input tags to, then as #Cobus Kruger mentioned, form will not be submitted untill it is filled.
However you can also give a try to pristine, dirty options, which allow you to check if the user did any changes to the form so in this case your condition may look like this:
<form name="equipmentForm" #f="ngForm" (ngSubmit)="f.form.valid && f.form.dirty ? addEquipment() : ''" validate>
and the input:
<input name="equimentId" class="text-input form-control" type="text" [(ngModel)]="model.equipmentNumber" pattern="^[0-9][0-9]{1,19}$" title="Equipment ID. can be upto 20 digits only." required />
In this case it will check if any changes were applied to the input, and submit the form if both conditions are met.
If you specify the required attribute on the input, then the form will not be submitted unless a value is filled in. But that only covers values that were not supplied and you may want to check for invalid values as well.
The usual way is to disable the submit button unless the form is valid. Like this:
<button type="submit" [disabled]="!f.form.valid">Submit</button>
The Angular documentation about form validation also shows this. Look near the bottom of the "Simple template driven forms" section
In function which you call on submit you can pass form as parameter and then check. In html you will need to pass form instance:
<form name="equipmentForm" #f="ngForm" (ngSubmit)="addEquipment(f)" validate>
In typescript:
addEquipment(form){
if(form.invalid){
return;
}
//If it is valid it will continue to here...
}
I would like to use Bootstrap's has-success and has-failure classes with Thymeleaf.
So far I have
<div th:class="${#fields.hasErrors('field')}? 'form-group has-error' : 'form-group'"></div>
This displays the failure style correctly, when the form is posted and the field is invalid.
However if I change the second part of the ternary to 'form-group has-success', then on the initial form GET request, then, of course, it styles it as a success, even though the form hasn't been posted yet.
My question: is there a way in Thymeleaf to handle the following
Displays a form without any styling on GET.
On POST apply has-error or has-success classes.
I think you'll need to add attributes to your Model in the back-end for this.
In you GET request, change nothing. In your POST request, add an attribute: ["hasErrors", true] if the form data you send via the post is incorrect, false otherwise.
Now in your html you can add the following:
<th:block th:if="${hasErrors != null}">
<div th:class="${hasErrors ? 'form-group has-error' : 'form-group has success'"></div>
</th:block>
<th:block th:unless="${hasErrors != null}">
<div class="form-group"></div>
</th:block>
You check if the hasErrors model attribute isn't null, if it is, it means you're in the GET method and you should display a simple form-group. If the hasErrors is not null, you can create the ternary expression based on the boolean value hasErrors. The th:block is non-html. You can replace it with a div, but then you neen an extra div just to check a boolean.
I'm not going into GET/POST problem but I think that this can help you:
New th:errorclass for adding CSS class to form fields in error
Until now, whenever we wanted to apply a specific CSS class to an input field in a form when there were errors for that field, we needed to use the th:class or th:classappend attributes.
In Thymeleaf 2.1, in order to simplify this structure, a new th:errorclass attribute processor has been introduced. This processor will read the name of the field from the name or th:field attribute in the same tag, and apply the specified class if such field has errors.
Note the 'error' literal is in fact a token, so no single quotes are really needed.
The result is much more concise. Note also that th:errorclass works like th:classappend, not th:class. So the specified class will in fact be appended to any existing ones.
http://www.thymeleaf.org/whatsnew21.html#errcl
I found that Thymeleaf as a hasAnyErrors function.
<div class="form-group row"
th:attrappend="class=${#fields.hasAnyErrors()
? #fields.hasErrors('field') ? ' has-error' : ' has-success'
: '' }">
This now works.
When the user GETs the form, hasAnyErrors is false, so the empty string is appended and the input and label receive the default style.
When the user POSTs the form, if there are any errors then the first part of the ternary is evaluated. This adds the has-error or has-success styles.
This was inspired by Roel Strolenberg's answer below.
i have been working on this problem for hours.
I have a form, with a textarea. I use the nicEdit texteditor. It replaces the textarea and shows a nice text editor, because i want my users to add some style to their content.
I use codeIgniter (PHP), and i use the form_helper to create the form. Also i use the form_validation for ss-validation and jquery validation for cs-validation
When i click submit, the form submits seemingly fine. I say this because i use fiddler (an http logger) and i see my text with the right html tags wrapped around it by the text editor.
but when i get the #_pots data in the view, somehow some part of the tags have been removed.
How fiddler traces the HTTP call and the submitted form data (seems correct)
Hello SO, <br><br>
<span style="font-weight: bold;">the following line should be bold</span><br><br>
<span style="font-style: italic;">the following line should be italic</span><br><br>
<span style="text-decoration: underline;">the following line should be underlined</span><br>
How my html looks in my view and in my print_r result from my #_post data
Hello SO,<br><br>
<span bold;"="">the following line should be bold</span><br><br>
<span italic;"="">the following line should be italic</span><br><br>
<span underline;"="">the following line should be underlined</span><br>
It looks like somehow, when i get my data back, it removes the style="font-weight
Does $_post do anything with special characters?!?! has someone experienced similar issues with this?
all responses are greatly appreciated.
You need extend the CI_Security class from Codeigniter and comment/remove/modify this line:
/*
if(in_array($_SERVER['REQUEST_URI'],$allowed))
{
$evil_attributes = array('on\w*', 'xmlns');
}
else
{
$evil_attributes = array('on\w*', 'style', 'xmlns');
}
*/