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}
/>
Related
I am testing several radio inputs in my form using React Testing Library. Most of them have labels of yes/no so I cannot use findByLabelText.
The full error I am getting is: Found a label with the text of: yes, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly. .
Here is one of my failing tests:
test('Sealing Properly radio input should exist, be unchecked, and be clickable', async () => {
render(
<Component />
);
const sealingProperlyRadioGroup = await screen.findByTestId('sealingProperly');
const sealingProperlyRadio = await within(sealingProperlyRadioGroup).findByLabelText('yes');
expect(sealingProperlyRadio).toBeInTheDocument();
expect(sealingProperlyRadio).not.toBeChecked();
fireEvent.click(sealingProperlyRadio)
expect(sealingProperlyRadio).toBeChecked();
});
And this is the html that gets outputted after the error:
<div
class="radioGroup mb-3"
data-testid="sealingProperly"
>
<label
class="radio"
for="sealingProperlyYes"
>
<input
id="sealingProperlyYes"
name="sealingProperly"
required=""
type="radio"
value="yes"
/>
Yes
</label>
<label
class="radio ms-5"
for="sealingProperlyNo"
>
<input
id="sealingProperlyNo"
name="sealingProperly"
required=""
type="radio"
value="no"
/>
No
</label>
</div>
I think there are a couple of problems:
The text you are querying is "yes" while in your component it is capitalized. There are ways to ignore case sensitivity in React Testing Library but by default it is case sensitive. You can learn more about it here
In React the for attribute is written slightly differently - htmlFor="your-id" so I think your labels don't get associated with their inputs correctly. source
When I click on Submit, it gives an error "required". But when i type text it doesn't take first character. On entering first character it only removes "required" message.
Can you please tell me why it is not showing first character.
<div className="input-field">
<label htmlFor="state">State</label>
<input
placeholder="State"
name="state"
autoComplete="off"
type="text"
value={state}
onChange = { e => setState(e.target.value)}
ref={register({required:'required'})}
/>
<span className="error">{errors.state && errors.state.message}</span>
</div>
It's probably related to the usage of react-hook-form with your custom controlled logic (value and onChange).
If you don't need the input to be controlled, I would recommend dropping the value and onChange props from the input, as they seem to be conflicting with the package.
Most likely, because setState is an asynchronous method. Try to add the async on your onChange function and await this.setState(). It should capture all the input characters.
Somewhat new to react and having trouble passing multiple state values to an input.
Specifically, state from drop-down menus. I can accomplish this in a p tag by chaining the various state values together.
This works
<p>
{this.state.one}_
{this.state.two}_
{this.state.three}_
{this.state.four}_
{this.state.five}
</p>
This will return
one_two_three_four_five
Whenever I try to pass these same values into a single input I get an error.
This does not work
<label>
Title:
<input
value=
{this.state.one}_
{this.state.two}_
{this.state.three}_
{this.state.four}_
{this.state.five}
type="text" />
</label>
How can one pass multiple state values into a single input?
Template literals with variables :
<input
value={ `${this.state.one}_${this.state.two}` }
/>
You have to pass a single expression to the value attribute. Change to this:
<label>
Title:
<input value={`${this.state.one}_
${this.state.two}_
${this.state.three}_
${this.state.four}_
${this.state.five}`
}
type="text" />
</label>
Note: this is ES6 string interpolation. The ES5 alternative is the regular string concatenation with "+"
There are two ways you can get input changes in your React app.
One is by using
<input type="text" onChange={this.handleChange} />
The other was is
<form onChange={this.handleChange} onSubmit={this.handleChange} />
...
</form>
When you should use first one and when the other one.
The reason that there are two ways is because there are more than the two ways. You can do this too:
<div onChange={this.handleChange}>
<form>
<input />
</form>
</div>
I'd argue that the first approach is better because the handler receives the event as early as possible and possibly because the binding between the input and the component state is encoded within the render function, but that depends on what the handler would look like.
I need a form to show an error when it is dirty and is invalid according to a regex pattern how ever this does not seem to work. even though the invalid class is there when checked from inspect element
<form name="billingAddress">
<input type="text" ng-model="billingAddress.firstName" name="firstName" ng-pattern="nameRgx" required/>
<label ng-show="billingAddress.firstName.$invalid && billingAddress.firstName.$dirty">Invalid</label>
</form>
plunkr
please check this plunker i fixed your problem.
you need different form name like,
<form name="billingAddressx">
<label ng-show="billingAddressx.firstName.$invalid || billingAddressx.firstName.$error.required">Invalid</label>
here billingAddressx.firstName.$invalid check invalid state of the input by considering
form name = billingAddressx
input name = firstName