Kevin Powell - Community•16mo ago

Trying to add a minlength requirement to a DOM created html node - issues

Hey peeps, me again. Before i go into this, can I ask to the experienced devs, is creating a todo list where you have projects, and then tasks to be added/removed inside those projects with dates etc... is that difficult? because I am STRUGGLING massively with building this, and I feel like it should be easier. Anyway here's my up-to-date code: https://github.com/callum-laing/todo-list What I'm trying to do is have button to add new projects - a text field, a confirm button and a X to cancel the creation. So far it seems the buttons work at least and I can add project names.. however the minlength method is not working, so I can add a project with no name, or with 1-2 letters etc.. basically anything. Right now I'd settle for it forcing you to enter at least 1 character, so throwing up an error if you enter nothing. the original code for this before I changed it all to createElement/append etc is below:

    <div class="newProject">
                <form action="">
            <input type="text" id="newProjectText" required minlength="3">
            <button id="confirmProject">Confirm</button>
            <button id="cancelProject">X</button>
          </form>
      </div>`;

    <div class="newProject">
                <form action="">
            <input type="text" id="newProjectText" required minlength="3">
            <button id="confirmProject">Confirm</button>
            <button id="cancelProject">X</button>
          </form>
      </div>`;

Send help.

GitHub

GitHub - callum-laing/todo-list

Contribute to callum-laing/todo-list development by creating an account on GitHub.

13 Replies

Chris Bolson•16mo ago

You need to add the “required” attribute to your text field. You have it in the code above but it is not in the JavaScript.

CDLOP•16mo ago

you'd think so, I did that, still nothing.

const newProjText = document.createElement("input");
  newProjText.id = "newProjectText";
  newProjText.type = "text";
  newProjText.setAttribute("minlength", "3");
  newProjText.required = true;
  newProjForm.appendChild(newProjText);

const newProjText = document.createElement("input");
  newProjText.id = "newProjectText";
  newProjText.type = "text";
  newProjText.setAttribute("minlength", "3");
  newProjText.required = true;
  newProjForm.appendChild(newProjText);

Looks like required works if the below is commented out, but when its left in, it doesn't use required..

  const confirmProjectBtn = document.querySelector("#confirmProject");
  const cancelProjectBtn = document.querySelector("#cancelProject");

  const confirmProjectBtn = document.querySelector("#confirmProject");
  const cancelProjectBtn = document.querySelector("#cancelProject");

So the issue must be in here

const confirmProjectCallback = (e) => {
    e.preventDefault();
    const projectName = document.querySelector("#newProjectText").value;
    addProject(projectName);
    confirmProjectBtn.removeEventListener("click", confirmProjectCallback);
    cancelProjectBtn.removeEventListener("click", cancelProjectCallback);
    newProjectEl.innerHTML = "";
  };

const confirmProjectCallback = (e) => {
    e.preventDefault();
    const projectName = document.querySelector("#newProjectText").value;
    addProject(projectName);
    confirmProjectBtn.removeEventListener("click", confirmProjectCallback);
    cancelProjectBtn.removeEventListener("click", cancelProjectCallback);
    newProjectEl.innerHTML = "";
  };

Choo♚𝕂𝕚𝕟𝕘•16mo ago

When you preventDefault(), that doesn't only prevent the form submission. It also prevents the minlength check.

CDLOP•16mo ago

Thanks for that. I removed it but still seems to not want to work lol, I'm very confused haha

Choo♚𝕂𝕚𝕟𝕘•16mo ago

If you deliberately call the invalid() method on the input, does it show you the error message?

CDLOP•16mo ago

Nope I get nothing in the console at all, not even a warning, it just lets me create the name with either nothing "" or "a" etc... no requirement.

Choo♚𝕂𝕚𝕟𝕘•16mo ago

The invalid() method isn't supposed to show in the console. It shows directly in the form with a message about the input being too short. Also, my recommendation was to call invalid() immediately before the preventDefault()

CDLOP•16mo ago

Oh sorry, yes that works, however now the list seems to have vanished.

CDLOP•16mo ago

should look like so

Choo♚𝕂𝕚𝕟𝕘•16mo ago

What list? Did you put back the preventDefault()? You had removed it earlier and that can clear the inputs.

CDLOP•16mo ago

it gives me the error for less than 3 characters, but anything input and "confirmed", doesn't populate in the list a shown here

Choo♚𝕂𝕚𝕟𝕘•16mo ago

If calling invalid() works, you can try something like this:

if(!inp.checkValidity()) inp.invalid();

if(!inp.checkValidity()) inp.invalid();

With inp substituted by the variable name for your input. Note that this line goes immediately before the preventDefault(). It will not work if you put it after. You may also want to add an else to that. The addProject() shouldn't be called unless the input is valid.

CDLOP•16mo ago

Oh wow it actually works, amazing, thanks!

Gaming

Programming

Trying to add a minlength requirement to a DOM created html node - issues