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.
Related
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 ?
On an EWF page, is it possible to alter the content of a form item during validation (when a validation fails)? For an example: say you have a text box that you want to be spell checked before it gets entered into the database. You use the modification's GetSpellCheckedWordTextFormItem to get the form item, and you want to replace what the user enters ("teh") with a likely suggestion ("the") when the validation fails to find a word it knows. Then the user sees the validation error ("Is this the word you meant?"), looks at it and corrects it or not, then re-submits.
Is there a way to do that? If so, how?
The specific answer to your question is no, you can't alter any form values if validation fails. To implement this, you'd need to let the validation succeed and let the data get modified. As part of the validation/modification, you could set a piece of page state that causes the next loadData pass to display the "is this the word you meant?" message near the spell-checked form item. Of course, you would have already saved the corrected text.
Alternatively, you could use PostBack.CreateIntermediate to make a post-back that only runs the spell-check, puts the corrected text in page state, and displays "is this the word you meant?". You'd set that post-back to fire when the user tabs out of the text box, and then you'd have the main post-back grab the corrected text from page state and save it in the database or other durable storage.
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.
i'm trying to implement an edit/add profile page which looks the following:
image upload component (Tomahawk t:inputFileUpload) with upload button
several input text fields
cancel and save button
As said, this form is used for adding a new profile as well as editing existing ones. At first, i used two elements, one for the text input, one for the upload component. The problem with this is, since the upload componenet does not support ajax/ partial rendering, the whole page is reloaded and any changes on the text inputs is lost. When i use one unified , the validation is triggered on the textfields when the upload button is pressed and the user is forced to fill out all the inputs first, before it is possible to upload an image.
My desired behaviour would be, that if the textinputs are unchanged, i can still upload the picture while changes are being applied to the backing bean and validated. Validation on unchanged/empty fields should only be triggered, when the final submit button is pressed. How can this be done? Any standard scenario/best practice methods for this or do i have to implement a valueChange Listener? Thank you guys in advance and kind regards!
Solved the problem, i wrote a custom validator and checked for the action that triggered the submission of the form using this:
ctx.getExternalContext().getRequestParameterValuesMap().containsKey("form:uploadButton");
Where ctx is the current instance of FacesContext. Maybe this helps someone, it is a workaround however it does the job.
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.