I am new to react and trying to make an authentication page. I try to modify the template from MUI and the link is as below:
https://github.com/mui/material-ui/tree/master/docs/src/pages/premium-themes/onepirate
In the SignUp.js, I try to add more attributes like maxLength and default value. But they don't work. I am wondering what causes the issue.
I tried to handle the situation with JavaScript, but I am thinking if there is a simpler solution.
<Field
fullWidth
component={RFTextField}
disabled={submitting || sent}
required
name="password"
autoComplete="new-password"
label="Password"
type="password"
margin="normal"
value="abc" //Not working
maxLength="8" //Not working
/>
Related
I am trying to use a FloatingLabel component alongside an InpuGroup component of the react-bootstrap package. I am able to get the inputs grouped but the height of the InputGroup.Text is greater than the FloatingLabel input.
Weird CSS when using FloatingLabel with InputGroup components of react-bootstrap
<InputGroup>
<FloatingLabel label="Email Address" className="mb-3">
<Form.Control id="floatingEmail" type="email" name="email" placeholder="email" value={person.email} onChange={updatePersonDetails} />
</FloatingLabel>
<InputGroup.Text>#crestdatasys.com</InputGroup.Text>
</InputGroup>
Is there any known solution or workaround to fix the CSS? Or am I making some mistake with calling the components in wrong order?
I have a simple react component created using material UI
function TableField(id) {
return (
<div className='flex' id={id}>
<TextField class="mr-2" id='0' label="Field type" variant="outlined" value='2' />
<TextField class="mr-2" id='1' label="Field Name" variant="outlined" value='3' />
</div>
);
}
ISSUE:
In the website the fields label are overlapping each other.
What I have tried:
As mentioned in Another StackOverflow question I tried adding values to my text fields as well but it did not work out.
What am I doing wrong here?
I'm using material ui TextField in my react application. I need to know how to use error and helper text validation for my below code which carry email and password?. Please go through the code given below and provide me a suitable solution.
function LoginPage() {
const handleSubmit1 = (event) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
console.log({
email: data.get("email"),
password: data.get("password"),
remember: data.get("remember"),
});
};
return (
<Box
component="form"
onSubmit={handleSubmit1}
noValidate
autoComplete="off"
sx={{ mt: 1 }}
>
<FormControl sx={{ width: "60ch" }}>
<CssTextField
type="email"
id="email"
name="email"
label="Username or email"
variant="standard"
fullWidth
required
autoComplete="off"
/>
<CssTextField
name="password"
label="Password"
type="password"
id="password"
autoComplete="off"
variant="standard"
fullWidth
Validators
required
/>
</FormControl>
<Stack direction="row" spacing={2}>
<Button variant="contained" size="medium">
LOGIN
</Button>
</Stack>
</Box>
);
}
I am not quite sure what exact problem you want to solve, can you elaborate a little more in details please.
I suppose you want to validate the input in some way and show error messages according to the validation state or just simply send the login request to your authentication service. If my assumption is correct, you may want to make use of existing libraries, which will handle that for you - one of those is: mui-validate
It will handle client side validation before sending any request to a server.
Or do you actually want to display the result of an async server response?
After understanding your actual challenge better I am sure we can provide you with a good code example.
Try exploring this https://mui.com/material-ui/api/text-field/
here you have a list of all APIs MUI text-field supports if you are still not able to capture your scenario then try this https://mui.com/material-ui/react-text-field/ here you have demos of all possible text field scenarios with error ones as well, Try exploring the library documentation first as it will increase your knowledge and a better understanding of MUI package. I hope with this one you can manage your case by yourself.
I have an input in Next, typescript. Maxlength does work but minlength doesn't work now. Does anyone how to validate this both?
Here's my code.
<input type="text" placeholder="text" required={true} minLength={2} maxLength={10} />
<button type="submit">Submit</button>
Your code is fine. However minlength works different than maxlength.
HTML maxlength prevents the user from typing keys more than the maxlength.
HTML minlength will let the user enter less keys compared to the requirement. After all, they need to be able to start from less chars to come up to more chars. That said the field will show an error if minlenght is not met.
Complete example
Use this component and press the enter key to play around with the input field:
export default function App() {
return (
<form>
<input type="text" placeholder="text" required={true} minLength={2} maxLength={10} />
<button type="submit">Submit</button>
</form>
);
}
Screenshots
Because its required:
Because minlenght is not met:
use can install Material ui Libraries npm install #material-ui/core Material ui Libraries
There have lots of components. use Textfield components . Using inputProps we set maxlength in textfield
<TextField inputProps={{ maxLength: 10 }} type="text" />
Material Ui Textfied Compoents
I don't want to use the antd Form component, but I do want to use the data entry components and I want to capture their styling when certain rules like required are not satisfied.
I am using react-hook-forms right now and I wrap a form element like
<FormContext>
<Controller
rules={{ required: 'Enter your name!' }}
name="name"
as={<Input />}
placeholder="name"/>
</FormContext>
In this manner, the rule validation does not get run.
If I change this to :
<Controller
rules={{ required: 'Enter your name!' }}
name="name"
as={<Input required />}
placeholder="name"/>
I get the default required styling on submission and things work.
If I do something like this:
<Controller
rules={[{ required:true }]}
name="name"
as={
<Form.Item >
<Input/>
<Form.Item>
}
placeholder=" name"/>
My default values that I send with a form context provider don't get recognized and data added isn't being registered through the Form.Item
I want to use the antd styling for this component separate from importing any antd Form specific code. Is there a way?