Textarea required attribut не работает в javascript

Question

Я использую Модальный диалог Bootstrap, чтобы мои клиенты предлагали мне свои мнения, & Я хочу сделать сообщение Textarea по мере необходимости, но это не сработает, можете ли вы пожалуйста, посмотрите и посоветуйте где здесь ошибка:

HTML файл:

<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 файл:

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

Answer 1

На обратном вызове BootStrapDialog, вы можете проверить, если текст зона пуста

https://jsfiddle.net/9n7Ld0nk/

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