Validate jqxEditor - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: action, editor, jqx editor, jQxEditor, jqxvalidator, validate, validate editor

This topic contains 9 replies, has 3 voices, and was last updated by Dimitar 7 years, 10 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Validate jqxEditor Posts
July 6, 2015 at 5:51 pm Validate jqxEditor #73409
rubim.shrestha
Participant
Hello,

How to use jqxValidator in jqxEditor ?

jqxEditor
```
$('#descrpition').jqxEditor({
        height: 250,
        width: '100%',
        lineBreak: "p",
        tools: "bold italic underline | format font size | color | left center right | outdent indent | ul ol | html"

    });
```
Form Validation:
{ input: '#description', message: 'Required', action: 'blur', rule: 'required' },

is not working, since ‘<p></p>’ was displayed while debugging…..

Thank you..

Rubim
July 8, 2015 at 5:16 am Validate jqxEditor #73484
Dimitar
Participant
Hello Rubim,

Unfortunately, key events in jqxEditor cannot be captured and it cannot be validated the way you have tried (on ‘blur’). However, an editor can be validated with a custom rule and the method validate:
```
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script src="../../scripts/jquery-1.11.1.min.js"></script>
    <script src="../../jqwidgets/jqx-all.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // create jqxInput
            $('#jqxInput').jqxInput({
                width: '30%'
            });

            // create editor.
            $("#jqxEditor").jqxEditor({
                tools: 'bold italic underline font size',
                width: '30%',
                height: '50%'
            });

            $("#jqxValidator").jqxButton();
            $('#jqxValidator').click(function() {
                $('#form').jqxValidator('validate');
            });

            $('#form').jqxValidator({
                rules: [{
                    input: '#jqxInput',
                    message: 'string is required!',
                    action: 'keyup',
                    rule: 'required'
                }, {
                    input: '#jqxEditor',
                    message: 'long string is required !',
                    action: 'keyup',
                    rule: function(input, commit) {
                        var editorValue = $.trim($(input.val()).text());
                        if (editorValue === "" || editorValue === '') {
                            return false;
                        } else {
                            return true;
                        }
                    }
                }]
            });

            // create button.
            $("#jqxButton").jqxButton();
            $("#jqxButton").click(function() {
                $('#form').jqxValidator('validate');
            });

        });
    </script>
</head>

<body class='default'>
    <button id="jqxButton">
        Validate</button>
    <div id="form">
        <input type="text" id="jqxInput" />
        <textarea id="jqxEditor"></textarea>
        <button id="jqxValidator">
            Validate</button>
    </div>

</html>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
July 8, 2015 at 9:20 am Validate jqxEditor #73519

rubim.shrestha
Participant

Hello Dimitar,

Thanks for your response….

Rubim

November 21, 2016 at 6:32 pm Validate jqxEditor #89199

silvano.alda
Participant

Hello Dimitar,
I am trying to validate jqxeditor but seems not working also your example code: http://jsfiddle.net/skXv7/22/

Can you please take a look?

Thank you

November 22, 2016 at 6:47 am Validate jqxEditor #89207

Dimitar
Participant

Hello silvano.alda,

Please try the following update: http://jsfiddle.net/Dimitar_jQWidgets/o4pqfqr9/. We hope it is helpful to you.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

November 22, 2016 at 1:09 pm Validate jqxEditor #89224

silvano.alda
Participant

Thank you very much!
very helpfull, now your example works.

but I’m using jqx-editor instead of textarea, sorry I thought if it works with textarea also will work on jqx-editor, but it’s not working: http://jsfiddle.net/o4pqfqr9/1/

can you please help me?

November 23, 2016 at 6:44 am Validate jqxEditor #89242

Dimitar
Participant

Hello silvano.alda,

This case requires a special handling. Here is what to do: http://jsfiddle.net/Dimitar_jQWidgets/bLhsxot5/. Please note that in a non-AngularJS environment (as is your example), jqx-editor is equivalent to div.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

November 23, 2016 at 3:50 pm Validate jqxEditor #89264

silvano.alda
Participant

Great!
Thank you very much!

November 24, 2016 at 10:44 am Validate jqxEditor #89290

silvano.alda
Participant

Sorry Dimitar, but still a bug in both examples:
the first time you try to validate jqxEditor works, but if you delete text and then write again the validation is not working anymore: required message appear but text are inside jqxeditor

Thank you very much

November 25, 2016 at 6:43 am Validate jqxEditor #89301

Dimitar
Participant

Hello silvano.alda,

The following should work as expected: http://jsfiddle.net/Dimitar_jQWidgets/jwyb54ya/.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.