jQuery UI Widgets Forums Editors Editor Validate jqxEditor

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • 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

    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/

    Validate jqxEditor #73519

    rubim.shrestha
    Participant

    Hello Dimitar,

    Thanks for your response….

    Rubim

    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

    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/

    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?

    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/

    Validate jqxEditor #89264

    silvano.alda
    Participant

    Great!
    Thank you very much!

    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

    • This reply was modified 4 years, 5 months ago by  silvano.alda.
    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/

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

You must be logged in to reply to this topic.