I'm trying to work out some license subscription form with aurelia and aurelia validation plugin.
I have a fieldset for personal information where most of them are required and get validated by aurelia validation.
Now I also have a fieldset for credit card information and for billing address with also fields that are required and validated. The thing is, they only get displayed when the user picks the subscription radio button.
I have all the required fields in the ValidationRules, how can I tell aurelia that it should only validate the ones that are currently visible?
You can use conditional validation with the when fluent method. Here is an example from the Aurelia Docs.
ValidationRules
.ensure('email')
.email()
.required()
.when(order => order.shipmentNotifications)
.withMessage('Email is required when shipment notifications have been requested.');
If you use if.bind on your element, the hidden element will not get validated.
Unless you want the element in your DOM but only hidden, use if.bind.
That way, your element is not rendered in dom, so not validated.
show.bind -> hide/show element
if.bind -> render/not render element
Related
how can we make the the dropdown in the Nortstar Form as a required field?
is it possible to do so ?
in the Fluent ui Form for the textarea and input component we have required Field so onsubmit it validates the input Form shows to fillout for required fields
https://codesandbox.io/s/zgpqse?module=/example.js
But for dropdown we don't have anything as such. how do we validate the Dropdown with required field?
we can disable the submit button based on hooks but it would be good if we have a required field
https://codesandbox.io/s/cokfqy?module=/example.js
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 have a wicket page with a couple of TextFields that have different kind of validators. So far, validation is triggered via Ajax on the onChange event.
I also have a checkbox that defines which set of validation rules should be used for the TextFields.
If I click the checkbox and then input data into the TextFields, validation works just fine. But how do I handle the fact that already entered and validated data can suddenly become invalid if the checkbox is clicked afterwards? How do I trigger the validation and the redraw (to show the error notification) of the TextFields from within an AjaxEvent from the checkbox?
I tried to call myTextField.validate() but that didn't trigger any of my validators.
Since your validation is based on multiple components you should implement IFormValidator. Pass both checkbox and textfield in getDependentFormComponents() and change of either will trigger it.
Also if you are using checkbox to refresh some elements make sure to use AjaxCheckbox, that has onUpdate(AjaxRequestTarget) method.
You could attach an AjaxFormSubmitBehavior in the checkbox. This would submit the form and trigger validation each time the checkbox value is toggled.
I have a dropdown list in yii that depending on the id renders some additional fields (that requests other models).
How can I use the $form field in those (it's Yii-Bootstrap) so that I can have the validation messages (via $form->errorSummary() ) and not implementing my own javascript messages?
I'm not entirely sure what your asking for, but it seems like it's related to rendering form fields/errors and validation. As far as specifing custom selector fields goes, look into CHthml::activeDropDownList, it'll let you define your drop list items accordingly. As for validation, you can validate that drop down by making it have it's own validation rule and error as described here:Custom Model Validators. This will allow you to use CHtml::errorSummary($model) as the dropdown will return an appropriate error message if it's validation fails...
Cheers,
Fy
Not sure if this helps, but renderPartial() has serious issues with AJAX:
http://www.yiiframework.com/forum/index.php?/topic/10427-ajax-clientscript
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
});