diff --git a/js/custom.js b/js/custom.js
index b938556d..6fd77882 100644
--- a/js/custom.js
+++ b/js/custom.js
@@ -213,6 +213,19 @@ $(document).on("click", ".js-toggle-password", function(e) {
     }
 });
 
+$(document).on("keyup", ".js-validate-psk", function(e) {
+    var field  = $(e.target);
+    var colors = field.data("colors").split(",");
+    var target = $(field.data("target"));
+    if (field.val().length < 8 || field.val().length > 63) {
+        field.css("backgroundColor", colors[0]);
+        target.attr("disabled", true);
+    } else {
+        field.css("backgroundColor", colors[1]);
+        target.attr("disabled", false);
+    }
+});
+
 $(document)
     .ajaxSend(setCSRFTokenHeader)
     .ready(contentLoaded)
diff --git a/templates/wifi_stations.php b/templates/wifi_stations.php
index 1c2b7542..7d4f48fa 100644
--- a/templates/wifi_stations.php
+++ b/templates/wifi_stations.php
@@ -67,7 +67,7 @@
             <?php if ($network['protocol'] === 'Open') { ?>
               <input type="password" disabled class="form-control" aria-describedby="passphrase" name="passphrase<?php echo $index ?>" value="" />
             <?php } else { ?>
-              <input type="password" class="form-control" aria-describedby="passphrase" name="passphrase<?php echo $index ?>" value="<?php echo $network['passphrase'] ?>" onKeyUp="CheckPSK(this, 'update<?php echo $index?>')" >
+              <input type="password" class="form-control js-validate-psk" aria-describedby="passphrase" name="passphrase<?php echo $index ?>" value="<?php echo $network['passphrase'] ?>" data-target="#update<?php echo $index ?>" data-colors="#ffd0d0,#d0ffd0">
               <span class="input-group-btn">
                 <button class="btn btn-default js-toggle-password" type="button" data-target="[name=passphrase<?php echo $index ?>]" data-toggle-with="<?php echo _("Hide") ?>">Show</button>
               </span>