CODEWITHSUNDEEP
reactjsinputerror-handlinglabeltextformfield
ayuta
ayuta

Reputation: 13

A form field element should have an id or name attribute

The following is my code.

<TextInput
          label="Password"
          placeholder="Enter your password"
          password={true}  //password passed to enable view password option
          value={password}
          handelChange={(e) => setPassword(e.target.value)}
        />

I get the following error message; A form field element has neither an id nor a name attribute. This might prevent the browser from correctly autofilling the form. To fix this issue, add a unique id or name attribute to a form field. This is not strictly needed, but still recommended even if you have an autocomplete attribute on the same element.

I tried the following but it still gave me an error;


<label htmlFor="password">Password</label>
<TextInput
  id="password"
  label="Password"
  placeholder="Enter your password"
  password={true}
  value={password}
  onChange={(e) => setPassword(e.target.value)}
/>

Upvotes: 0

Views: 7533

Answers (1)

ATMCH18
ATMCH18

Reputation: 1

The issue is related to form fields that lack both an ID and a name attribute, which could potentially prevent browsers from correctly auto-filling the form.

How to resolve this issue is to put an id or name for your form element which I assume that your TextInput component has them.

You should not pass this id or name through the TextInput component you should edit the form element which is returned by the TextInput component.

My suggestion is to use this syntax:

<form>
  <input type="text" name="input-text1" />
  <input type="text" name="input-text2" />
  <input type="submit" name="input-submit" />
</form>

Upvotes: 0

Related Questions