I have a text input field and a sign up button. Since it's a password the user is going to enter in the field I want the input to be hidden. Any ideas on how to implement this feature?
I also want the field to be sort of disabled if the length of the password is less than 5 characters and longer than 12. (UPDATE: SOLVED IN BACKEND!)
I would be able to figure out at least the min and max length if I was using ''normal'' frontend styling, but I'm trying out Material UI for the first time and I can't really find the right information on how to make this work now.
<TextField
id="Password"
label="Password"
value={password}
onChange={handlePasswordChange}
variant="outlined"
/>
<Button variant="contained" color="primary">
Sign up!
</Button>
Add the type attribute like this:
<TextField
id="Password"
label="Password"
type="password"
value={password}
onChange={handlePasswordChange}
variant="outlined"
/>
Related
I am learning NextJS as well as Material UI. I have a Form. Code of Email and PassWord field of the Form is like below.
<TextField
label="Email"
variant="outlined"
type="email"
required
/>
<TextField
label="Password"
variant="outlined"
type="password"
required
/>
I am getting output like below
I would like to remove these Default Values.
How can I remove those Default Values?
Below is the tag for a password field in Login form.
Our guys used the same class name for EMail field also. Hence I cannot use className for password to locate it in protractor, since xpath and css(id design changes) are not reliable, what is the best option for me?
Tag for Email field:
<input class="native-input sc-ion-input-md" aria-labelledby="ion-input-0-lbl" autocapitalize="off" autocomplete="off" autocorrect="off" name="ion-input-0" placeholder="" required="" type="email">
Tag for password field:
<input class="native-input sc-ion-input-md" aria-labelledby="ion-input-5-lbl" autocapitalize="off" autocomplete="off" autocorrect="off" name="ion-input-5" placeholder="" required="" type="password">
For submit button:
<ion-button _ngcontent-rbh-c129="" type="submit" color="loginbutton ion-margin" class="ion-color ion-color-loginbutton ion-margin md button button-solid ion-activatable ion-focusable hydrated">Login</ion-button>
I don’t suggest you to go with ion-input properties since it’s Ionic related properties generated during the build process and it can be dynamic.
Use type instead since it is:
Obvious
Static
input[type="email"]
And
input[type="password"]
After some time you will have hard time understanding your own code and trying to recall what ion-input-0
refers to.
By css:
element(By.css('input[name="ion-input-0"][type="email"]')),
and:
element(By.css('input[name="ion-input-5"][type="password"]')),
When my input field is empty and not focused, Material UI would place the label inside the input field as a placeholder.
What I want is, to have the label above the input field all the times, similarly to what it looks like if the input field is selected.
How can I do this?
Example code:
<FormControl>
<InputLabel htmlFor="name">Name</InputLabel>
<Input name="name"
value={name}/>
</FormControl>
For those looking for how to achieve this with TextField component, here:
<TextField
variant="outlined"
InputLabelProps={{
shrink: true,
}}
/>
After 30 mins of pulling my hair... I finally got it. The property you are looking for is not called disableAnimation as one could thought, it's the shrink property. API docs - https://material-ui.com/api/input-label/
<FormControl>
<InputLabel htmlFor="name" shrink='true'>Name</InputLabel>
<Input name="name"
value={name}/>
</FormControl>
I want to do this in html:
<div class="input-group" id="name">
<input type="text" class="form-control" name="name" placeholder="Name">
<span class="input-group-addon">None</span>
</div>
I try this in GWT Bootstrap:
<b:InputGroup>
<b:TextBox b:id="name" placeholder="Name"/>
<b:InputGroupAddon>
<b:Anchor ui:field="noName" text="None"/>
</b:InputGroupAddon>
</b:InputGroup>
But thus I get the error:
Illegal child <b:Anchor text='Name' ui:field='noName'> in a text-only context. Perhaps you are trying to use unescaped HTML where text is required, as in a HasText widget?: <b:InputGroupAddon> (:56)
Why? b:Anchor implements HasText interface.
My aim is to add a link on which, when a user clicks input will fill value NONE
The HasText bit is about InputGroupAddon, not Anchor. "Text-only context" (implied by implementing HasText) means you can only put, well, text into that widget. Either through the text property (<b:InputGroupAddon text='Name' />) or inside the tags (<b:InputGroupAddon>Name</b:InputGroupAddon>) - those declarations are equivalent. You can't put unescaped HTML or widgets in such a context.
For your use case, I'd recommend using buttons (as the Bootstrap docs suggest):
<b:InputGroup>
<b:TextBox b:id="name" placeholder="Name" />
<b:InputGroupButton>
<b:Button ui:field="noName" text="None" />
</b:InputGroupButton>
</b:InputGroup>
See the demo to see it in action. You can easily style it to your needs (maybe no text and just an icon = "ERASER").
I am building a form using Parsley.js, but the size command does not work:
<input type="text" size="2" id="month" value=""
data-parsley-type="digits"
data-parsley-length="[2, 2]"
data-parsley-error-message="Expiration Month is Required"
data-parsley-required />
Can anyone suggest an other way of doing this, or is it a bug..
The size attribute you refers to is perfectly working. It affects the input width (the box, not its content). Try putting 10 or 20 instead, and you'll see the box size changing accordingly.
Maybe you are referring to maxlength="2" attribute, that prevent user to enter more than 2 characters in the input box? (That is working too with Parsley)
Best