Having trouble with the "required" attribute

HTML-CSS
1

When I click the button without the input being filled in, it runs the code even though my input element has the “required” attribute. I’ve added the form attribute to my button but it didn’t solve the issue.

<form id="input-form">
        <input id="text-input" placeholder="Palindrome?" required/>
        <button type="button" id="check-btn" form="input-form"><strong>Check</strong></button>
      </form>

Here’s the JavaScript event listener that’s linked to the button in case that has something to do with the issue at hand. When I comment out my JavaScript code and click the button, there are no error messages letting me know the input field is required.

form.addEventListener("click", function() {
  strBefore = inputText;
  putTogether();
});

I’m creating this in Codepen at the moment, so let me know if there’s additional code you’d like to see. Also, this is my first post to the forums, so let me know if there’s something wrong with the way I’m submitting this.

2

type="button" doesn’t trigger form validation as it’s not of type submit, it will be just a normal button.

The attribute form="input-form" is unnecessary, since that button is already inside the <form> element.

Can you share your full code ?
Because the naming for the variable confuses me a bit, form for the button element ?

3 
<html lang="en">
  
  <head>
    <title>Palindrome Checker</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="palindrome">
    <meta name="author" content="Brenden Howlett">
  </head>
  
<body>
  <h1>Is this a Palindrome?</h1>
  <div id="input-box">
    <p id="instructions" required>Check your word or phrase below to see if it's a palindrome. Keep in mind, this is case sensitive.</p>
    <div id="input-container">
      <form id="input-form">
        <input id="text-input" placeholder="Palindrome?" required/>
        <button type="button" id="check-btn" form="input-form"><strong>Check</strong></button>
      </form>
    </div>
    <p id="result"></p>
  </div>
  <div id="info-box">
    <p id="what-info">A palindrome is a word, phrase, or sequence that reads the same backward as forward, e.g., <em>madam</em> or <em>nurses run</em>.</p>
  </div>
</body>

Here’s the JavaScript

const checkButton = document.getElementById("check-btn");
const userInput = document.getElementById("text-input");
form = document.getElementById("input-form");
const inputText = userInput.value;
const resultMessage = document.getElementById("result");
let isPalindrome = false;
let strBefore = "";
let strAfter = "";

function cleanInputString(str) {
  const regex = /\s+/g;
  return str = str.replace(regex, "");
};

function reverseInput(str) {
  strAfter = str.split("").reverse().join("");
  return strAfter;
};

function testIfPalindrome(str) {
  if (str == strAfter) {
    return isPalindrome = true;
  } else {
    return;
  }
};

function responseMessage() {
  if (isPalindrome) {
    return resultMessage.innerText = `${strBefore} is a palindrome`;
  } else {
    return resultMessage.innerText = strBefore + " isn't a palindrome.";
  }
}

//This function runs the input text through each step
function putTogether() {
  let cleanStr = strBefore;
  cleanStr = cleanInputString(cleanStr);
reverseInput(cleanStr);
  testIfPalindrome(cleanStr);
  return responseMessage();
}

form.addEventListener("click", function() {
  strBefore = inputText;
  putTogether();
});
4

It took me a lot of searching to find an answer to my problem. When I had the button with the type="search" attribute, the required attribute would work, but I kept getting the “404” error whenever I tried to submit with my input form filled in. I had to keep reloading my page. When I changed it to type=button, I could get the function to work without the “404” error, but the required attribute wouldn’t work. I found the solution to this was to code it into the button event listener function itself. Here’s how the code looks now:

checkButton.addEventListener("click", function() {
  strBefore = userInput.value;
  if (strBefore !== "") {
  putTogether();
  isPalindrome = false;
  return;
  } else {
    alert("Please fill in the required field.");
  } 
});

This solution functions the same for me as the required attribute. I am open to hearing how you would’ve handled this if you have a different idea/process.

I also took your advice about the redundancies and removed them from my code.

5

Your approach is correct for using a normal button with an input field and you’re manually controlling the validation in the button’s click event.

If you want it to work as a form validation, you need a button that submits the form to trigger the validation.

Use type="submit" for your button and it will work as you expected.
To prevent the submitting ( which causes the 404 error ), you should listen for the submit event of your form and use preventDefault() method to prevent the submitting.

Example:

form.addEventListener("submit", function(event) {
 event.preventDefault();    // This will disable the submit action but still triggers validation
 alert("Your data is validated!");
}

If you changed the button for type="submit", you can safely remove the click listener for it and instead use the submit listener for your form and use the putTogether function directly but with preventing the submit action as in the example.

you may still need to add this line strBefore = userInput.value; in your putTogether function.

Additional Resources:
W3schools, MDN

1 Like