check ip

public/assets/js/script.js

@@ -14,10 +14,19 @@ let deleteEvent = (v, message, url) => {
   });
 };
 
-d.querySelectorAll('.js-group-btn-delete').forEach(v => {
+d.querySelectorAll(".js-group-btn-delete").forEach(v => {
   deleteEvent(v, "You're sure to delete this group?", "/groups/delete")
 });
 
 d.querySelectorAll(".js-server-btn-delete").forEach(v => {
   deleteEvent(v, "You're sure to delete this server?", "/servers/delete")
+});
+
+d.querySelector(".js-server-form-on-submit").addEventListener("submit", e=>{
+  let check_ip = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+  let ip = e.target.ip;
+  if (!check_ip.exec(ip.value)){
+    e.preventDefault()
+    ip.focus()
+  }
 });

src/templates/servers/add.tpl.php

@@ -1,7 +1,7 @@
 <?php
 require __DIR__ . '/../shared/head.php';
 ?>
-  <form action="" method="post" class="form">
+  <form action="" method="post" class="form js-server-form-on-submit">
     <div class="form__element form-element">
       <label class="form-element__label" for="name">Name:</label>
       <input type="text" value="" name="name" id="name"

src/templates/servers/edit.tpl.php

@@ -4,16 +4,16 @@ require __DIR__ . '/../shared/head.php';
 /** @var \MyApp\Model\ServersModel $model */
 $model = $this->model;
 ?>
-  <form action="" method="post" class="form">
+  <form action="" method="post" class="form js-server-form-on-submit">
     <div class="form__element form-element">
       <label class="form-element__label" for="name">Name:</label>
       <input type="text" value="<?= $model->getName() ?>" name="name" id="name"
              class="form-element__data">
     </div>
     <div class="form__element form-element">
-      <label class="form-element__label" for="ip">IP Ver. 4:</label>
+      <label class="form-element__label" for="ip">IP Ver. 4<sup>*</sup>:</label>
       <input type="text" value="<?= $model->getIp() ?>" name="ip" id="ip"
-             class="form-element__data">
+             class="form-element__data" required>
     </div>
     <div class="form__element form-element">
       <label class="form-element__label" for="group">Group:</label>