I am using https://github.com/victorybiz/laravel-tel-input in my project to display a dropdown of flags for adding a contact number, and I am also using a laravel jsValidation to validate the request but it's not showing a error message. What laravel-tel-input do is its basically hide the input field and jsValidator isn't showing a validation message for hidden inputs, is there any way around to show error message for hidden inputs.
Related
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'm validating a Sign Up form where I'm displaying error message on the same page. When I'm entering the field value as per requirement and pressing SIGN UP button error message is going off but when I'm trying to insert another field that error message is not going off i.e it's still on the same page. Calling ajax for some functions also.
How can I resolve this problem?
I have dojo Vaslidation textbox with required set to "true". But when I hit the submit button and submit the form,the form is prevented from submitting, but doesnot display error messages either.
But when I click the textbox, it is highlighted to red and show the message.
My requirement is, When i click on submit without entering data or invalid data, it should display the error message without having to click the input field.
How do I achieve this?
Setup an event (dojo/on) to listen for the form submit and return true/false. See example here: http://dojotoolkit.org/reference-guide/1.10/dijit/form/Form.html#validate
I have a page with 3 input fields with required attribute on each of them. If I click submit without entering any values in them, I get 3 messages on my page all at once. Is it possible to check for the fields in sequence and display messages accordingly?
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
});