I want to give a min value of 0 and a max value of 100, In between those values user can type, otherwise in between user cannot type. I tried validating the data when the onTextChanged events trigger but the UI is re-rendered giving the effect I don't want. I want the same result as when I use the maxLength prop. When the user enters 98, I don't allow them to enter more characters (eg: 988) and then validate and reset the old state => 98. I want to check that when the value is 98, the user cannot enter more characters which means maxLength = 2.
What's the solution for this issue? I appreciate your help!
you can use yup to validate text input and show error code
Related
for example if we take a number 100 and the user has three fields when user enters a number say 20 in one of the fields the other two fields should populate with the numbers 40 and 40 as 40+40+20 = 100. Unable to think of a logic which would help me solve this.This is just an example, the number of fields can be considered as N where N = 1,2,3,4 etc .
Seems straightforward, so I might be overlooking the point?
So, first we get whatever element the user interacted with. We could use either onChange, which will fire everytime the user changes the input, or onBlur which fires when the element loses focus, i.e. submits the form or selects the next input. Then we simply get the event.target.value, which in your presented case is 20.
Get the rest of the inputs by either storing a ref to their parent and getting said parents .children, or by using document.querySelectorAll(".some-selector"), iterate over the nodelist, skip any entry with a .value !== null and add 100 - 20 / (nodeList.length - 1) as the .value of the remaining entries.
I would probably use the ref route.
I'm working on a workout logger for logging sets for exercises a user performs. It asks users to select an exercise from a select, as well as the amount of weight and reps they did for the set. Weights and sets will be stored as type number. I am using React on the frontend and GraphQL on the backend.
Can I initialize these values as an 'empty' number, where the input field is left blank but still recognizes that the type for these fields should be of number. Currently, I have them set as undefined and all works but in the console I get this warning message onSubmit, which is where my question stems from:
Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.
const initialState = {
exerciseName: "",
weight: undefined,
reps: undefined,
notes: "",
};
I can set the initial values as 0 and it works but I don't want to allow users to submit the form if they forget to change these initial values. Any insight on this would be greatly appreciated.
P.S. I have also tried to just keep them as empty strings, but then this crashes the react app with an error upon submission of the form, as the backend expects the values to be of Float and Int types.
I have an input field whose value is auto populated based on another Input feild. How to set that? Which event is used for auto populate?
My Input Field looks like this:
<Input
name="price"
ref="price"
initValue={this.state.projectPrice}
value={this.state.projectPrice}
rules={[
Rules.minValue(3,"message---")
]}
If I display in <p>{this.state.ProjectPrice}</p> I am getting the values,but I am unable to bind that with the Input Field. The input field should be auto-populated on change of another function.
Welcome to Stack Overflow,
If I am getting it right as you described, I have made this example.
What it does is read the changes from the first input, saves it's value in the state, and also populate a value for the second input, which is controlled by a value that depends on the changes from the first input and the only way to modify that value is by setting the value for the first input..
Don't hesitate if more clarifications are required.
I have a controlled number input in a React app, and when I remove all the digits right of the decimal point, the decimal point itself is removed. So when I have 1.1, and remove the rightmost 1, it should leave 1.; but the point is also removed automatically, leaving 1, and the cursor is moved to the front.
For a minimal example, see this fiddle: https://jsfiddle.net/sashee/e00s7h9d/ . Just press backspace on the input to observe the behavior.
After some googling, I think the root of the problem is that 1. is treated as 1, and there is no way to extract the current value from the input.
Therefore, when I remove the rightmost 1, the following happens:
The change handler is called
The value is 1
React updates the value in the state to 1
The input now has the value of 1, instead of 1.
As I see, this is not a bug, but a weird outcome of the architecture. Are there any workarounds that use number inputs? Or should I fall back to regular text inputs?
Update:
It works fine in Firefox, but not in Chrome.
It turned out to be a bug in React itself, see this PR.
It is fixed from 15.5.4 onwards, see this fiddle:
<script src="https://unpkg.com/react#15.5.4/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/react-dom#15.5.4/dist/react-dom.js"></script>
Is there a reason why you would like to have that decimal in place when you delete the number proceeding the decimal point? This isn't so much as a React question as it is more a general HTML one. Like you mention, if you would like the decimal point to show when you are inputing a number, then you can change the type="number" to type="text".
Also, I'd like to point out that in your initial state, you are setting the value to a string, and then the string "1.1" is being coerced into the number 1.1. For consistency you should set the initial state to a number if your input is type="number" or keep the initial state as a string and change the input to type="text"
If you would like the number in the box to increment or decrement by 0.1 every time the up or down arrow are pressed, change the step to step="0.1".
The issue is that you're defining your input as type="number" but the value you're throwing into it a string. When the string "1." gets converted to a number, it loses the decimal value.
// Example of string "1." getting converted to a number
parseInt("1.", 10) // 1
How to fix:
As #Yo Wakita says in his answer, just use a string input. However! You can easily disallow non-numbers with a RegEx:
_onChange(e) {
// This will match all signed/unsigned floats
// Pattern credit: http://stackoverflow.com/a/16951568/2518231
// You'll probably want to store this as a default prop so that it isn't generated on every onChange
var regex = new RegExp(/^-?\d*\.?\d*$/);
if (regex.test(e.target.value) ) {
this.setState({val: e.target.value})
} else {
alert('Sorry, only numbers are allowed.');
}
},
This question was asked by "jackrugile" on Github but I can't located the answer if it was ever given. I'm reposting here because having the exact same issue:
When using validation constraints that are linked to other fields (Equal To, Greater Than, Less Than, Before Date, After Date, etc.), whatever triggers a validation call on one field should automatically be called on the other. This is only applicable for triggers other than a submit (focusin, focusout, keydown, keyup, etc.)
For example, if I have a field called "Small Number" and a field called "Large Number", I would add the data-greaterthan attribute to the "Large Number" input to make sure it was larger. I then fill out the field as follows:
Small Number: 12
Large Number: 7
This validation obviously fails and an error shows up on on the "Large Number" field. Then, to fix this error, instead of making the "Large Number" larger than 12, I make the "Small Number" less than 7. The state of the form is now:
Small Number: 5
Large Number: 7
However, even though this should pass immediately because it is within the validation rules, it does not remove the error because no check was performed on "Large Number" again after changing "Small Number".
What is the best solution for this?
As far as I can tell, in Parsley 2.1 (current version), this is not supported. However, we can add the functionality by listening on the parsley events that are fired. I think there are a number of ways you could go about this. I have chosen to do it on field initialization. When a field is initialized, if it has a validator that depends on another field, I add a listener to that field, such that when that field changes, I re-execute my validation. Here is an example:
/**
* For fields that have a comparison to another field,
* setup a listener so that when one field changes, both
* fields re-validate.
*/
$.listen('parsley:field:init', function(e) {
var comparisonFields = ['gte', 'gt', 'lte', 'lt'];
for (var i = 0; i < comparisonFields.length; i++) {
if (e.OptionsFactory.fieldOptions[comparisonFields[i]]) {
$(e.OptionsFactory.fieldOptions[comparisonFields[i]]).on(e.OptionsFactory.staticOptions.trigger, function() {
$(e.$element).parsley().validate();
})
}
}
});
Note that if you add a listener on any init events, the code must come before you initialize your parsley form.