newoldmax / react-material-ui-form-validator Goto Github PK

PassengerDetails(count, type) {
    let {dispatch} = this.props;
    let cart = [];
    for (let i = 0; i < count; i++) {
      const passengerIndex = this.calculatePassengerIndex(type, i);
      cart.push(
        <PassengerDetailsCart key={passengerIndex} passengerIndex={passengerIndex} isPrimary={this.isPrimary(type, i)} PassengerChange={this.PassengerChange}/>
      );
    }
    return cart
  }

<ValidatorForm onSubmit={this.payment}
                           ref={form => this.form = form}
                           onError={errors => console.log(errors)}
                           name="passenger-details">
            <h4>Passenger adults ({this.reserve.adults})</h4>
            {this.PassengerDetails(this.reserve.adults, 'adults')}
            <h4>Passenger childs ({this.reserve.childs})</h4>
            {this.PassengerDetails(this.reserve.childs, 'childs')}
            <h4>Passenger infant ({this.reserve.infant})</h4>
            {this.PassengerDetails(this.reserve.infant, 'infant')}

            <RaisedButton>cancel</RaisedButton>
              </ValidatorForm>

return (
      <div className="passenger-details">


        <TextValidator
          floatingLabelText="First Name"
          name="first_name"
          onChange={this.handleChange}
          value={this.state.first_name}
          underlineStyle={{borderColor: '#9575CD'}}
          underlineFocusStyle={{borderColor: '#311B92'}}
          validators={['required']}
          errorMessages={['this field is required']}
          ref={this.props.ref}
        />
        <TextValidator
          floatingLabelText="last Name"
          value={this.state.last_name}
          name="last_name"
          onChange={this.handleChange}
          underlineStyle={{borderColor: '#9575CD'}}
          underlineFocusStyle={{borderColor: '#311B92'}}
          validators={['required']}
          errorMessages={['this field is required']}
          ref={this.props.ref}
        />
        <TextValidator
          floatingLabelText="national ID code"
          value={this.state.doc_id}
          onChange={this.handleChange}
          name="doc_id"
          validators={['required', 'isIRNationalCode']}
          errorMessages={['this field is required', 'nid is not valid']}
          underlineFocusStyle={{borderColor: '#311B92'}}
          underlineStyle={{borderColor: '#9575CD'}}
          ref={this.props.ref}

        />
        <SelectValidator
          name="gender"
          value={this.state.gender}
          onChange={this.changeGender}
          floatingLabelText="gender"
          underlineStyle={{borderColor: '#9575CD'}}
          underlineFocusStyle={{borderColor: '#311B92'}}
          iconStyle={{fill: '#9575CD'}}
          ref={this.props.ref}
        >
          {this.gender.map(this.menuItemElement)}
        </SelectValidator>
        <SelectValidator
          name="nationality"
          value={this.state.nationality}
          floatingLabelText="select your country"
          underlineStyle={{borderColor: '#9575CD'}}
          onChange={this.changeNationality}
          underlineFocusStyle={{borderColor: '#311B92'}}
          iconStyle={{fill: '#9575CD'}}
          ref={this.props.ref}
        >
          {this.nationality.map(this.menuItemElement)}
        </SelectValidator>
        {primary}
      </div>
    )

export default class RegisterForm extends Component {

