1 files changed, 35 insertions, 18 deletions

diff --git a/_tools/ascii-hex.md b/_tools/ascii-hex.md
index 42d4311..ef0d8ef 100644
--- a/_tools/ascii-hex.md
+++ b/_tools/ascii-hex.md
@@ -7,10 +7,13 @@ layout: default
 ---
 
 <h1>ASCII To Hex</h1>
-<form id="ascii-to-hex">
+<form id="ascii-to-hex" novalidate>
     <div class="form-floating mb-3">
-        <input type="text" class="form-control" placeholder="ASCII" name="ascii-to-hex" id="ascii-to-hex"    >
+        <input type="text" class="form-control" placeholder="ASCII" name="ascii-to-hex" id="ascii-to-hex" required>
         <label for="ascii-to-hex">ASCII</label>
+        <div class="invalid-feedback">
+            Please provide a valid input text.
+        </div>
     </div>
     <div class="form-floating mb-3">
         <input type="text" class="form-control" placeholder="Glue" name="ascii-to-hex-glue" id="ascii-to-hex-glue" value=" ">
@@ -25,10 +28,13 @@ layout: default
     </div>
 </form>
 <h1>Hex To ASCII</h1>
-<form id="hex-to-ascii">
+<form id="hex-to-ascii" novalidate>
     <div class="form-floating mb-3">
-        <input type="text" class="form-control" placeholder="HEX" name="hex-to-ascii" id="hex-to-ascii">
+        <input type="text" class="form-control" placeholder="HEX" name="hex-to-ascii" id="hex-to-ascii" required>
         <label for="hex-to-ascii">HEX</label>
+        <div class="invalid-feedback">
+            Please provide a valid input text.
+        </div>
     </div>
     <div class="form-floating mb-3">
         <input type="text" class="form-control" placeholder="Separator" name="hex-to-ascii-separator" id="hex-to-ascii-separator" value=" ">
@@ -53,24 +59,35 @@ layout: default
 
     var asciiToHexForm = document.getElementById('ascii-to-hex');
     asciiToHexForm.addEventListener('submit',(event) => {
-        event.preventDefault();
-        var fomrdata = new FormData(asciiToHexForm);
-        var str = fomrdata.get('ascii-to-hex');
-        var glue = fomrdata.get('ascii-to-hex-glue');
-        var prefixi = glue !== "" ? "0x" : "";
-        var prefix = glue === "" ? "0x" : "";
-        var hex = prefix + ([...str].map((elem, n) => prefixi+Number(str.charCodeAt(n)).toString(16)).join(glue));
-        document.getElementById('hex-result').value = hex;
+        if (!asciiToHexForm.checkValidity()) {
+            event.preventDefault();
+        } else {
+            event.preventDefault();
+            var fomrdata = new FormData(asciiToHexForm);
+            var str = fomrdata.get('ascii-to-hex');
+            var glue = fomrdata.get('ascii-to-hex-glue');
+            var prefixi = glue !== "" ? "0x" : "";
+            var prefix = glue === "" ? "0x" : "";
+            var hex = prefix + ([...str].map((elem, n) => prefixi+Number(str.charCodeAt(n)).toString(16)).join(glue));
+            document.getElementById('hex-result').value = hex;
+        }
+        [...asciiToHexForm.elements].map(e => e.parentNode).forEach(e => e.classList.toggle('was-validated', true));
     });
 
     var hexToAsciiForm = document.getElementById('hex-to-ascii');
     hexToAsciiForm.addEventListener('submit',(event) => {
-        event.preventDefault();
-        var fomrdata = new FormData(hexToAsciiForm);
-        var str = fomrdata.get('hex-to-ascii');
-        var separator = fomrdata.get('hex-to-ascii-separator');
-        var ascii = separator === "" ? getChunks(str.substring(2),2).map(el => String.fromCharCode(parseInt(el, 16))).join('') : str.split(separator).map(el => String.fromCharCode(Number(el))).join('');
-        document.getElementById('ascii-result').value = ascii;
+        if (!hexToAsciiForm.checkValidity()) {
+            event.preventDefault();
+        } else {
+            event.preventDefault();
+            var fomrdata = new FormData(hexToAsciiForm);
+            var str = fomrdata.get('hex-to-ascii');
+            var separator = fomrdata.get('hex-to-ascii-separator');
+            var ascii = separator === "" ? getChunks(str.substring(2),2).map(el => String.fromCharCode(parseInt(el, 16))).join('') : str.split(separator).map(el => String.fromCharCode(Number(el))).join('');
+            document.getElementById('ascii-result').value = ascii;
+        }
+        [...hexToAsciiForm.elements].map(e => e.parentNode).forEach(e => e.classList.toggle('was-validated', true));
+        
     });
     
 </script>