Untitled

<!DOCTYPE html>
<html>

<head>
  <title>Validation</title>
  <style>
    /*buat style tombol silahkan jadi hide /none*/

    #tes {
      display: none;

    }

    .captcha {
      font: italic bold 16px "Comic Sans MS", cursive, sans-serif;
      color: #9e9797;
      background-color: #bbb2b2;
      width: 100px;
      border-radius: 5px;
      text-align: center;
      text-decoration: line-through;
    }

    .center {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center
    }

    .errmsg {
      color: #ff0000;
    }
  </style>
  <script>
    function pindah(url) {
      window.location = url;
    }

    var captcha = new Array();

    function validateRecaptcha() {
      var recaptcha = document.getElementById("recaptcha").value;;
      var validRecaptcha = 0;
      for (var z = 0; z < 6; z++) {
        if (recaptcha.charAt(z) != captcha[z]) {
          validRecaptcha++;
        }
      }
      if (recaptcha == "") {
        document.getElementById('errCaptcha').innerHTML = 'Must be Filled';
      } else if (validRecaptcha > 0 || recaptcha.length > 6) {
        document.getElementById('errCaptcha').innerHTML = 'Incorrect';
      } else {
        document.getElementById('errCaptcha').innerHTML = 'Correct';
      }
      // cek validasi caprcha
      if (recaptcha = validRecaptcha) {
        document.getElementById('tes').style.display = 'none';
      } else {
        document.getElementById('tes').style.display = 'block';
      }
    }
    var hidden = false;

    function createCaptcha() {
      for (q = 0; q < 6; q++) {
        if (q % 2 == 0) {
          captcha[q] = String.fromCharCode(Math.floor((Math.random() * 26) + 65));
        } else {
          captcha[q] = Math.floor((Math.random() * 10) + 0);
        }
      }
      thecaptcha = captcha.join("");
      document.getElementById('captcha').innerHTML =
        "<span class='captcha'> " + thecaptcha + " </span>" + "&nbsp; <a onclick='createCaptcha()' href='#'>Change Code</a>";
    }
  </script>
</head>

<body>
  <div class='center'>
    <table>
      <tr>
        <td>CODE : </td>
        <td id="captcha">
          <script>
            createCaptcha();
          </script>
        </td>
      </tr>
      <tr>
        <td>TYPE :</td>
        <td><input type="text" name="recaptcha" id="recaptcha" placeholder="enter code" /></td>
        <td id="errCaptcha" class="errmsg"></td>
        <td colspan="2" style="text-align:right;">
          <input type="button" value="Submit" onClick="validateRecaptcha()" />
      </tr>
    </table>
    </br>
    <td id="errCaptcha" class="errmsg"></td><input type="button" id="tes" onclick="pindah('http://www.google.com')" value="Silahkan" <br/>
    </br>
  </div>
</body>

</html>