html - Required attribute in multi step form

Question

I have used a multistep form and I am using "required" attribute in some of the input fields. As such

<input type="text" placeholder="Full name" id="name" name="name" required="Please enter your full name">

The user fills one form and clicks next and after three nexts he can submit.

But the required attribute triggers only when the I click the submit button.I want the user to fill all the fields before he clicks next on the form. By that I mean that the required must trigger on the next button.

标签： htmlformssubmit

Answer 1

You can run an function to check if the input field is empty, then add the required attribute to the input element.

Example code:

function checkValue() {
    	var name = document.getElementById("name");
        if(name.value === "") {
          var att = document.createAttribute("required");
          name.setAttributeNode(att);
        }
    }

<form>
  <input type="text" placeholder="Full name" id="name" name="name">
  <button onclick = "checkValue()">Next</button>
</form>

Hope this helps !