多步骤表单需要某些字段才能转到下一步

Question

我试图在移动到下一页字段之前需要某些字段，以分解更长的表单。在这个例子中，我只想在移动到另一组字段之前需要电子邮件，而不是第一个或最后一个。我无法得到错误消息来表明我想要并已经完成了这个例子：多步骤形式的必需属性。

谢谢你的帮助。

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

删除下一个按钮上的类型

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>