I am using react-select for better look on UI, and I have implemented it, Now what I am trying to do is
I want to validate that input field when user clicks on Done button (form submit)
I am using react-hook-form for validation
They provide ref={register} which holds the input field value
so for normal input field or select I am able to use this like below
<label htmlFor="fname">
First Name
</label>
<input
type="text"
name="fname"
id="fnameid"
className="form-control"
ref={register({
required: 'First name is required',
})}
/>
{errors.fname && (
<div>
<span className="text-danger">
{errors.fname.message}
</span>
</div>
)}
Now the above is working fine but in case of react-select I do not know how to go forward
<Select
value={initailSelect}
onChange={(e) => onChangeAge(e)}
options={data}
/>
So here when I click on submit button it is only taking validation for fname and giving output on console for fname only
I tried doing like below
<Select
value={initailSelect}
onChange={(e) => onChangeAge(e)}
options={data}
ref={register({
required: 'age is required is required',
})}
/>
Code sandbox Here is my code sandbox My working code, Please check
Edit
I Tried This approach but it is not taking up defaultValue or Value, as I want to show one value selected, a nd in some cases I am getting values from server Which I want to show as selected.
Here is the link for codesandbox, you can either wrap the component in the Controller or use setValue to manually set values and validate
https://codesandbox.io/s/bitter-wave-w1cpi?file=/src/App.js:2084-2802
https://w1cpi.csb.app/
reference
https://react-hook-form.com/get-started#IntegratingwithUIlibraries
Related
A bit of an odd request, but I'm looking for a way to have an input field be completely un-interactable with.
I have a component with an input field that the user should interact with. In another page of my app, I want to reuse the visual of that component, but they should not be able to interact with it.
I have tried:
<input
type="text"
placeholder="[Click here to enter scramble you want to solve]"
onClick={(e) => e.preventDefault()}
/>
But it did not work.
Add a prop for disable the input based on parent component where you want to use
<input
type="text"
placeholder="[Click here to enter scramble you want to solve]"
onClick={(e) => e.preventDefault()}
disabled={props.disabled}
/>
Try readonly inside input field, it might work for you
<input readonly type="text">
I'm using React.
I have a registration form component with Username, E-mail and Password fields on it. I've set autoComplete="off" for the entire form, but firefox still trying to autocomplete the form.
I think this second autocomplete feature is somehow built in browser itself, so i don't think it will be possible to disable it completely from my code.
I've accepted this, but there is another issue. Firefox is trying to fill Username field on the form with E-mail. When i delete Username field autofill switches to E-mail field and works fine, but i dont want to delete Username field. Also, if i rename Username field (both 'name' and 'label' props) to something completely different from 'Username' it works too.
Question: how can i prevent Firefox from filling the wrong field?
Here's E-mail and Username components:
<FormRow>
<InputText name="username" label="Username" rules={{ required: true }} />
</FormRow>
<FormRow>
<InputText name="email" label="E-mail" rules={{ required: true }} />
</FormRow>
Props name goes to input element.
Props label renders in label element.
Thank you!
You can try to turn autocomplete off.
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
sorry to ask this simple question but I'm new to React and I am trying to use the keyboard library from hodgef/react-simple-keyboard, along with Ant Design to try creating a login page. I pretty much followed the code sample from this Codesandbox Example and things works fine, until I replaced the default input tag into Ant-Design's Input component.
From this:
<input
id="firstName"
value={getInputValue("firstName")}
onFocus={() => setInputName("firstName")}
placeholder={"First Name"}
onChange={onChangeInput}
/>
Into this
<Form.Item
label={<text style={{ color: 'white' }}>Username</text>}
name="username"
rules={[{ required: true, message: 'Please input your username!' }]}
style={{ color: 'white' }}
>
<Input
id="inputUserName"
value={getInputValue('inputUserName')}
onFocus={() => setInputName('inputUserName')}
placeholder="User Name"
onChange={onChangeInput}
/>
</Form.Item>
After using Ant Design's Components, the input will not update anymore when I press the keyboard buttons.
Anyone in this community know what is the problem causing this? Is it because the <Input> is nested inside <Form.Item> , which made the ref not working anymore?
So if I were to use only input, without nested inside Form.Item it will still works:
<Input
id="inputUserName"
value={getInputValue('inputUserName')}
onFocus={() => setInputName('inputUserName')}
placeholder="User Name"
onChange={onChangeInput}
/>
Much appreciated if anyone could answer this stupid question, I'm really new and I don't even know what to search for to begin with, and really sorry for my poor English, I don't know how to explain or elaborate further.
Fixed by following this code sample from ANTD.
Basically I added following lines to call the form method.
const [form] = Form.useForm();
Then assigning the input values in the onChangeAll listener in the keyboard component as follows:
const onChangeAll = (inputs) => {
setInputs({ ...inputs });
form.setFieldsValue({
username: `${inputs.inputUserName}`,
password: `${inputs.inputPassword}`,
});
};
Also don't forgot to add this line in the Form component
<Form
form={form}
...
>
Testing the following piece of code with Redux Form 7.4.0:
<Field
name="employed"
id="employed"
component="input"
type="checkbox"
onChange={e => console.log(e.target.value)}
/>
What seems strange to me is that when I click the checkbox for the first time I can see that e.target.value is an emty string. When I click the checkbox for the second time e.target.value is true but I can see that the checkbox is unchecked. When I click I click the checkbox for the third time e.target.value is false but I can see that the checkbox is checked. This behavior seems to me incorrect end different from behavior of
<Field
name="lastName"
component="input"
type="text"
placeholder="Last Name"
onChange={e => console.log(e.target.value)}
/>
for which e.target.value is the same as the current value visible in the input field.
Can someone clarify this different behavior? Is it an issue of React Form?
I'm using Redux Form oficial example for testing https://codesandbox.io/s/mZRjw05yp
The checkbox value is not like an input, the value of the checkbox is inside e.target.checked
I am using Redux-Form v.5.2.3. I have a text input that needs to be repeated x number of times, depending on how many times a user clicks a button.
Currently, because I am generating the same input field with the same field name, it does not work. When I type something on one input, it automatically types the same thing in the other inputs - that is because of the same name.
I am thinking of generating a unique id and appending that to the field 'name' - for example :
Original field:
Name: <input type="text" {...name}>
2nd Field - generated after the button press:
Name: <input type="text" {...name2}>
X field - generated after x button presses:
Name: <input type="text" {...nameX}>
Any ideas if that works and an example how to implement?
Thanks in advance
I would check out deep forms in the RF docs.
Trying to figure this out as well, but from what I understand, you can define an array of fields by using the [] notation.
export const fields = [
'name[]',
];
Then you add additional fields by using addField(value?, index?). You can then access each field by treating this.props.fields.name as the array of name fields.
For your case, I think it should look something like
<div>
{this.props.fields.name.map((field, index) => (
<input key={index} type="text" {...field} />
)}
</div>
You can use the redux-from v6.0.0. In this version you can use FieldArray for array fields.