Validation and submit does not work !

[Arya-Aghaei]

When I put TextFields and every other controls inside the Grid component, the submit does return an empty object, also when I put it inside the div with bootstrap grid classes ( or without any class) in addition the same result appears, moreover the validation does not work.

 submit = (values, pristineValues) => {
            console.log(values);
         }

   <MaterialUIForm onSubmit={this.submit}>
      <Grid container spacing={24}>
        <Grid item xs={12} sm={6}>
          <TextField
            label="Name"
            type="text"
            name="ccccc"
            data-validators="isRequired,isAlpha"
            onChange={e => this.customInputHandler(e.target.value)}
            fullWidth
          />
        </Grid>
        <Grid item xs={12} sm={6}>
          <TextField
            label="Database Host"
            type="text"
            name="vvvvvvv"
            data-validators="isRequired,isAlpha"
            onChange={e => this.customInputHandler(e.target.value)}
            fullWidth
          />
        </Grid>
        <Grid item xs={12} sm={6}>
          <TextField
            label="Port"
            type="number"
            name="tttttttt"
            data-validators="isRequired,isAlpha"
            onChange={e => this.customInputHandler(e.target.value)}
            fullWidth
          />
        </Grid>
        <Grid item xs={12} sm={6}>
          <TextField
            label="Host"
            type="text"
            name="ttttt"
            data-validators="isRequired,isAlpha"
            onChange={e => this.customInputHandler(e.target.value)}
            fullWidth
          />
        </Grid>
        <Grid item xs={12} sm={6}>
          <TextField
            label="Host"
            type="text"
            name="ttt"
            data-validators="isRequired"
            onChange={e => this.customInputHandler(e.target.value)}
            fullWidth
          />
        </Grid>

        </Grid>
      </Grid>
      <Button variant="raised" type="reset">Reset</Button>
      <Button variant="raised" type="submit">Submit</Button>
    </MaterialUIForm>`

[parham]

I have the same issue, please support to fix it.

[samankhademi]

same problem, please fix

[voletiswaroop]

Hi @arrow891 @parham @samankhademi ,

Use Bootstrap classes className="col-xs-12 col-sm-6" instead of Grid it works.

[Arya-Aghaei]

@voletiswaroop thanks for responding, but consider someone like me is not going to use bootstrap, I am using the the material-ui so I don't want to use bootstrap in my project, although I have tried your solution and it works, but it is a temporary solution and in many cases makes problems in development when you can not give styles to children or parents.