Very weird thing that Formik seems to be so famous but I can't find this very simple functionnality.
Lets say the user try to send the form with an empty field, how can I display the errors ? I can display them once the field is touched but not once the form has been sent (and obviously I don't want to display the errors right away, for example an empty field)
The actual behavior is that the submit function is not called if the validation fails, seems right but what about error display ? It seems there is no simple way to do this (I found a few kinda heavy work around with some callbacks and handler components but what's the point using a form library then...)
So maybe I have missed something please tell me
Any idea how to display the validation errors when submitting the form ?
Related
I have several inputs and a button. I want to do something on button click, but before I need to validate inputed data. If data is incorrect, app should highlight inputs and show a message.
What is "canonical" way to do it?
Short answer: there's no convention.
You can roll with any validation library you choose, so as long as you can hook it up, show invalid input errors, as well as prevent the form from submitting if the form is invalid.
Have a chat room, issue is, is that when you submit something, the message in the form box stays. What I want, is for when it is submitted using the button, the message one clears.
So, I added $('#mbody').val(''); and added the id mbody to the form with the message in it. But for some reason, it clears the other form.
You don't need to change the non-existant value of the FORM (form inputs have values). You simply need to reset it.
var form = document.getElementById('mbody');
form.reset();
Make sure each form has a unique id.
I'll see your vague question lacking example code and raise you a vague answer. ID's need to be unique - you likely have duplicate ID's or are referencing the incorrect ID.
Have an ASP.NET MVC3 app with model validation using FluentValidation. User enters some html in a regular text field, and is presented with a user-friendly error on submit (because of the "A potentially dangerous Request.Form value" error).
What I'd really like to do is show a validation message right on the form itself ("Oops, no html allowed") which shows up right next to the field - similar to model validation errors. That way, the user (malicious or not), knows about it before the entire form is actually filled out and submitted.
Would appreciate any ideas on how to go about implementing this apart from what's shown here (i.e. without having to add [AllowHtml] + a regex to almost every field in almost every viewmodel)
Thanks!
You will need to write a custom ProertyValidator for server-side FluentValidation with client-side support. I think you can follow this article, here, to create client-side jquery validation rule and the adapter.
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.