I wanted to validate two input fields with a button

Question

I wanted to validate two input fields with a button

Navigation

#1 by (0 votes)

1

I am master of an RPG game and I made a puzzle with a website. In this puzzle is to discover two numbers and then find out if they are correct and after redirecting the players to another page. And I've tried everything that's singing how to do. Anyone who knows more could help me? Here is the page source, and I just wanted to know how I can do it. Thanks for the help

(I know it only has html, but if you have a solution in javascript, jquery or css or whatever it may be, if you have not made it clear.)

<!DOCTYPE html>
<html>

<head>
    <title>clock</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div id="clock1">
        <form>
            <input type="text" id="num1" maxlength="2" style="width: 65px; height: 60px; font-size: 50px;"> :
            <input type="text" id="num2" maxlength="2" style="width: 65px; height: 60px; font-size: 50px;"><br>
            <div id="num3">
            <button>Try it!</button>
            </div>
        </form>
    </div>
</body>

</html>

html input

asked by anonymous 20.08.2017 / 21:07

1 answer

Expandable ListView is not being made capture excel formula with php

score 0 · Accepted Answer

Well, the disadvantage of doing javascript validation is that if your players are a little cheeky, they can view the source code of the page and see the numbers. Well, the solution is easy! You will have to make a condition where the 2 numbers are the same as the numbers you want. I'll do with jQuery!

In the example, I set the number 1 to 10 and the 2 to 14!

$("#validar").click(function() {
  var num1 = $("#num1").val();
  var num2 = $("#num2").val();
  if (num1 == "10" && num2 == "14") {
    alert("acertou");
    window.location.href = "https://pt.stackoverflow.com/posts/230642";
  } else {
    alert("os números estão incorretos");
    $("#num1").val("");
    $("#num2").val("");
  }
});

<!DOCTYPE html>
<html>

<head>
  <title>clock</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head><body><divid="clock1">
    <form>
      <input type="text" id="num1" maxlength="2" style="width: 65px; height: 60px; font-size: 50px;"> :
      <input type="text" id="num2" maxlength="2" style="width: 65px; height: 60px; font-size: 50px;"><br>
      <div id="num3">
        <button id="validar">Try it!</button>
      </div>
    </form>
  </div>
</body>

</html>