Textarea required attribut does not work in javascript

I'm using a Bootstrap Modal Dialog to let my clients suggest on me their opinions, & I want to make the Textarea of the message as required, but it does not work, can you please have a look and advise where is the mistake here :

HTML file :

<ul class="nav navbar-nav">
    <li><button type="button" class="btn btn-link" id="suggestion">Please let us know if you have any suggestions to
            improve our service to you.</button>
    </li>
</ul>

Javascript file :

<script>

        $('#suggestion').click(function () {


            BootstrapDialog.show({
                title: 'Suggestion Box',
                message: $('<textarea rows="10" class="form-control" id="suggested_message" placeholder="Please make your suggestions" maxlength="10" required></textarea>'),
                buttons: [{
                    label: 'Submit',
                    cssClass: 'btn-primary',
                    hotkey: 13, // Enter.
                    action: function(dialogRef) {
                        $.ajax({
                            type : "POST",
                            data : { 'message': $('#suggested-message').val()},
                            url : "{{ path('service_tool_suggest') }}",
                            success :
                                    BootstrapDialog.alert('Your message has been received, it will be considered as soon as possible')    
                    })

                        dialogRef.close()
                    }
                }]
            });
        })
</script>

On the BootStrapDialog callback, you can test if the text-area is empty

https://jsfiddle.net/9n7Ld0nk/

        //test value of text-area (TODO blank spaces, etc)
        if (suggestedMessageTextArea.value.length === 0) {
          BootstrapDialog.alert('empty area');
        } else {
          $.ajax({...});
        }