Comments (6)
Tried with isEmpty
validator
Partially working - Submit works but instant validation doesnot onBlur (error text doesnt go off )
import React from 'react'
import RaisedButton from 'material-ui/RaisedButton'
import { ValidatorForm, TextValidator } from 'react-material-ui-form-validator'
// import FlatButton from 'material-ui/FlatButton'
import {blue500} from 'material-ui/styles/colors'
import Person from 'material-ui/svg-icons/social/person'
// import ChatBubble from 'materia-ui/svg-icons/communication/chat-bubble'
import LocationOn from 'material-ui/svg-icons/communication/location-on'
import ThumbUp from 'material-ui/svg-icons/action/thumb-up'
const styles = {
row: {
display: 'flex',
flexDirection: 'row'
},
errorStyle: {
position: 'absolute',
marginBottom: '-22px',
color: 'red'
},
spaceBetween: {
justifyContent: 'flex-start'
},
divAlignCenter: {
alignSelf: 'center'
},
submitBtn: {
backgroundColor: blue500
},
labelColor: {
color: 'white'
}
}
class App extends React.Component {
constructor (props) {
super(props)
this.state = {
data: {}
}
this.validatorListener = this.validatorListener.bind(this)
this.onChange = this.onChange.bind(this)
this.handleBlur = this.handleBlur.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
onChange (event) {
const { data } = this.state
data[event.target.name] = event.target.value
this.setState({ data })
}
handleSubmit (e) {
e.preventDefault()
console.log(this.state.data)
}
handleBlur (event) {
this.refs[event.target.name].validate(event.target.value)
}
validatorListener (result) {
this.setState({ disabled: !result })
}
render () {
return (
<ValidatorForm
ref='form'
onSubmit={this.handleSubmit}
instantValidate={true}
>
<div style={styles.row}>
<Person/>
<TextValidator
key={1}
ref='firstName'
name='firstName'
hintText='Your First Name'
floatingLabelText='First Name'
validators={['isEmpty']}
onBlur={this.handleBlur}
errorMessages={['required field']}
errorStyle={styles.errorStyle}
onChange={this.onChange}
/>
<TextValidator
key={2}
ref='lastName'
name='lastName'
hintText='Your Last Name'
floatingLabelText='Last Name'
validators={['isEmpty']}
onBlur={this.handleBlur}
errorMessages={['required field']}
errorStyle={styles.errorStyle}
onChange={this.onChange}
/>
</div>
<TextValidator
key={3}
name='message'
hintText='Message'
floatingLabelText='Any message'
multiLine
fullWidth
rows={2}
/>
<div style={Object.assign({}, styles.row, styles.spaceBetween)}>
<LocationOn/>
<TextValidator
key={4}
ref='location'
name='location'
hintText='Your City'
floatingLabelText='From where you would be travelling'
validators={['isEmpty']}
errorMessages={['required field']}
errorStyle={styles.errorStyle}
onBlur={this.handleBlur}
onChange={this.onChange}
/>
<div style={styles.divAlignCenter}>
<RaisedButton
type='submit'
label={'Submit'}
labelPosition='before'
icon={<ThumbUp />}
backgroundColor={blue500}
labelStyle={styles.labelColor}
/>
</div>
</div>
</ValidatorForm>
)
}
}
export default App
from react-material-ui-form-validator.
Hi,
Try to remove onBlur
listener or set instantValidate
to false, because they overlap each other. As you can see in example you should set instantValidate
to false to get onBlur
working properly.
from react-material-ui-form-validator.
@vivekparekh8 It's possible that the 'required' validation was not working for you because you did not have the 'value' property set in TextValidator
from react-material-ui-form-validator.
closed due no activity
from react-material-ui-form-validator.
i have a modal when i write text into textValidator and click away and re-open modal the errorValidator apear ,how to remove it??
from react-material-ui-form-validator.
@Anwer1990 you can do something like this
onModalClose = () => {
this.form.resetValidations();
}
from react-material-ui-form-validator.
Related Issues (20)
- Child components within ValidatorForm wrapped by plain divs HOT 1
- Material UI 5 support HOT 7
- Error occurred when npm run build after version upgrade HOT 2
- Uncaught ReferenceError: process is not defined HOT 2
- check validations without submitting the form HOT 4
- React 18 in peer-dependencies and use new API HOT 2
- _ValidationRules2.default[name] is not a function HOT 2
- SelectValidator causing page scroll to vanish - unable to override HOT 4
- Variable for is form valid? HOT 2
- issue while using instantValidate HOT 7
- SelectValidator suggestion pop-up(MenuItem) showing on top of the field(should be show just below the field) HOT 1
- Chrome autofill overlapping TextValidator component floating label. HOT 1
- Hydration fail
- minStringlength,maxStringlength not detecting changes while value pre setted using state HOT 4
- Reset Form Validation in Functional Component HOT 1
- ValidateOnBlur Issue HOT 1
- property value={undefined}
- getting warning and unable to submit form
- How to use it with mui v5 i.e @mui/material HOT 1
- Errors when testing component that include react-material-ui-form-validator
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-material-ui-form-validator.