我正在使用 html5验证启用。至此，我怀疑任何人都知道如果没有的话会打破什么，所以我宁愿不要禁用它。
我需要对发生的HTML5验证错误做出反应（扩展包含未能验证的字段的手风琴项目），但我不知道如何进行。
我尝试通过 vasity 和
return (
<Form
validate={(data, errors) => { console.log(data, errors); return true }}
transformErrors={(errors) => { console.log(errors); return errors }}
// ...
/>
)
”要在HTML5验证阻止我时触发 - 它们仅在HTML验证通过后才登录到控制台。是否有可能以某种方式拦截HTML5验证错误？
如果上述不可能，这对我来说就足够了：
每当HTML5验证在手风琴内折叠的字段上失败时，此错误就会泄漏到控制台中：
An invalid form control with name='' is not focusable.
<input class="form-control" id="root_triggers_0_dialog" label="Dialog to trigger"
required="" placeholder="" type="text" value="">
如果我可以捕获此错误 - 两者都会遇到消息（以识别错误类型）和对未集中注意力的元素的引用（缩进要扩展的手风琴项目） - 我可以做我需要的事情。
我尝试在我的代码上放置 catch 阻止，但是在任何地方都无法捕获错误。触发表单提交尝试的当前方法是通过RJSF表单中的按钮上的程序 .click（）：
return (
<Form
formData={formData}
// ...
>
<button className="hidden" ref={submitRef} />
</Form>
)
// somewhere up the component tree
submitRef?.click()
I am working with a form which has html5 Validation enabled. By this point, I doubt anyone knows what could break if it weren't, so I would rather not disable it.
I need to react to HTML5 validation errors occuring (expand an accordion item that contains the field which fails to validate), but I don't know how.
I tried accessing errors via validate and transformErrors callbacks:
return (
<Form
validate={(data, errors) => { console.log(data, errors); return true }}
transformErrors={(errors) => { console.log(errors); return errors }}
// ...
/>
)
but neither function seems to trigger when HTML5 validation stops me - they only log into the console once HTML validation passes. Is it possible to somehow intercept the HTML5 validation error?
If the above is not possible, this would suffice for me:
Whenever a HTML5 validation fails on a field that is collapsed inside an accordion, this error leaks into the console:
An invalid form control with name='' is not focusable.
<input class="form-control" id="root_triggers_0_dialog" label="Dialog to trigger"
required="" placeholder="" type="text" value="">
If I could catch this error - both the message (to identify the error type) and a reference to the element that failed to focus (to indentify which accordion item to expand) - I could do what I need.
I tried putting catch blocks all over my code, but weren't able to catch the error anywhere. The current method of triggering the form submit attempt, is via a programatic .click() on a button inside the RJSF form:
return (
<Form
formData={formData}
// ...
>
<button className="hidden" ref={submitRef} />
</Form>
)
// somewhere up the component tree
submitRef?.click()
发布评论