Develop Reference

Form validation for dynamically added fields in react

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!

Bootstrap Carousel Javascript Override

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!

Display a <input type="checkbox"> element with a box in the middle rather than a checkmark

I am wondering if anyone knows of a good way to display a checkbox in html with a black box in the middle, like the third checkbox in the image below?
I have seen this in a lot of interfaces, but can't find a good one online to check source. Apologies if this is already posted elsewhere but I have not had luck with the search terms I have been trying.
Thanks.

It's called the indeterminate state. See this jsFiddle example.
$("#c").prop("indeterminate", true);
Ref: https://developer.mozilla.org/en-US/docs/HTML/Element/Input and https://developer.mozilla.org/en-US/docs/CSS/:indeterminate

The following post contains some examples:
How to style checkbox using CSS?
There is link in the answer Collection of checkbox styles from CSSDeck contains similar examples.

Checkboxes are rendered by the browser. Thus the style is determined by the application chosen by the user. If you want to have customized form controls, you will have to use something like jQuery UI or something similar, which will basically simulate a form control with other means and store the value in a hidden form field.

Strange javascript/jquery issue

Hopefully someone can help me here.
I have a page that displays a list of users in a modal popup. This page can be accessed in two ways, one way you choose Unapproved users and it will open the page, the other way you choose user accounts which will open a popup asking if you have any search criteria such as name, once you have finished there you search and it brings up the page of users.
I have a button on the form to clear any filters. When i run it on the Unapproved users page, it clears the box fine, however if i do it on the form from the other way the code will not empty the textbox and when i try an alert it shows no data. Where as the alert works on the Unapproved route!
Here is the jquery that i am using:
clear: function () {
//reset filters//
$('.usersFilterList li').remove();
$('.userFilterSelect option').show();
$('#UserFilter_SearchTermIncluded').attr('value', ''); // This line doesn't seem to work properly
alert($('#UserFilter_SearchTermIncluded').attr('value'));
//hide filter options
MSG.showNHide('', '#usersFilterBox');
//reset modal control buttons
$('#usersButSaveFilter,#usersButClearFilter').hide();
$('#usersButFilter').fadeIn();
usersFilter.refresh(0);
}
Can anyone see if i am doing anything stupid? As i say, it is exactly the same form called from the same MVC action just with the other popup in between.
Apologies if this is confusing, I cannot post anymore code i am afraid. I can assure you that the ID of the textbox is correct though.
Any advice here would be much appreciated as I have been staring at it for hours now...
Cheers,
Gareth
If i right click the second option and run in new tab and run that first pop up as a full page the code will then work! So the problem appears to be that there are two popups.
SOLVED
I found a work around of my own, thanks for all your help.
I simply assigned a class and searched for any items with that class and cleared it like so:
$('.jq-clearme').val('');
I will close this when i can. I am not allowed yet due to my rep being too low.

To change the value of an element (or to retrieve it), accessing the attribute is the wrong way to go - it's not synchronized in both directions. What you want is the property. While also exposed through .prop('value'[, newvalue]) the correct way to get/set it with jQuery is .val([newvalue]).
To clear the element's value use the following:
$('#UserFilter_SearchTermIncluded').val('');
To retrieve/show it, use
alert($('#UserFilter_SearchTermIncluded').val());

You should use val() to get/set the value of the input.
Use without a parameter to get the value:
$('#UserFilter_SearchTermIncluded').val();
And with a paramater set the value, in this case set it to nothing:
$('#UserFilter_SearchTermIncluded').val('');

Is there an ajax call involved which might be loading the Javascript you posted twice and hence when called the second time (after the ajax call) it finds a conflict?
As mentioned by others best to use .val('') to set a value and .val() to get the value. Check in firebug if there are any Javascript errors.

I found a work around of my own, thanks for all your help.
I simply assigned a class and searched for any items with that class and cleared it like so:
$('.jq-clearme').val('');
I will close this when i can. I am not allowed yet due to my rep being too low.

How to make a textbox behave like a dropdownlist using javascript

I am facing some problem. I want to make a textbox behave like a dropdownlist while the textbox still remains editable. I want the text that will have data populated from a database (like google search always shows some hints once we start writing). How can I approach this?

I think you mean an auto-filler?
http://jqueryui.com/demos/autocomplete/
The link above should provide all the answers you need. You can use this method in conjuction with ajax to give you a list based on the current value. Comment if you need more detail.