Material UI TextField组件required属性提交时验证失效问题求助

我看了你的代码，问题主要出在表单提交的方式和错误的属性使用上，咱们一步步来修复：

核心问题分析 #

1. 提交按钮未触发表单原生提交流程：你现在用按钮的onClick直接调用handleSubmit，这会绕过浏览器的原生必填项验证——HTML5的required校验只有在表单通过submit事件提交时才会生效，手动调用函数不会触发这个验证逻辑。
2. 错误的属性名：第二个密码输入框用了isRequired="true"，但Material UI的TextField需要的是原生required属性（布尔属性不需要赋值为字符串"true"，直接写required即可）。

修复步骤 #

1. 调整表单提交逻辑 #

• 给<form>添加onSubmit事件绑定你的handleSubmit函数，记得在函数里调用event.preventDefault()阻止默认的表单跳转行为。
• 把提交按钮的onClick移除，改为type="submit"，这样点击按钮就会触发表单的submit事件，进而触发原生必填验证。

2. 修正TextField的必填属性 #

把密码输入框的isRequired="true"替换为required。

3. 确保Select的必填验证生效 #

你的FormControl已经加了required，要确保role的初始状态值为空字符串（比如this.state = { role: '' }），这样未选择选项时会正常触发验证。

修改后的完整代码 #

<form onSubmit={this.handleSubmit}>
  <TextField
    required
    id="standard-required"
    name="username"
    label="Employee ID"
    value={this.state.username}
    onChange={this.handleChange}
    margin="normal"
    variant="outlined"
  />
  <TextField
    style={{width:'14.5%'}}
    name="password"
    id="outlined-password-input"
    label="Password"
    type={this.state.showPassword ? 'text' : 'password'}
    value={this.state.password}
    required  // 这里修正为正确的required属性
    onChange={this.handleChange}
    autoComplete="current-password"
    margin="normal"
    variant="outlined"
    InputProps={{
      endAdornment: (
        <InputAdornment position="end">
          <IconButton
            aria-label="Toggle password visibility"
            onClick={this.handleClickShowPassword}
          >
            {this.state.showPassword ? <Visibility /> : <VisibilityOff />}
          </IconButton>
        </InputAdornment>
      ),
    }}
  />
  <FormControl variant="outlined" className={styles.formControl} required>
    <InputLabel
      ref={ref => { this.InputLabelRef = ref; }}
      htmlFor="outlined-age-simple"
    >
      Role
    </InputLabel>
    <Select
      style={{ width: 220 }}
      name="role"
      value={this.state.role}
      onChange={this.handleChange}
      input={<OutlinedInput labelWidth={this.state.labelWidth} name="name" id="outlined-age-simple" />}
    >
      <MenuItem value={'Doctor'}>Doctor</MenuItem>
      <MenuItem value={'Nurse'}>Nurse</MenuItem>
      <MenuItem value={'Receptionist'}>Receptionist</MenuItem>
    </Select>
    <br/><br/>
    <Button
      variant="contained"
      style={{ backgroundColor: '#2699FB', width: 220 }}
      type="submit"  // 改为submit类型，移除onClick
    >
      <b style={{ color: '#fff' }}>login</b>
    </Button>
  </FormControl>
</form>

同时要更新你的handleSubmit函数，添加事件参数并阻止默认行为：

handleSubmit = (event) => {
  event.preventDefault(); // 阻止表单默认跳转行为
  // 这里写你的表单处理逻辑，比如发送登录请求等
  console.log('表单提交数据：', this.state);
}

额外说明 #

如果需要自定义验证提示或更复杂的校验规则，可以结合Material UI的FormHelperText和组件状态来实现，但原生required已经能满足基础的必填项验证需求。

内容的提问来源于stack exchange，提问作者Syed Atif Ali