RichTextEditor form validation does not work

[Laurin S]

Hi,

unfortunately, when I'm using the FormValidator to validate the RichTextEditor-component, I'm always getting the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'toString')

    at Object.required (form-validator.js:727:1)

    at FormValidator.isValid (form-validator.js:623:1)

    at FormValidator.validateRules (form-validator.js:556:1)

    at FormValidator.validate (form-validator.js:201:1)

Also, the documented example is not working: https://ej2.syncfusion.com/react/documentation/rich-text-editor/validation/

I've attached a demo, that shows the problems...

Attachment: reactjylxza_(1)_5abba8da.zip

[Buvana Sathasivam]

Hi Laurin,

Currently, we are validating your reported query with high priority. We will update you with further details on or before April 6, 2022.

Regards,

Buvana S

[Buvana Sathasivam]

Hi Laurin,

Thank you for your patience.

To solve your problem, you can set the name attribute through the htmlAttributes property. Please find the below code and sample for your reference.

class App extends React.Component {

  componentDidMount() {

    const option = {

      rules: {

        'defaultRTE-value': {

          required: true,

        },

      },

    };

    this.formObject = new FormValidator('#myForm', option);

    document.getElementById('validateSubmit').addEventListener('click', (e) => {

      e.preventDefault();

 

      console.log('Validation: ' + this.formObject.validate());

 

      const form = document.forms.myForm;

      const formData = new FormData(form);

      const rteValue = formData.get('defaultRTE-value');

      // Use this value to the data base.

      alert(rteValue);

    });

  }

  render() {

    return (

      <form>

        <div className="form-group">

          <RichTextEditorComponent

            id="defaultRTE"

            htmlAttributes= {{ name: "defaultRTE-value" }}

          >…

          </RichTextEditorComponent>

        </div>

        <div className="form-btn-section">

          <ButtonComponent

            id="validateSubmit"

            ref={(scope) => {

              this.button = scope;

            }}

            disabled={true}

          >

            Submit

          </ButtonComponent>

        </div>

      </form>

    );

  }

}

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/src1550566180

We will correct documentation and make it available in any of our upcoming releases.

Regards,
Buvana S