This is my code in my form component:
{console.log('Value matching name for Field: ', props.initialValues.name)}
<Field
name="name"
//also tried name="props.initialValues.name"
component="input"
type="text"
placeholder="Name required"
/>
The console log correctly outputs the name value needed.
The <Field/> component never shows the name value that is console logged.
I cannot find an answer in RF documentation or anywhere else.
Using ReduxForms version 8.
Related
pattern="[a-zA-Z ]*"
im trying to limit the input to be only letters no numbers or symbols should be allowed
but the given code is not working
<input
name="cardName"
type="text"
required
pattern="[a-zA-Z ]*"
defaultValue={kardName}
/>
i have also tried to use onChange method but it wasn't working too
anyhelp would be highly apperciated
The pattern attribute specifies a regular expression that the element's value is checked against on form submission.
You can see from the snippet below, that if you hit submit, the pattern is checked and it's actually working.
<form>
<input
name="cardName"
type="text"
required
pattern="[a-zA-Z ]*"
/>
<input type="submit" />
</form>
If you want to prevent the user from inserting some character, the pattern attribute won't help you.
What You can do is check the character inside the onKeyDown function, and prevent the insertion there. Something like this:
const onKeyDown = (event) => {
if (!event.key.match(/[A-Za-z ]/)) {
event.preventDefault()
}
...
<input
name="cardName"
type="text"
required
onKeyDown={onKeyDown}
/>
I've been messing with semantic-ui for a while and came across this Field Error section in the documentation. The code looks like this:
<Form.Input
error={{ content: 'Please enter your first name', pointing: 'below' }}
fluid
label='First name'
placeholder='First name'
id='form-input-first-name'
/>
The result is a error state, where the input field turns red and a message appears. But the documentation doesn't quite show how to implement this behaviour, if you just put this error prop inside the component it'll just stay permanently red.
I am currently using react-hook-form for validation and to display error. My input fields look like this:
<Form.Field>
<Form.Input
label="Name"
placeholder="Enter the cat's name" type="text"
{...register("name", { required: true, minLength: 2, maxLength: 30 })}
/>
<p>
{errors.name?.type === "required" && "You need to write the cat's name"}
</p>
</Form.Field>
It would look really nice to display that kind of behaviour (all red with error messages when the user attempt to submit with an empty field) but I just can't figure out how to do it. Any suggestions?
I am using a React redux-form input and this is my code:
return (
<Field
key={name}
component={SurveyField}
type="text"
label={label}
name={name}
autocomplete="off"
/>
);
I don't want chrome to autoComplete the form.
I have tried both but none working.
autocomplete="off"
autoComplete="off"
I suppose Chrome just ignores the autoComplete. I have seen the other StackOverflow questions but they are not helpful.
I find that adding the autocomplete property to the <input autoComplete="off"/> tag defined in your component callback function rather than depending on the redux-form <Field /> tag to pass this property to DOM will properly set this property in the html generated and autocomplete="off" will work as expected.
I have a form that includes a street address, city, state, and zip. It autocompletes for text inputs, but if I change the street address to a textarea it no longer autocompletes and the user has to type the entire street address.
// autocomplete works on the first character
<input type="text" name="address" autoComplete="shipping street-address" placeholder="Street address" value={this.state.address} onChange={this.handleAddressChange} />
// does not autocomplete at all
<textarea name="address" autoComplete="shipping street-address" placeholder="Street address" value={this.state.address} onChange={this.handleAddressChange} />
The entire change is input type="text" vs textarea. Is there a way to enable autocomplete for the textarea too, or is there a reason it's not working specific to the React framework?
<input type="text" class="form-control input-lg" id="name" placeholder="Insert Your Name Here" ng-model="form.Name" required>
I have a model called as above. I'm trying to validate the text after it's inputted. I've seen other similar examples but nothing is working for me. I'm trying to test it with this setup. I end up getting
Expected null to equal 'Your Inputted Text'
In Page Object File.
this.formInput = element(by.model('form.Name'));
In Testing File.
setup.formInput.sendKeys('Jim');
setup.formName.click().then(function () {
expect(setup.formInput.getAttribute('form.Name')).toEqual('Jim');
});
How can I capture / confirm the text that was entered?
setup.formInput.getAttribute('value')
Not tested. But I am hoping that will return you the text you want