There is a few question I wish to ask about react-final-form.
How can I prevent form auto call validate on form init? I try to have a work around to skip it by check if form is dirty or pristine and it resume its original behavior once a field is changed. The problem is I not able to get the meta in record validation.
<Form
validate={value => {
const errors = {};
// if (!meta.dirty) return errors;
... continue validation
}
render={}
/>
How can I programmatic call form/record level validate without touching any field?
Instead of record level validation, I have field level validate with validateFields and for each field to prevent full validation (I have a lot of AJAX call for each field validation) when only 1 field change. But I need to fire all field validation when I click submit button. Is there a way to fire all field validation at once?
Related
I have a scenario where a custom field validation rule to be triggered only when the submit button is clicked for that form and it should be triggered by calling $validator.validateAll() function itself. I don't want this rule to be triggered when I start making changes to the input field.
I have looked into .disable directive but looks it it will disable all the validation rules for that field which I don't want. I want to disable a specific validation rule and enable it later on the button click.
I am using vee-validate version 2.xx.
try dynamic validation in vee validate.
Dynamic Rules
I have a login page that has 2 matInputs(username and password). I added the mat-error element to those to matInputs, so the mat-form-field displays an error message when entering invalid Username. Also, both inputs are part of a reactive form. So they both have the "formControlName" attribute.
The problem is that when I unfocus from one of the input fields(with out typing username or password), the warn color from Angular material triggers as part of the reactive forms validator(username/password should not be empty).
I provided images and I can provide code.
This is regular(Good):
This when entering password(Good):
This when Unfocues/Blur(Bad):
And this when entering invalid inputs(good):
I know that the reactive forms are triggering a validator when left empty(onUnfocus). I am trying to find a way to control that or control the Angular material warning color, so it does not trigger with the left empty validator.
There are different types of field validation and there is also form (submit/login) validation. At a practical level, you want form validation not field validation for not empty/required. By default, field validation (validators used in form controls or the 'required' attribute directive) is activated as soon as the field is 'touched'. So if you make a field 'required' an error will be shown as soon as the user applies and removes focus even without entering a value. Form validation however only takes place when the form is submitted.
You have two options - don't make those fields required and instead check them as part of your submit function and then set errors on the form controls if needed. You'll also need to take care of clearing those errors when the user enters a value or focuses the field.
Or, with reactive forms, you can implement a custom ErrorStateMatcher for those fields so that the 'required' validator will only throw an error if the form is submitted rather than when the field is touched. Turning off 'touched' validation this way is fairly common for this kind of thing - you can just modify the Angular Material example shown here: https://material.angular.io/components/input/overview#changing-when-error-messages-are-shown.
I noticed that on a log in view, when a user enters in their email address, and quickly tabs to the password field, the MVC3 required attribute validation fires. The code I have is quite large, but I have been able to reproduce it with a very simple page. It is similar to what follows:
I have a very basic view with a model attached. The model has 2 properties, both of which have the [Required] attribute. If you focus one, and hit any key that does not input any characters(eg, Shift, Esc, etc.), the required validation fires, and I get my error message saying that the field is required, even though I have not entered anything yet.
Does anyone know how to prevent this early validation from firing?
Concur with gdordon - disable/fix any jquery validation. Also, you can disable this behavior by disabling Unobtrusive Validation (in web.config) - this is typically enabled and uses jquery for client-side validation.
So what I did was I disabled the keyup event for these input fields, using the following code:
<script type="text/javascript">
$(document).ready( function() {
$("input[data-val-required]").keyup(function () {
return false;
});
});
</script>
This allows for the client side validation to only go off when the user hits the submit button
I have a form that has a field (Field A) that needs to be empty if Option 1 is selected on a dropdown, and is required if Option 2 is selected. I have some javascript that clears and disables the Field A when Option 1 is selected.
I have Simon Ince's RequiredIf attribute applied to Field A in the model, dependant on Option 1, and it works well. That's not the problem.
Here's the sequence of events that does cause a problem:
User has Option 2 selected (so that field A is required) and Field A empty.
User clicks on Save. Validation message appears by field A and in the validation summary. All is well.
User changes to Option 1. Field A becomes disabled.
User clicks on Save. Validation message remains by Field A but does not appear in the Validation Summary.
I conclude from this that the RequiredIf validation is working (and Field A is passing validation), but the old validation message is sticking around. Which I do not want.
All this is client-side, by the way.
If the field isn't disabled, everything works as expected, but I'd like it disabled rather than editable but "required to be empty".
Other than clear out the message SPAN tag through js and jQuery, is there a way to fix this?
Because the validation requirements are changing, you need to cause validation to occur, and then update all of the error messages. Since the issue relates to the change of the selected item on the dropdownlist, add the following:
$("#myDropDown").live("change", function() { // assumes dropdownlist has id of 'myDropDown'
$("form").validate().form(); // form() causes error messages to update
});
I am using MVC 3 with ASP.NET. I have a dropdown box and getting it populated from database. I am using validation on the View. If it fails the validation, I am displaying the same view with errors being caught in ViewDate.ModelState.AddModelError.
I am checking for the ViewData.Modelstate.IsValid property if true then execute the code else display the errors in the view.
It is diplaying the errors in the page, but the selected value in the drop down is getting reset when validation fails.
How do I make sure the seleceted drop down does not change when validation fails?
In the action that handles the form submission and validation, make sure you set the properties on your model object from the form before rendering the form view.
For example, in this question you can see how the Dinner object parameter in the Create action is reused when the View() is returned.
Set a breakpoint in the action handling the submission and check the property for the list of values. If it's null or empty reload it.
If your dropdownlist is being populated via javascript then it is possible that the property holding the list of values is empty on submission. This is common when using cascading dropdownlists such is the case with loading Province / State lists based off country. All cascading lists loaded after the model has been passed to the view must be reloaded using the selected value of for each dropdownlist in the controller action that is handling the submission.