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"
Related
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"
}
})}
I am using, "formsy-react" module for validations, where I need to create different class for input type="text", type="checkbox", type="radio"
Is there any better way to achieve validations in react.
Please let me know module name and features.
A "better way" is subjective. It depends on your use case.
The simplest way to validate input data is using the HTML attribute pattern which you can read about here
For example, to only allow maximum 3 lowercase and uppercase letters without any special characters or numbers:
<input type="text" pattern="[A-Za-z]{3}" />
Another way of validating data is by using Regex (which is automatically generated with the pattern attribute stated above). But you can do it manually.
Javascript example for validating an e-mail address:
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
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=""
I added field validation attributes like "required" and "pattern" in my form, and the form is inside a ng-controller. The validation works. But it seems the validations are triggered on page load, and I see all the fields are marked as invalid with error message when the page load.
I tried to add "novalidation" attribute to the form as indicated in the examples on AngularJS website, but no luck.
I would like to have the validation triggered the first time the user tries to interact with it. How can I do that?
Update
Here's an example https://jsfiddle.net/davidshen84/00t197gx/
<div class="mdl-cell mdl-cell-6-col mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="screenname" pattern="[a-zA-Z0-9]{3,}" ng-model="comment.screenname" required/>
<label class="mdl-textfield__label" for="screenname">Screen Name</label>
</div>
On load, you should see all the input fields had a red line under them which indicate they are in the invalid state. And the line turns to blue once validated.
Note: The style on the check button does not work...should not be a concern in the problem.
Angular is going to check the form the same way at any point (load or later) and render the result. If you don't want to display the results on load, add logic to check whether the form has been interacted with. You can hide your error messages using ng-if="yourFormName.$dirty", or display according to the status of an individual field with yourFormName.yourFieldName.$dirty.
Click here for live demo.
What is currently implemented (wrong IMHO) is that MDL automatically validates input and doesn't mind "novalidate" form attribute. I had to implement check for empty input value (skip validation and remove is-invalid class) and, since angular form validation requires "novalidate" attribute, check:
if (input.form.novalidate = true) // skip validation
that way you can actually turn off mdl validation and leave everything to angular.
One more thing is actually required. You can create angular directive which validates expression and add is-invalid class if necessary:
div class="mdl-textfield" mdl-validator="form.email.$error"
I have the following field in a form:
<input type="text" name="dedicatedstaff" ng-model="staffingRecord.dedicatedStaff"
tabindex="9" ng-pattern="/^[0-9]{0,4}(\.[0-9]{1,2})?$/" ng-maxlength="7" />
The form is to edit an existing record. No matter what value is in the existing record, the field fails validation and the databind becomes undefined. Some example values that exist on the records are 1, 2.5, 12.5, 99.25, 4.0. I believe every one of these should pass both the pattern and maxlength validations, but it isn't working. I've checked the model and the values are present when loading the form.
When I remove the ng-maxlength directive and just have the ng-pattern, it works fine and those values pass validation. If I remove ng-pattern and just have max-length, it fails. It also doesn't matter if the INPUT is of type text or number. If ng-maxlength is present, it fails. Browser also does not make a difference (tested Chrome, IE & Firefox). I have also verified that it is the maxlength error in the error list.
I am also using ng-maxlength with almost every other field on this particular form, and they also work just fine. And if I type the exact values listed above after form load when ng-maxlength is present validates fine at that point. But that's not a reasonable workflow to make the client type the values over again every time they load the form.
I don't understand it as I use this same pattern in other forms within the app and they work fine. I can get by with just ng-pattern on this particular field, but I would much rather figure out why, in this one case, it won't validate properly on load.
I'm using AngularJS 1.2.14, with JQuery 1.9.1.
I figured it out. It was actually the INPUT type after all. After further testing, I realized my initial test of that variation was incorrect. Changing the INPUT type to NUMBER fixed the validation issues.
<input type="number" name="dedicatedstaff" ng-model="staffingRecord.dedicatedStaff"
tabindex="9" ng-pattern="/^[0-9]{0,4}(\.[0-9]{1,2})?$/" ng-maxlength="7" />