CODEWITHSUNDEEP
reactjs
DevGe
DevGe

Reputation: 1459

ReactQuill: Validating Empty Input Value (Showing html tags)

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

Sample Image

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';
 }

Upvotes: 8

Views: 8525

Answers (4)

Weam Adel
Weam Adel

Reputation: 260

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
    }}
/>

Upvotes: 0

Nabi Abdelkader
Nabi Abdelkader

Reputation: 1

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, '');

Upvotes: 0

Osei-Bonsu Christian
Osei-Bonsu Christian

Reputation: 2975

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;
  }

Upvotes: 2

Scorpionk
Scorpionk

Reputation: 478

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
}

Upvotes: 21

Related Questions