Limit value sent to API

Dominic wells 0
Viewed 39

I want to limit the value a user can send to an API, for example, Users can only send the value of 30

By using minlength="" maxlength="" I can limit the number of chars typed but I cannot, for example, stop the user from entering 9999999 and overloading the results or not getting a result.

<input type="number" id="passlen" class="pass-len-box" min="4" max="20" placeholder="Enter password length"
        required>

Using type="number" will stop user inputting Text but it will still pass lower values (min="5" max="20") I can still pass 1,2,3,4, and 1234

 <input id="passlen" class="pass-len-box" minlength="3" maxlength="20" placeholder="Enter password length"
        required>
      <button class="generatorPass" id="genratorPass">Generate</button>
      <p id="dispPassword"></p>


document.querySelector("#genratorPass").addEventListener("click", () => {
  const user_input_text = document.querySelector("#passlen");
  request(
    user_input_text
  );
});

const passworldEl = document.getElementById("dispPassword");

request = (
  user_input_text,
 
) => {
  let url = `https://passwordwolf.com/api/?length=${user_input_text.value}&repeat=1`;
  fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {
      for (let { password } of responseJson) {
        const apipass = document.createElement("p");
        apipass.innerText = password;
        document.querySelector("#dispPassword").innerHTML = password;
        console.log(password);
      }
    });
};
fetch api javascript html
1 Answers

Try this out in your code:

As for your the description, you do want number that is greater then 30 to be displayed to user in input box. This code will help restrict user input to 30.

  var input = document.querySelector("input");
  var state = { value: input.value };
  input.addEventListener("input", function (event) {
    if (input.value < 31 || event.key == "Backspace") {
      state.value = input.value;
    } else {
      document.getElementById("alert").innerHTML =
        "Alert !! Invalid Input : " + input.value;
      input.value = state.value;
    }
  });
  <input type="text" placeholder="Enter password length" />
  <h2>Input value less then 31 will be accepted</h2>
  <p id="alert" style="color:maroon"></p>

Omkar Pattanaik0
Related