I'm looking to implement the error message in the react-hook-form and I've noticed some behaviours that are really weird and I can't seem to fix them. For instance: In any of the fields, if I fail to meet the stated criteria, the error message will pop up (which is correct). However, if I remove the input, only the error icon will appear and the message will not show.
In addition, I'm having trouble to align the error message according to the input box. I've used margin to do it but it's not responsive.
I've created a sandbox and would really appreciate the help : https://codesandbox.io/s/elated-glitter-s406b?file=/src/App.jsx
You only provided an error message for the minLength validator. But if you empty your input completely the required validator will kick in. Either remove it or provide a message like you did with the message input
{...register("message", {
required: "Message is Required", <- set a message instead of just true
minLength: {
value: 3,
message: "Please enter your message"
}
})}
Related
I need to validate a single selection row on a datatables. I don't know which is the best way it can be done. Right now I've put a hidden type input that is filled by javascript when the users clicks a row on datatables. When I validate form, parsley doesn't submit it if required hidden input is blank, but no error message is shown.
I've also tried to get field:error event, but it is not fired on hidden field.
window.Parsley.on('field:error', function() {
// This global callback will be called for any field that fails validation.
console.log('Validation failed for: ', this.$element);
});
Is there any way I can show with parsley a validation error message if hidden field is blank on form submit? I know I can do it without parsley, just checking if field is blank on submit, but as the other form fields are being validated through parsley I would like to know a way to show parsley error message somewhere in the form by parsley.
Assuming you have removed the "type=hidden" part of the excluded option, it should work fine.
Tip: You should trigger an 'input' event on your hidden field whenever you modify it.
Post a working example if it still doesn't work.
According to documentation I can do it like this:
<input data-parsley-required-message="this field is required" />
But this requires to repeat the data-parsley-required-message for each input.
I would like to change message just in one place, is it possible without writing a custom validation?
There is API for updating error message:
updateError(name, {message: , assert: , updateClass: true});
But I cannot find method "updateError" on window.Parsley and not clear what "assert" means if I already can provide name for "required-message" validation.
As stated in the doc, parsley options are inherited from the form and the global level.
So you could specify it once at the form level with the data attribute
<form data-parsley-required-message="this field is required">
Or via javascript, at the form or global level:
$('form').parsley().options.requiredMessage = "this field is required"
$.Parsley.options.requiredMessage = "this field is required"
I know I can call $setValidity('errorkey', true) to clear a specific validation error from a field. However is there a way to clear all the validation errors from a single field?
I tried $setValidity(true) but that obvious didn't work. I guess I could loop through $error for the field and then call $setValidity. Is there an easier way?
Please use following line to remove all validations error
formName is the form name ..
$scope.formName.$setUntouched();-- set form to untouched
$scope.formName.$setPristine();--remove all validation error
I have a username input and I have a custom error message "Username already taken" via ng-messages. I managed to manually add and show the error message but the problem is the "error-class"(or something that turns the angular-material input into color red on error) is some kind of "delayed". I set the error then the error message shows but there is no error-class applied. I changed the username value(this will set the error to false based on my custom function) then the error message disappears but the error-class is applied just this time.
To show you what my problem is, heres a plunkr
--EDIT--
Someone gave me and idea, and I just have to manually set the error-class on input, but in angular-material's own way. Just put md-is-error on md-input-container and also to manually set input's validity in controller
<md-input-container md-is-error="sampleForm.userName.$invalid">
Heres an updated plunkr
Its working, See the plunker
Plunker
Use ng-class to dynamically add 'errorClass' to the input box
ng-class="{'errorClass': sampleForm.userName.$error.alreadyTaken}"
I have added .errorClass when the $error gets true.
write 'alexpogi' in username field which makes the content red
If I don't want text to displayed if a required field is not entered. How would I do this? I wasn't able to find documentation on this.
I don't want the 'This value is required.' or custom message within data-required-message to be displayed.
I am fine with the field being highlighted if it is entered incorrectly. Is this possible?
According to Parsley Documentation in their version 2, they already supported this features, just add "data-parsley-errors-messages-disabled" attribute to the <form> tag.
Add data-parsley-errors-messages-disabled to the field
from documentation:
Add parsley-success and parsley-error classes on field, but no error message.
In the input set data-parsley-required="false"
You want to check validity of the field, but show no message. The way to customize the error message shown is using "data-parsley-error-message" , so the "hack" is to provide an empty custom message:
In the input set this data-parsley-error-message=""