add styles validation form of modal

pandora_console/include/class/Diagnostics.class.php

@@ -1810,13 +1810,14 @@ class Diagnostics extends Wizard
             'id'        => 'div-what-happened',
             'class'     => 'flex-row',
             'arguments' => [
-                'name'    => 'what-happened',
+                'name'       => 'what-happened',
-                'type'    => 'textarea',
+                'type'       => 'textarea',
-                'value'   => '',
+                'value'      => '',
-                'return'  => true,
+                'return'     => true,
-                'rows'    => 1,
+                'rows'       => 1,
-                'columns' => 1,
+                'columns'    => 1,
-                'size'    => 25,
+                'size'       => 25,
+                'attributes' => 'required="required"',
             ],
         ];
 
@@ -1827,7 +1828,7 @@ class Diagnostics extends Wizard
                 'name'     => 'email',
                 'id'       => 'email',
                 'type'     => 'email',
-                'size'     => 40,
+                'size'     => 42,
                 'required' => 'required',
             ],
         ];

pandora_console/include/javascript/pandora.js

@@ -1959,10 +1959,16 @@ function load_modal(settings) {
               formdata.append("method", settings.onsubmit.method);
 
               var flagError = false;
+
               $("#" + settings.form + " :input").each(function() {
                 if (this.checkValidity() === false) {
-                  // TODO: Tooltip msg.
+                  $(this).prop("title", this.validationMessage);
-                  console.log(this.validationMessage);
+                  $(this).tooltip({
+                    tooltipClass: "uitooltip",
+                    position: { my: "right bottom", at: "right bottom" },
+                    show: { duration: 200 }
+                  });
+                  $(this).tooltip("open");
                   flagError = true;
                 }
 

pandora_console/include/styles/discovery.css

@@ -205,6 +205,7 @@ label {
 }
 
 li > input[type="text"],
+li > input[type="email"],
 li > input[type="password"],
 .discovery_text_input > input[type="password"],
 .discovery_text_input > input[type="text"],
@@ -270,3 +271,29 @@ a.ext_link {
   margin-left: 1em;
   font-size: 8pt;
 }
+
+input:invalid,
+input[type="email"]:invalid {
+  border-bottom-color: #fb4444;
+}
+
+textarea:invalid {
+  border-color: #fb4444;
+}
+
+div.ui-tooltip.ui-corner-all.ui-widget-shadow.ui-widget.ui-widget-content.uitooltip {
+  background: grey;
+  opacity: 0.9;
+  border-radius: 4px;
+  box-shadow: 0 0 0px #fff;
+  padding: 6px;
+}
+
+.ui-tooltip-content {
+  background: transparent;
+  color: #fff;
+  font-weight: bold;
+  font-family: "lato-lighter", "Open Sans", sans-serif;
+  letter-spacing: 0.03pt;
+  font-size: 8pt;
+}

pandora_console/include/styles/pandora.css

@@ -5910,7 +5910,3 @@ table.table_modal_alternate tr td:first-child {
 .flot-text {
   width: 101%;
 }
-
-input:invalid {
-  border-color: #c00;
-}