informar cuándo el formulario es inválido

app/assets/javascripts/validation.js

@@ -8,10 +8,14 @@ $(document).on('turbolinks:load', function() {
 
   $('.submit-post').click(function(e) {
     var form = $(this).parents('form.form');
+    var invalid_help = $('.invalid_help');
+
+    invalid_help.addClass('d-none');
 
     if (form[0].checkValidity() === false) {
       e.preventDefault();
       e.stopPropagation();
+      invalid_help.removeClass('d-none');
     }
 
     form.addClass('was-validated');

app/views/posts/_form.haml

@@ -23,6 +23,7 @@
   = hidden_field_tag 'template', params[:template]
   .form-group
     = submit_tag t('posts.save'), class: 'btn btn-success submit-post'
+    .invalid_help.alert.alert-danger.d-none= @site.config.dig('invalid_help') || t('posts.invalid_help')
   - if current_user.is_a? Usuaria
     .form-group
       = label_tag 'post_author', t('posts.author')
@@ -125,5 +126,6 @@
       .invalid-feedback= t('posts.invalid')
   .form-group
     = submit_tag t('posts.save'), class: 'btn btn-success submit-post'
+    .invalid_help.alert.alert-danger.d-none= @site.config.dig('invalid_help') || t('posts.invalid_help')
 - if post = @post.template.get_front_matter('post')
   = render 'layouts/help', help: CommonMarker.render_doc(post).to_html

config/locales/en.yml

@@ -241,3 +241,4 @@ en:
     image:
       multiple: 'You can select several images'
     url: 'The address must start with http:// or https://'
+    invalid_help: It looks like the form is incomplete.  Check the red-colored fields to complete it.

config/locales/es.yml

@@ -248,3 +248,4 @@ es:
     image:
       multiple: 'Puedes seleccionar varias imágenes'
     url: 'La dirección debe comenzar con http:// o https://'
+    invalid_help: Parece que el formulario no está completo.  Verifica los campos marcados en rojo para completarlo.