I wanted to validate two input fields with one button

Asked

Viewed 433 times

1

I am the master of a role-playing game and I made a riddle with a website. In this puzzle is to discover two numbers and then know if they are correct and after redirecting the players to another page. And I looked at everything that is corner how to do. Someone who knows more could help me? Here’s the source of the page, and just wanted to know how I can do it. Thanks for your help

(I know it only has html, but if you have a solution in javascript, jquery or css or you can, if you haven’t 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 validation input

1 answer

0


Well, the downside of validating with javascript is that if your players are a little bit clever, they can see the source code of the page and see the numbers. Well, but the solution is easy! You will have to make a condition, where the 2 numbers are equal to the desired numbers. I will do with jQuery!

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

$("#validar").click(function() {
  var num1 = $("#num1").val();
  var num2 = $("#num2").val();
  if (num1 == "10" && num2 == "14") {
    alert("acertou");
    window.location.href = "/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>
  <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 id="validar">Try it!</button>
      </div>
    </form>
  </div>
</body>

</html>

Browser other questions tagged html validation input

You are not signed in. Login or sign up in order to post.