  constructor(props) {
    super(props);

    this.state = {

    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }
 ....

handleSubmit(e) {
    e.preventDefault();
    var payload = this.state;
....

render() {
    return (
      <ValidatorForm ref="form" onSubmit={this.handleSubmit}>
          <TextValidator
              floatingLabelText="Name"
              onChange={this.handleChange}
....

          <RaisedButton label="Register" type="submit" />
      </ValidatorForm>
      );
  }
}

render() {
let participentSilo =  participantSilos.map(function(groupItem, key){ return (
           <ParticipantSilo onParticipantSiloChange={self.onParticipantSiloChange}
                            elmIndex={key} key={key} departments={departments}/>
return (
                           <ValidatorForm onSubmit={this.onClickInvite.bind(this)} >
                                   <div className="row">
                                       <div className="col-md-6">
                                           <TextValidator
                                               floatingLabelText="Survey Name"
                                               hintText="Enter Survey Name"
                                               name="surveyName"
                                               type="text"
                                               onChange={this.onaddsurvey}
                                               value = { this.state.Surveyname }
                                               validators={['required']}
                                               errorMessages={['this field is required']} />
                                       </div>
                                       <br />
                                       <br />
                                       <div className="col-md-6">
                                           <AlertMessageBox alert={alert} />
                                       </div>
                                   </div>

                                   { participentSilo }


                                   <div className="row">
                                       <div className="col-md-5">
                                           <RaisedButton label="Add new Participant" onClick={this.onClickAdd.bind(this)} primary={true}  />
                                       </div>
                                       <div className="col-md-5">
                                           <RaisedButton type="submit"
                                                         label="Invite Survey"
                                                         primary={true}
                                                         onClick={this.inviteSurvey}/>
                                       </div>
                                   </div>
                               </ValidatorForm>

<TextValidator
                        floatingLabelText="prueba email"
                        onChange={this.handleChange}
                        name="email"
                        type={'text'}
                        validators={['required', 'isEmail']}
                        errorMessages={['this field is required', 'email is not valid']}
                        value={this.state['email']}
                   />

"react": "^15.0.0 || 16.0.0",
"react-dom": "^15.0.0 || 16.0.0",

"react": "^15.0.0 || ^16.0.0",
"react-dom": "^15.0.0 || ^16.0.0",

<TextValidator
            name="myField"
            id="myField"
            value={myField}
            type="number"
            onChange={this._handleFields}
            validators={['required', 'isNumber', 'isPositive']}
            errorMessages={[config.validations.required, config.validations.isNumber, config.validations.isPositive]}
          /><br />

./~/react-material-ui-form-validator/lib/AutoCompleteValidator.js
Module not found: Can't resolve 'react-autosuggest' in '/Users/{account}/Documents/lodestar-client/node_modules/react-material-ui-form-validator/lib'

warning.js:36 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the XXXXX component.

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
          >
          <div style={styles.row}>
             <Person/>
             <TextValidator
               ref='firstName'
               name='firstName'
               hintText='Your First Name'
               floatingLabelText='First Name'
               validators={['required']}
               onBlur={this.handleBlur}
               errorMessages={['required field']}
               errorStyle={styles.errorStyle}
               onChange={this.onChange}
             />
             <TextValidator
               ref='lastName'
               name='lastName'
               hintText='Your Last Name'
               floatingLabelText='Last Name'
               validators={['required']}
               onBlur={this.handleBlur}
               errorMessages={['required field']}
               errorStyle={styles.errorStyle}
               onChange={this.onChange}
             />
           </div>
           <TextValidator
             name='message'
             hintText='Message'
             floatingLabelText='Any message'
             multiLine
             fullWidth
             rows={2}
           />
           <div style={Object.assign({}, styles.row, styles.spaceBetween)}>
             <LocationOn/>
             <TextValidator
               ref='location'
               name='location'
               hintText='Your City'
               floatingLabelText='From where you would be travelling'
               validators={['required']}
               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>
      )
    }
}

                <ValidatorForm
                    ref="form"
                    onSubmit={this.handleSubmit}
                    instantValidate={true}
                >
                    <br />
                    {this.renderStep()}
                    <br/>
                    <BtnsWrapper>
                        <RaisedButton label="previous" onTouchTap={this.prevStep} 
                            primary style={{ display: step === 0 ? 'none' : '' }}/>
                        <RaisedButton label="next" onTouchTap={this.nextStep} 
                            primary disabled={isError ? true : false} />
                   </BtnsWrapper>
                </ValidatorForm>

ERROR in ../~/react-material-ui-form-validator/lib/AutoCompleteValidator.js
Module not found: Error: Can't resolve 'material-ui/AutoComplete' in '/Users/davidnorth/src/material/node_modules/react-material-ui-form-validator/lib'

import { ValidatorForm } from 'react-form-validator-core'
import { TextValidator } from 'react-material-ui-form-validator'

<ValidatorForm
              ref='form'
              onSubmit={this.handleSubmit}
              onError={errors => console.log(errors)}
              className={css.form}>
              <div className={css.inputContainer}>
                <TextValidator
                  floatingLabelText='Email'
                  onChange={this.handleChange}
                  name='email'
                  value={formData.email}
                  placeholder='Enter your email'
                  validators={['required', 'isEmail']}
                  errorMessages={['this field is required', 'email is not valid']}
                />
              </div>
              <div>
                <TextValidator
                  floatingLabelText='Email'
                  onChange={this.handleChange}
                  name='email'
                  value={formData.email}
                  placeholder='Enter your email'
                  validators={['required', 'isEmail']}
                  errorMessages={['this field is required', 'email is not valid']}
                />
              </div>
              <div className={css.actions}>
                <a href=''>Forgot password?</a>
                <Button color='primary' type='submit' raised>Login</Button>
              </div>
</ValidatorForm>

`import React, { Component } from "react";
import { Card } from "material-ui/Card";
import { TextField } from "material-ui";
import ContentSend from "material-ui/svg-icons/content/send";
import SocialPerson from "material-ui/svg-icons/social/person";
import { ValidatorForm, TextValidator} from 'react-material-ui-form-validator';
import RaisedButton from "material-ui/RaisedButton";
const style = {
    boxForm: {
        textAlign: "center"
    },
    card: {
        backgroundColor: "#fff",
        marginBottom: "0px",
        padding: "0px 0px 46px 0px",
        fontSize: "16px",
        color: "gray",
        lineHeight: "25px",
        marginTop: "10%"
    }
};
class RegisterBox extends Component{
    constructor(props) {
        super(props);
        this.state = {
            user: {
                    companyName:null,
                    email:null,
                    role:"GDPR Administrator"
                  },
            valid:false
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange = (event) =>{
        const { user } = this.state;
        user[event.target.name] = event.target.value;
        this.setState({ user });
    };
    handleBlur=(event) =>{
        this.refs[event.target.name].validate(event.target.value);
    };
    handleSubmit = (event) =>{
        event.preventDefault();
        const { user } =  this.state;
        // const {valid}=this.state.valid;
        if(Object.keys(user).length > 0  ){
            this.props.handleSubmit(user);
        }
    };
    render(){
        let {user} = this.state;
        let {role}="GDPR Administrator";
        return (
            <div className="grid-flex">
                <div className="grid-row-flex grid-row-flex-lg">
                    <div className="grid-column-flex"/>
                    <div className="grid-column-flex" style={style.boxForm} >
                        <Card style={style.card}>
                            <div className="account-access-title">
                                <SocialPerson color="aaa" viewBox="0 -10 30 30" />
                                <span className=""> Authentication</span>
                            </div>
                            <br />
                            <br />
                            <br />
                            <ValidatorForm
                                onSubmit={this.handleSubmit} method="POST"
                            >
                                <TextValidator
                                    floatingLabelText="Company Name"
                                    ref="companyName"
                                    onChange={this.handleChange}
                                    onBlur={this.handleBlur}
                                    name="companyName"
                                    type="text"
                                    validators={['required']}
                                    errorMessages={['companyName field is required']}
                                    value={user.companyName}
                                />
                                <TextValidator
                                    floatingLabelText="Email Address"
                                    ref="email"
                                    onChange={this.handleChange}
                                    onBlur={this.handleBlur}
                                    name="email"
                                    type="email"
                                    validators={['required','isEmail']}
                                    errorMessages={['Email field is required','email is not valid']}
                                    value={user.email}
                                />
                                <TextField
                                    defaultValue={user.role}
                                    value={user.role}
                                    disabled={true}
                                    name="role"
                                />

                                <br />
                                <br />
                                <div id="participantSubmit" >
                                    <RaisedButton
                                        type="submit"
                                        onClick={this.handleSubmit}
                                        label="Submit"
                                        labelColor="#fff"
                                        style={{ marginLeft: "8px" }}
                                        backgroundColor="#22d3c5"
                                        icon={<ContentSend />} />
                                </div>
                            </ValidatorForm>
                            <br />
                            <br />
                            <br />
                        </Card>
                    </div>
                    <div className="grid-column-flex"/>
                </div>
            </div>
        );
    }
};
export default RegisterBox;`