Develop Reference

isInvalid prop isn't highlighting the input box red - react-bootstrap form

I am using React along with react-bootstrap for creating forms.
I have a form with an email field like this -
Code -
<Form
noValidate
autoComplete="off"
validated={this.state.validated}
onSubmit={this.handleSubmit}
>
<Form.Group className="mb-3" controlId="email">
<Form.Label>Email</Form.Label>
<Form.Control
type="email"
aria-describedby="email"
placeholder="Email"
value={this.state.email}
onChange={this.handleChange}
name="email"
required
/>
<Form.Control.Feedback type="invalid">
Please enter your email
</Form.Control.Feedback>
</Form.Group>
<Button type="submit">Register</Button>
</Form>
I know that if I want to keep showing the error message even if the user has filled the field I can do this -
<Form.Control isInvalid={true}>
But this doesn't remove the green border and the tick mark, and the form still gets submitted. Only the invalid message is visible
Is there any way or any class name that I can specify so that react-bootstrap doesn't consider the field as validated?
I want to do this as the email validation in react bootstrap forms considers this as a correct email - my#email. So, I want to apply custom validation.

Try adding isValid={false} prop to <Form.Control />. It should do it. For more info see the docs here.

When using a Form.Control.Feedback element with type="invalid", you must also use the isInvalid property on the Form.Control, ie isInvalid={true}

How to prevent autofilll in Ract antd?

I am using Ant Design Forms in my React applpication. I want to prevent browser's credential manager from auto populating the password. Adding DOM attribute autocomplete="off" is not working for me. I also tried adding it in camelCase as pecified in React Doc but no luck!
<Form.Item label="New Password" name={["new"]}>
<Input.Password autoComplete="off" placeholder="Please enter new password" />
</Form.Item>
All that I want to know is how do I prevent auto filling using Ant Design Forms in my React applpication.

you need to put the property autoComplete="off" in the form.item, not in the input
<Form.Item
label="New Password"
autoComplete="off"
name={["new"]}>
<Input.Password placeholder="Please enter new password" />
</Form.Item>
Edit:
Another option to prevent Chrome still autofill the user and email, its passing the autoComplete prop like this:
<Input
type="email"
autoComplete="new-user"
style={{ maxWidth:300}}
/>
<Input.Password
style={{ maxWidth: 300 }}
autoComplete="new-password"
/>
This workaround really prevents chrome weird behavior

How do I disable list of suggested password shown in an `<InputText type="password">` field used in a razor component for all browsers

I am creating a razor component and it has following field
<InputText type="password" class="form-control" placeholder="New Password" name="password" id="newPw" autocomplete="off" />
When the build is executed and run in Chrome. I see a list of suggested passwords. I don't want this list to be shown. The image is given below
Image of list of password being shown
How can I disable this? In autocomplete attribute. I have also used new-password but it still doesn't hide the list
Regards
Saad Saeed

It's weird, I know. If you give it an ID, it won't ask.
<InputText id="dummyid" type="password" class="form-control"
placeholder="New Password" name="password" id="newPw" autocomplete="off" />

When Blazor components map to a specific html element such as form or input you can usually include html elements.
For a single input you can add autocomplete="off"
<InputText autocomplete="off" ...other stuff.../>
Or you can disable it at form level like so
<EditForm autocomplete="off" ...other stuff...>

Code validation in W3C validator getting failed due to aria-required attribute

I have a simple login page in my application with username and password fields.
My application is developed by JAVA and it uses Primefaces UI framework.
I have added a Primefaces inputText (p:inputText) for username field and Primefaces password (p:password) for password field.
After the page has rendered in browser, the code probably seems like below.
<div class="text">
<label for="email">E-mail: </label>
<input type="text" id="email" name="email" size="20" aria-required="true" /> *
</div>
<div class="text">
<label id="passwordCtrl" for="last">Password: </label>
<input type="password" id="passwordCtrl" name="password" size="20" aria-required="true" /> *
</div>
When I try to validate the HTML code in https://validator.w3.org/, it showing validation error message as shown below.
To get the code to validate, right click on the page and select View Source, then copy the entire code and paste the code in W3C validator.
Among the two controls, the issue is only with the input[type="password"] control. How to handle this HTML code validation error? Is there any way to achieve this?
Note:
I am using Primefaces UI framework

Need a field description inside an input field without sending it

I have a contact form and I want the descriptions of the fields inside the input field. If I add the description by "value" I got the problem that this value will be send and an other problem is that this value will not be hide if I click inside the input field.
Is there any easy solution?
Thats the simple input field I talking about: jsfiddle.net/gefxo2s3/
<input type="email" name="email" id="email" class="textinput" value="Your E-Mail">

The HTML5 placeholder attribute
<input type="email" name="email" placeholder="Your Email">
is what you are looking for. Works in most browsers [browser support stats], but there are polyfills for those browsers that don't support it. I suggest this one