reactjs 为什么setCustomValidity()在React应用中不起作用？

gojuced7 于 2022-11-04 发布在 React

关注(0)|答案(4)|浏览(255)

为什么setCustomValidity()不能在React中工作？我错过了什么吗？用vanillia HTML和JS可以正常工作。或者有其他方法可以轻松地制作类似setCustomValidity的东西？
React代码：

class Form extends React.Component {
  formVal(e) {
    e.target.setCustomValidity("Test_1");
  }
  formVal2() {
    let inpt = document.getElementById("input");
    inpt.target.setCustomValidity("TEST_2");
  }
  render() {
    return (
      <div>
        <form>
          <input
            id="input"
            type="datetime-local"
            onBlur={this.formVal}
          />
        </form>
        <button onClick={this.formVal2}>Click </button>
      </div>
    );
  }
}

CodePen - React
无React：

<form>
  <input type="email" id="mail" name="mail">
  <button onclick="test()">Submit</button>
</form>

// JS中

var input = document.getElementById("mail");
function test() {
 input.setCustomValidity("test")
}

CodePen - no React

reactjs

来源：https://stackoverflow.com/questions/45101515/why-setcustomvalidity-not-working-in-react-app

4条答案

按热度按时间

gcuhipw91#

setCustomValidity不会立即触发验证，您必须有一个表单提交事件来触发它，或者调用checkValidity。我已经更新了您的CodePen，以展示如何在React中实现这一点，下面也包括了它。
第一个

赞(0）回复(0）举报 2022-11-04

cwtwac6a2#

如果您想要显示空的必填字段的验证，您应该将setCustomValidity设置为onInvalid，如下所示：

<input onInvalid={e => e.target.setCustomValidity('Your custom message')} />

如果您使用的是这样的打字稿：

<input onInvalid={e => (e.target as HTMLInputElement).setCustomValidity('Enter User Name Here')} />

如果要处理值的验证，可以按如下方式添加：https://stackoverflow.com/a/45695707/6912349

赞(0）回复(0）举报 2022-11-04

irtuqstp3#

你好，这里是你需要做的。

import * as React from "react";

export default function Form () {
  const nameInput = React.useRef<HTMLInputElement>(null);
  const [nameVal,setNameVal] = React.useState("");

  const onSubmitHandler = (e: React.FormEvent<HTMLFormElement>) => {
   // handle yow submition
  }

  const onNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!nameInput.current) return;

    setNameVal(e.currentTarget.value);
    const {validity} = nameInput.current;

    if (validity.badInput) {
      nameInput.current.setCustomValidity("Set the message to show");
    }

    if (validity.customError) {
      nameInput.current.setCustomValidity("Set the message to show");
    }

    if (validity.patternMismatch) {
      nameInput.current.setCustomValidity("Set the message to show");
    }

    if (validity.rangeOverflow) {
      nameInput.current.setCustomValidity("Set the message to show");
    }

    if (validity.rangeUnderflow) {
      nameInput.current.setCustomValidity("Set the message to show");
    }

    if (validity.stepMismatch) {
      nameInput.current.setCustomValidity("Set the message to show");
    }

    if (validity.tooLong) {
      nameInput.current.setCustomValidity("Set the message to show");
    }

    if (validity.tooShort) {
      nameInput.current.setCustomValidity("Set the message to show");
    }

    if (validity.typeMismatch) {
      nameInput.current.setCustomValidity("Set the message to show");
    }

    if (validity.valid) {
      nameInput.current.setCustomValidity("Set the message to show");
    }

    if (validity.valueMissing) {
      nameInput.current.setCustomValidity("Set the message to show");
    }

  }

  return (
    <form onSubmit={onSubmitHandler}>
     <label htmlFor="id-name">Name</label>
     <input
        id="id-name"
        ref={nameInput}
        type="text"
        required
        min={5}
        max={15}
        value={nameVal}
        onChange={onNameChange}
      />
      <button type="submit">submit</button>
    </form>
  )

}

我的意思是你不必把所有的都加进去，只加你关心的那些就行了

赞(0）回复(0）举报 2022-11-04

flseospp4#

简短回答：

<input required onInvalid={(e)=>{e.target.setCustomValidity('Your custom validation message here')}} />

赞(0）回复(0）举报 2022-11-04

我来回答

reactjs 为什么setCustomValidity()在React应用中不起作用？

4条答案

相关问题

热门标签

最新问答