Can clicking the custom "I want to submit" button not trigger the onsubmit event of the form？

[dajun1230]

Prerequisites

• I have read the documentation;
• In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.
• Ideally, I'm providing a sample JSFiddle or a shared playground link demonstrating the issue.

Description

Can clicking the custom "I want to submit" button not trigger the onsubmit event of the form

[Description of the bug or feature]

Steps to Reproduce

function LoginLockForm(): JSX.Element {
let yourForm: any;
const schema: any = {
type: 'object',
properties: {
password: {
type: 'object',
title: '密码验证',
},
ip: { type: 'object', title: 'IP校验' },
},
required: ['password', 'ip'],
};

const widgets = {
TextWidget: FormInput,
};

const uiSchema = { 'ui:field': 'password' };

const fields = {
password: PasswdFunc,
ip: IpValidate,
};

function customSubmit(): void {
yourForm.submit();
console.log(yourForm);
// yourForm.submit();
}

function validate(formData: any, errors: any): any {
if (formData.password !== {}) {
errors.password.addError('Passwords don't match');
}
return errors;
}

const onSubmit = ({ formData }: any) => console.log('Data submitted: ', formData);

return (

<Form
ref={(form) => {
console.log(form);
yourForm = form;
}}
schema={schema}
// uiSchema={uiSchema}
// fields={fields}
widgets={widgets}
validate={validate}
// FieldTemplate={CustomFieldTemplate}
onSubmit={onSubmit}
noHtml5Validate
>
{/* <React.Fragment /> /}
{/ <div style={{ display: 'none' }}>

*/}

我要提交

);
}

Expected behavior

[What you expected to happen]

Actual behavior

[What actually happened]

Version

You can usually get this information in your package.json or in the file URL if you're using the unpkg one.

[dajun1230]

Can clicking the custom "I want to submit" button not trigger the onsubmit event of the form？ Code above

[epicfaace]

Where is your code for the "I want to submit" button?

[dajun1230]

import React from 'react';
import Form from '@rjsf/core';

import Input from '@c/input';

import { FormInput } from '@c/form-schema';

function LoginLockForm(): JSX.Element {
let yourForm: any;
const schema: any = {
type: 'object',
properties: {
password: {
type: 'object',
title: '密码验证',
},
ip: { type: 'object', title: 'IP校验' },
},
required: ['password', 'ip'],
};

const widgets = {
TextWidget: FormInput,
};

const uiSchema = { 'ui:field': 'password' };

const fields = {
password: PasswdFunc,
ip: IpValidate,
};

function customSubmit(): void {
yourForm.submit();
console.log(yourForm);
// yourForm.submit();
}

function validate(formData: any, errors: any): any {
if (formData.password !== {}) {
errors.password.addError('Passwords don't match');
}
return errors;
}

const onSubmit = ({ formData }: any) => console.log('Data submitted: ', formData);

return (

<Form
ref={(form) => {
console.log(form);
yourForm = form;
}}
schema={schema}
// uiSchema={uiSchema}
// fields={fields}
widgets={widgets}
validate={validate}
FieldTemplate={CustomFieldTemplate}
onSubmit={onSubmit}
noHtml5Validate
>
{/* <React.Fragment /> /}
{/ <div style={{ display: 'none' }}>

*/}

I want to Submit

);
}

export default LoginLockForm;

function PasswdFunc(props: any): JSX.Element {
const [passwdValue, setPasswdValue] = React.useState({
isTrue: false,
passwdLimit: 0,
lockLimit: 0,
});

function handleChange(value: boolean | string, key: string): void {
const _value = {
...passwdValue,
[key]: value,
};
console.log(_value);
setPasswdValue(_value);
props.onChange(_value);
}

return (

<input type="checkbox" onChange={(e) => handleChange(e.target.checked, 'isTrue')} />
连续输错密码
<Input onChange={(value) => {
console.log(value);
handleChange(value, 'passwdLimit');
}} />
次后，锁定该账户
<Input onChange={(value) => handleChange(value, 'lockLimit')} />
分钟

);
}

function IpValidate(): JSX.Element {
return (

同一 IP 连续登录失败

次后，锁定该账户

分钟

);
}

function CustomFieldTemplate(props: any): JSX.Element {
const { id, classNames, label, help, required, description, rawErrors, children } = props;
console.log(props);
if (id === 'root') {
return (

{children}

);
}

return (

<div style={{ width: '186px', textAlign: 'left' }}>

{label}{required ? '' : null}

{/ {description} /}
{id === 'root_password' && <PasswdFunc {...props} />}
{id === 'root_ip' && <IpValidate {...props} />}
{/ {rawErrors && rawErrors[0]}
{help} */}

);
}

[dajun1230]

Where is your code for the "I want to submit" button?

Please look at the above code. Why can't onsubmit be triggered

[epicfaace]

You should wrap it in a <button type=submit> tag. Also, please send a jsfiddle / codepen or format your code using markdown (see https://docs.github.com/en/github/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks) in the future.

[dajun1230]

If it can only be placed in the children of the form, it has great limitations and cannot be satisfied. I want to call the submitted scenario externally, so this problem should be improved and optimized.

[epicfaace]

That would be a duplicate of #500, then, please take a look at that issue