多步骤表格需要某些字段到 Go 到下一步

Question

I am trying to require certain fields before moving to the next page of fields to break up a longer form. In this example i just want email, not first or last to be required before moving to the next set of fields. I cannot get the error message to show that i want and have been working off of this example: Required attribute in multi step form .

Thank you for any help.

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

 <form> <div class="tab">Personal Information <p><input placeholder="First name" name="first" oninput="this.className = ''"></p> <p><input placeholder="Last name" ></p> <p><input placeholder="Email" required="required" id="email" name="email" required="required" ></p> </div> <div style="overflow:auto;"> <div style="float:right;"> <button type="button" id="prevBtn">Previous</button> <button type="button" id="nextBtn" style="color:#ffffff" onclick="checkValue();" >Next</button> </div> </div> </form>

Answer 1

remove the type on the next button

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

 <form> <div class="tab">Personal Information <p><input placeholder="First name" name="first" oninput="this.className = ''"></p> <p><input placeholder="Last name" ></p> <p><input placeholder="Email" id="email" name="email" ></p> </div> <div style="overflow:auto;"> <div style="float:right;"> <button type="button" id="prevBtn">Previous</button> <button id="nextBtn" style="color:#ffffff" onclick="checkValue();" >Next</button> </div> </div> </form>