I am using the latest version of mui. I have a user contact info form that contains a zip code field. I do not want this field to be auto completed if the value is null, but it keeps getting auto completed with the email saved in my browser. Here is what I have tried so far:
autoComplete="off"
autocomplete="off"
autoComplete="nope"
And here is the code of my text field:
<Textfield
name="zipCode"
id="zipCode"
label="Zipcode *"
autoComplete='nope'
value={addressDetails.zipCode || ""}
onChange={updateAddressDetails}
error={displayError(validationErrors?.zipCode)}
helperText={validationErrors?.zipCode}
fullWidth
/>
Below is the screenshot of my form:
Although, autoComplete='nope' is working for other fields like city but not for zipCode.
As mui docs says:
By default, the component disables the input autocomplete feature
(remembering what the user has typed for a given field in a previous
session) with the autoComplete="off" attribute.
So code would look like this:
<TextField
{...params}
inputProps={{
...params.inputProps,
autoComplete: 'off',
}}
/>
I suspect the problem with your ZIP code field is that autocomplete is autoComplete?: string | undefined; so it might not work with numbers.
edit: I see it gets autocompleted with your email.
Try adding this:
<Textfield
name="zipCode"
id="zipCode"
label="Zipcode *"
inputProps={{ autoComplete: 'off' }}
value={addressDetails.zipCode || ""}
onChange={updateAddressDetails}
error={displayError(validationErrors?.zipCode)}
helperText={validationErrors?.zipCode}
fullWidth
/>
Error got resolved!
I figured out the reason for getting this error, that was a different use case. I have an update password form next to the contact info form and that update password form has three fields:
Current password
New password
Confirm password
So, what was happening is that the current password field got auto-filled with a password saved in the browser because the type of that field is 'password' and the zip code field was just above this current password field so it got filled with the email of the saved password.
What I needed to do was to turn off the autocomplete for the password field so that the autocomplete of the zip code field with an email address would stop too. I tried the following options to stop password autocomplete but didn't work:
- autoComplete="nope"
- autoComplete="off"
- inputProps = {{
autoComplete: "off"
}}
- inputProps = {{
autoComplete: "nope"
}}
what actually worked is:
inputProps={{
autoComplete: 'new-password'
}}
By doing this, my zip code field's auto-completing with email address (that was so strange to understand) got off too.
Thank you guys who posted answers for your help, your answers were correct but I had a completely different use case that's why no solution was working!
Related
I'm trying to allow a TextField to read if the user inputs an emoji, but it doesn't work. It doesn't even trigger the event. For normal TextFields it works, but for TextFields with type="password" it doesn't.
My TextField and onChange function look like this:
<TextField
required
margin="dense"
id="password1"
label="Contraseña"
type="password"
value={password1}
onChange={handlePassword1Change}
fullWidth
/>
const handlePassword1Change = (event) => {
console.log('event target: ', event.target.value)
setPassword1(event.target.value);
};
Any help is appreciated, thank you!
Note: I want to do this, because it's one of NISTs recommendations, to allow ASCII/Unicode characters, like spaces and emojis, in passwords.
I'm new to react-bootstrap and js and am trying to create a simple form validation with 2 just fields - name and email but I want them to have different validation logic (i.e. the email should check whether it's a valid email whereas the name should check whether it's empty).
Looking at the documentation, it is mostly what I want, except the part where the fields are considered valid as long as they are not empty and I can't figure out how to change the validation logic only for a specific field. Is there a way to do so?
In case it's unclear, I want the same text box behaviour as the one in the documentation where after clicking the submit button, the text box will be updated with green or red borders as the user types valid or invalid input respectively without clicking the submit button again.
I have figured out after looking through the HTML input attributes. I have to add pattern and change type to email.
From here, the required attribute will check if it's empty and the type="email" will have basic email validation with an equivalent regex to
/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+#[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}
[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
and if more advanced validation is needed, then add pattern attribute to specify a custom regex.
Editing the code slightly from the documentation in my post.
function FormExample() {
const [validated, setValidated] = useState(false);
const handleSubmit = (event) => {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
setValidated(true);
};
return (
<Form noValidate validated={validated} onSubmit={handleSubmit}>
<Form.Row>
<Form.Group as={Col} md="6" controlId="validationCustom03">
<Form.Label>Name</Form.Label>
<Form.Control type="text" placeholder="Name" required/>
<Form.Control.Feedback>Looks good!</Form.Control.Feedback>
<Form.Control.Feedback type="invalid">Please provide a valid name.</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} md="3" controlId="validationCustom04">
<Form.Label>Gmail</Form.Label>
<Form.Control type="email" placeholder="Gmail" required pattern=".+#gmail\.com"/>
<Form.Control.Feedback type="invalid">Please provide a valid gmail.</Form.Control.Feedback>
<Form.Control.Feedback type="valid">Looks good!</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Button type="submit">Submit form</Button>
</Form>
);
}
I have a very basic username/password field, and it's bound via ng-model to two properties on my controller. They are set up like this:
loginModel = {
username: '',
password: ''
};
They are bound to input elements like so:
input(autocomplete="off" data-original-title="The email you entered is incorrect. Please try again (make sure your caps lock is off)." data-placement="top" data-toggle="tooltip" data-type-in="" data-val="true" data-val-required="The UserName field is required." name="UserName" placeholder="Email" required="required" type="email" value="" ng-model="signInVm.loginModel.username" ng-change="signInVm.checkForm()" am-autofocus)
input.inspectletIgnore(data-original-title="The password you entered is incorrect. Please try again (make sure your caps lock is off)." data-placement="top" data-toggle="tooltip" data-type-in="" data-val="true" data-val-required="The Password field is required." name="Password" placeholder="Password" required="required" type="password" value="" ng-model="signInVm.loginModel.password" ng-change="signInVm.checkForm()")
I have a submit button that checks to see if the username and password field are filled out to determine if it is disabled or not via ng-disasbled
button.btn.btn-secondary.btn-signin(type="submit" ng-disabled="!signInVm.canSubmit" ng-click="signInVm.tryLogin()" ng-if="!signInVm.isLoggingIn") Sign In
The problem I am having is that, when the page loads and Chrome autofills the two fields, it still seems to think those two fields are empty and so the submit button is disabled despite the form seemingly being filled out properly. Once you do anything on the page, like click anywhere or hit something on the keyboard, the fields detect the autofilled data and then the submit button becomes active.
I think this is because the fields are defined as '' initially, because if I set the values to something else (e.g. hello#world.com) then the button will be active... but then the fields will be prepopulated with the hardcoded data in the controller intead of autofill. I can't think of any way around this. I want the fields to be empty by default, but if they are autofilled I want the code to recognize this immediately and make the submit button active without me having to interact with the browser first. Is there any way to do this? I feel like there must be an incredibly simple solution I am missing, but I really can't think of it despite my best efforts.
Hopefully my question makes sense. Thank you for your help!
I've this html source of this url: https://login.freecharge.in/login?callbackurl=https://checkout.freecharge.in/payment. This page has two input fields - login & password.
I want to locate the handler being called when we key-in the login and password. For example when I type these two values then Sign In button gets enabled:
aaaaaaaaaa#gmail.com
password11233455
In the login textfield if I delete last two characters "om" by pressing Backspace leaving login to "aaaaaaaaaa#gmail.c" then Sign In automatically gets disabled.
Login field code
The html code of the login field looks like this:
<input id="loginEmailMobile" name="loginEmailMobile" autocomplete="loginEmailMobile" type="text" focus-me="vm.focus == 'LOGIN'" focus-delay="200" ng-focus="frmLogin.loginEmailMobile.blured = false" ng-blur="frmLogin.loginEmailMobile.blured = true" required="" ng-model-options="{allowInvalid:true}" ng-model="vm.data.login.emailOrPassword" ng-maxlength="127" ng-pattern="^(([A-Za-z0-9._%+-]+#[A-Za-z0-9.-]+.[A-Za-z]{2,4})|([6-9][0-9]{9}))$" no-space="" class="ng-valid-maxlength ng-touched ng-dirty ng-valid-parse ng-valid-required ng-invalid ng-invalid-pattern">
Sign-In Button code
<button value="Submit" class="submit disable" ng-class="{'disable':frmLogin.$invalid}" id="signInButton" ng-click="vm.signinClickHandler(frmLogin.$valid)"><span id="textLoginSignIn">SIGN IN</span></button>
Now I've searched loginEmailMobile in all the files and I don't find this except in this code. So who is listening to this element and taking action? How to find it?
This is done via the Angular framework, with the following patter:
ng-pattern="^(([A-Za-z0-9._%+-]+#[A-Za-z0-9.-]+.[A-Za-z]{2,4})|([6-9][0-9]{9}))$"
It means if the input does not look like an email, the field is not valid. Then, you didn't post this code, but most likely on the button there's something like ng-enabled="..." with a condition that checks if the email field is valid.
For example, on some sites in the username form box it says something like "username" and then when you click there the "username" disappears so you can type your username.
Thanks.
Yes, you can do this in a form.
Username =forms.CharField(max_length=35,
required=True,
widget=forms.TextInput(attrs={'placeholder': 'Username'}))
Check out the Django Docs for more on how to customize HTML from Django Forms.
You need to use html for that:
<input type="text" placeholder="This text will disappear" />