I have created a form in react which has 2 fields. After clicking add button it adds same 2 more fields. Now I want to validate those fields. Can anyone help me please.
Codesandbox link : https://codesandbox.io/s/react-dynamic-form-fields-9fzzh
Your question is a little incomplete. First, tell me which field you want to validate and what you have tried till now. For reference you can check this site:here
There are a couple of ways you can do this. The standard up until recently has been using a large yup schema with conditional validation (using 'when').
I made a library called Fielder specifically for dynamic field-level validation such as in your example. It prevents the need to use a large schema and provide conditions up front.
Check out the second two examples on this page which dynamically add validation criteria as the user progresses through the form.
Check out the Fielder repo and let me know if it works out for you!
Related
I have created a modal that works in moving the model from the modal to the form, however if the field has required: true, the form will not validate if the field is touched but then checked in the modal.
I have a working JSBin showing the issue.
As you can see from the example, I have tried various things to force the field to valid without any luck.
Any help would be appreciated.
No idea why you are moving the model to a modal and then back, it seems to serve little purpose. I have found cases when validation doesn't always work right, this seems to be one of them. You have two options. Use an expression property to check a separate flag you set when you select the field to change required to false or simply set a flag and use that to check validation manually.
I have an input that's used by JS to control submitting two forms with different actions, but only one of them will be submitted and it should include this input.
I can do it with a hidden input using JS to change their values when the original one changes but I'd like to know if there is an HTML5 solution.
Here is my JS code to do it:
$(function(){
$('#originalOne').change(function(){
// check if I should disable a form
$('.hiddenOnes').val($(this).val());
})
});
I think I might be understanding what you are asking, correct me if I'm wrong:
"Is there a way to update the values in one form based on the values in another using HTML5 only (without using JavaScript)?"
Unfortunately, the answer there is NO. You will need to attach event listeners and handle changes using JavaScript. I had previously suggested using a <fieldset> to group the inputs that you wanted to disable independently, but this method does not work for multiple form actions.
I'm having a lot of success in developing a bookmarklet to fill in a complex form with default values. All of the text/textarea fields are now saving correctly with the following jQuery code:
$("#frm_PatientGoals").val("To get stronger.").triggerHandler('focus');
Unfortunately, if the field in question is a checkbox or radio button adding the .triggerHandler doesn't get the job done. Here is an example of one of those elements:
$('#frm_hsResWeak').prop('checked', true);
This page will correctly store the .val data provided thanks to the .triggerHandler but the same is not true for the .prop for the checkboxes of which there are numerous that I would like to set.
Thanks in advance for any feedback. I'm definitely a JS and jQuery noob, but would like to learn more.
I have a form that has one main field and a then bootstrap carousel that contains nested forms (there are multiple nested forms and the main form accepts nested attributes for these). Everything is functioning properly but I would like to add a validation. I'm using Jquery Validation http://jqueryvalidation.org/ for my other validations.
What I would like to do is have the bootstrap "next" button ONLY scroll next if the active form is filled out properly. I am having trouble finding the Bootstrap javascript that I might have to override and also could use help conceptually on what the best way to go about this is.
So far I've thought,
1. add JQuery Validation to each individual form that way then the user gets to the new form it will message them if they do not fill it out properly (however I think they could still just hit next if they don't start typing in the form)
2. Add logic to the next button so that if the active form fields are filled it functions properly but if the fields are not filled then it triggers a message.
I'm leaning towards the latter but open to other ideas as well. Before writing too much code, I would appreciate advice on how to override the javascript of the carousel next button and how to check for field completion but any other ways of going about this are definitely welcomed.
Thank you!
I'm working on a project using Zend Framework.
I'm creating a form on which users can add a set of elements by pressing a + sign.
Zend framework uses subforms and decorators to get array of values from a form.
These will show when the page is displayed
How does the new fields created with Javascript integrate in that model?
The best demo of dynamically adding fields on the client to a Zend_Form with which I am familiar comes from Jeremy Kendall:
http://jeremykendall.net/2009/01/19/dynamically-adding-elements-to-zend-form/
The upshot of the technique is to add/call a preValidation() method on the form to check the post for fields missing in the form. If it finds any such fields, then they are added to the form object. By the time isValid() and getValues() are called, all the Zend_Form_Element objects have already been attached to the form, so processing runs as normal.
One suggestion would be to define all input fields that you want to provide using zend form.
But when the form is displayed you could hide certain fields and make them visible by clicking on +.
I think this is the most simple approach because for adding decorators and stuff you would need to change php files on client side and this is not possible.
Another suggestion, you could define several forms. Clicking on + redirectes the user to another form with an added field.