How can I connect my HTML and JS files for my pin?-CodePudding

I have a school project where we make a security thing with physical(finger stuff), digital(pin), and wave(UWB stuff). And I tasked myself to make the pin. I got everything for the js and the html. But how do I connect them so that it can validate my pin?

function validatePIN(pin) {
var isNumber = /^\d $/.test(pin) && (pin.length == 4 || pin.length == 6)
return isNumber
}

validatePIN('1234')

//returns true

<!DOCTYPE html>
<html>
<head>
    <title>How to make a PIN</title>
</head>
    <h1>Hello World</h1>
<body1>

    <p1>This is the pin used to unlock the last step of the safe. Before this, you should have completed step 1. Where you are the owner of the
    Earrings. Hello Master.</p1>



</body1>

<body2>
    <p2>Now you are ready to unlock the next step. Just enter a 5 digit pin. It will only be 1 in 100000 chance. You can do it.</p2>
</body2>

<head>
ENTER PIN HERE!!!
</head>

<form>
    <input type="text" name="pin" pattern="[0-9]{4}" maxlength="4">
    <input type="submit" value="Validate">
</form>

</html>

CodePudding user response：

First of all, as a fellow user pointed out in the comments, your HTML is malformed and has tags that don't exist, so I took the liberty of fixing it. Also, you shouldn't have multiple <head>s or <body>s in an HTML document.

As for the form validation, all you need to do is bind the form submission with an HTML event called "onsubmit". Whenever the event fires, the JS validation function is going to execute and give you true or false based on the validation results. If it returns true, the form will be submitted. I have added all the code in the following snippet:

<!DOCTYPE html>
<html>

<head>
  <title>How to make a PIN</title>
</head>

<body>
  <h1>Hello World</h1>

  <p>This is the pin used to unlock the last step of the safe. Before this, you should have completed step 1. Where you are the owner of the Earrings. Hello Master.</p>

  <p>Now you are ready to unlock the next step. Just enter a 5 digit pin. It will only be 1 in 100000 chance. You can do it.</p>

  <form onsubmit="return validatePIN()">
    <h2>ENTER PIN HERE:</h2>
    <input id="pin_input" type="text" name="pin" pattern="[0-9]{4}" maxlength="4">
    <input type="submit" value="Validate">
  </form>

  <script>
    function validatePIN() {
      var pin = document.getElementById("pin_input").value;
      return /^\d $/.test(pin) && (pin.length == 4 || pin.length == 6);
    }
  </script>
</body>

</html>

Hope it helps. Cheers!

CodePudding user response：

Make a div and assign an ID to it. Then use:

document.getElementByID.InnerHTML = function validatePIN(pin) {
var isNumber = /^\d $/.test(pin) && (pin.length == 4 || pin.length == 6)
return isNumber
}

validatePIN('1234')