Fix Class button Server Selection

home/templates/admin/server_selection.html

@@ -2,14 +2,43 @@
 {% load i18n %}
 
 {% block content %}
-  <h1>{% trans "Seleccionar Servidor" %}</h1>
+<div class="container mt-4">
-  <form method="post" action="{% url 'admin:home_serverselection_changelist' %}">
+  <h1 class="mb-4">{% trans "Seleccionar Servidor" %}</h1>
+  <form method="post" action="{% url 'admin:home_serverselection_changelist' %}" class="needs-validation" novalidate>
     {% csrf_token %}
-    <select name="server_selection" required>
+    <div class="form-group">
+      <label for="serverSelection">{% trans "Seleccionar servidor" %}</label>
+      <select class="form-control" id="serverSelection" name="server_selection" required>
+        <option value="" disabled selected>{% trans "Elija un servidor" %}</option>
         {% for server in servers %}
           <option value="{{ server.0 }}">{{ server.1 }}</option>
         {% endfor %}
       </select>
-    <button type="submit">{% trans "Guardar selección" %}</button>
+      <div class="invalid-feedback">
+        {% trans "Debe seleccionar un servidor antes de continuar." %}
+      </div>
+    </div>
+    <div class="submit-row">
+      <input type="submit" value='{% trans "Guardar selección" %}' class="default" name="_save">
+    </div>
   </form>
+</div>
+<script>
+  // Validación de formulario con Bootstrap
+  (function () {
+    'use strict';
+    window.addEventListener('load', function () {
+      var forms = document.getElementsByClassName('needs-validation');
+      Array.prototype.filter.call(forms, function (form) {
+        form.addEventListener('submit', function (event) {
+          if (form.checkValidity() === false) {
+            event.preventDefault();
+            event.stopPropagation();
+          }
+          form.classList.add('was-validated');
+        }, false);
+      });
+    }, false);
+  })();
+</script>
 {% endblock %}