ReactQuill: Validating Empty Input Value (Showing html tags)

Question

I have problem regarding validating the ReactQuill.

The Scenario: When i remove the input in ReactQuill Textarea the last value will be

<p><br></p>

Question: How to validate if the last value would be <p><br></p> i tried to get value and validate it. but still the value is inserting without data. I don't know where's the problem in my code or in the ReactQuill

State:

 const datas = {
    textValue: this.state.text
 }

My Condition:

 if(datas.textValue.length === 0 || datas.textValue.value == '<p><br></p>')
 {
    return 'false';
 }
 else
 {
    return 'true';
 }

Use datas.textValue.length === 1 condition

Deep Kakkar
– Deep Kakkar

2019-03-08 04:58:56 +00:00
Commented Mar 8, 2019 at 4:58 — Deep Kakkar
– Deep Kakkar, Commented Mar 8, 2019 at 4:58

Scorpionk · Accepted Answer · 2019-12-14 07:17:14Z

21

React Quill uses HTML tags for markup purpose. To check length of the entered text by user, we can just filter out html tags from datas.textValue using following regex and trim whitespaces if present.

if(datas.textValue.replace(/<(.|\n)*?>/g, '').trim().length === 0) {
    //textarea is still empty
}

answered Dec 14, 2019 at 7:17

Scorpionk

4786 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Osei-Bonsu Christian · Accepted Answer · 2021-12-20 04:49:57Z

2

I had to add just a bit to @Scorpionsk answer for it to work perfectly for me so it wouldn't escape images as well.

This works for me.

function isQuillEmpty(value: string) {
  if (value.replace(/<(.|\n)*?>/g, '').trim().length === 0 && !value.includes("<img")) {
     return true;
   }
     return false;
  }

answered Dec 20, 2021 at 4:49

Osei-Bonsu Christian

2,9851 gold badge17 silver badges8 bronze badges

Comments

Nabi Abdelkader · Accepted Answer · 2024-03-25 10:26:20Z

0

If you want to delete the extra lines You can use the following regex

const htmlContent = htmlContent.replace(/<p>\s*<br\s*\/?>\s*<\/p>/g, '');

edited Mar 25, 2024 at 10:26

answered Mar 25, 2024 at 10:24

Nabi Abdelkader

12 bronze badges

Comments

Weam Adel · Accepted Answer · 2024-07-09 22:29:57Z

0

There is a method on the editor called getText() when used, you can get the plain text. Here is an example using react, but you can use it with plain onChange listener with vanilla JS if you need:

<Editor onChange={(result, delta, source, editor) => {
        console.log(editor.getText()); // Plain text here
    }}
/>

answered Jul 9, 2024 at 22:29

Weam Adel

4203 silver badges12 bronze badges

Collectives™ on Stack Overflow

ReactQuill: Validating Empty Input Value (Showing html tags)

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related