As expressed in this backbone.validation issue, when using the plugin as shown in this fiddle, we should get a validation performed by isValid() - without params.
If the this.model.attributes have changes, isValid() should validate the properties on this.model.attributes however that's not the case in the example.
What I'm aiming for is to constantly, when there's a change to a the model/form, re-evaluate the validity of the entire form, and based on the outcome enable or disable the submit button (in the fiddle example though, the validation will only happen when clicking the submit button).
I do not want to use isValid(true) because then all fields that have yet not been filled in will get validated by force.
The desired behavior is to validate the dirty fields, but also recognize that the clean fields aren't valid yet (thus not enabling submit button) - but clean fields shouldn't be validated visibly to disturb the user with errors, just under the hood, to enhance the behavior of the submit button.
Am I approaching this problem the wrong way with backbone.validation?
Related
In my scenario I want to disable a save form button if the form has not been touched. I'm currently using v-slot="{ untouched }" on the validation-observer to achieve this. One of my checkboxes, however, is not wrapped in a validation provider. I.e., it's optional/not required. The problem is that whenever the checkbox value changes, my validation observer still has untouched set to true (assuming that's the only thing I've changed in the form). So I can't save my form even though I made a change to a boolean value. Is there a way where I can set my validation observer to istouched = true when my checkbox is changed? Or perhaps I need to manually check controls that have been changed that are not wrapped in a validation-provider tag.
FYI I'm using vee-validate 3.0
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 login form that has both touchOnBlur and touchOnChange set to false. In basic user flows, the Fields are all getting marked as touched when the user clicks the login button. That's great.
In more complex user flows, like when the user opens the forgot password modal and then closes it, Fields no longer get marked as touched. This is causing my validation errors to be hidden (because we check for meta.touched before drawing errors).
So I'd like to know exactly what sets touched to true on my Fields when the form is submitted.
I'm using version 7.2.1.
Even using the Post/Redirect/Get method, and including javascript to disable a button after it has been clicked, I am having a problem with users being able to just rapidly hammer a submit button and get multiple form posts in before server side validation can stop it.
Is there any way to stop this? I've even tried this method : how to implment click-once submit button in asp.net mvc 2?
And I've tried outright blocking the UI with jquery blockUI. I have BOTH client side and server side validation in place, and they work perfectly - but a user smashing the submit button twenty times in under a second just seems to keep breaking it.
Use javascript to wire the onclick event to disable the button.
If you are already doing that and you can still get multiple form posts, then the problem is a delay between the clicking of the button and the button being disabled, and you must be submitting the form multiple times during this delay.
To fix this, make the onclick event first make a call to stopPropagation() to stop the submit event. Then validate that the form is not in submission-blocked state. You can do this by creating a page-scoped javascript variable with a boolean value like can_submit. Test for can_submit being true before submitting the form. Set the can_submit = false when the button is disabled, so even if the button is not disabled fast enough, the form will not submit if the value has already been set to false.
In most cases I'd say that this isn't worth fixing - if a user is going to do something as silly as clicking submit 20 times they should expect to get an error.
The only real fix for this is to set up your action to only accept the same form once - add a hidden field that is set to a random value when the form is loaded. When the form is posted, save that value somewhere temporarily and if it is already there you have a duplicate request that shouldn't do anything.
I'm using the jQuery Form plugin and more specifically the ajaxForm method to hijack a normal form and post it using ajax. I have a form with lots of rows. Each row has edit and delete options and each section has an add option. Hijacking the form I can work out on the server whether to add, edit or delete but would like the ability to know which button was pressed in the success method back in my JS. Is this possible?
I know there are two params: responseText and statusText and that I can work out the button type in beforeSubmit but I need it when the data is returned which button has been pressed. The reason is that I want to display a form in a light box for edit and add but for delete I want to do something different. It seems a bit naff to check the data coming back to look for a certain string (not to mention flakey and unmaintainable).
Anyone know of a simple solution?
Look at the beforeSubmit option: it's a function that will get called, well, before submit. More importantly, it provides the data. You could look at the data and set a flag that would then be used within the success function. This isn't beautiful, but better than being coupled to the server's behavior.
In this situation, I have often just created two different forms-- one for update and one for delete. Then, instrument them separately.