Javascript 如果表单字段为空且带有HTML必需属性，则阻止函数运行_Javascript_Html

Javascript 如果表单字段为空且带有HTML必需属性，则阻止函数运行

javascript html

Javascript 如果表单字段为空且带有HTML必需属性，则阻止函数运行,javascript,html,Javascript,Html,我在输入字段上使用HTML“required”字段属性。同时，我有一个功能，点击“下一步”按钮显示下一个表单字段。表单验证工作正常，但单击“下一步”按钮时仍会显示以下表单字段，这显然是我不想显示的我想使用简单和最低数量的代码 <head> <style> #tab2{ display: none; } </style> <script> function show(){ document.getElementById("tab2").style

我在输入字段上使用HTML“required”字段属性。同时，我有一个功能，点击“下一步”按钮显示下一个表单字段。表单验证工作正常，但单击“下一步”按钮时仍会显示以下表单字段，这显然是我不想显示的

我想使用简单和最低数量的代码

<head>
<style> 
#tab2{
display: none;
}
</style>
<script>
function show(){
document.getElementById("tab2").style.display="block";
}
</script>
</head>
<body>
<form>
<div id="tab1">
<input type="text" id="urname" placeholder="Your Name" required><br>
<button onclick="show()">Next</button>
</div>
<div id="tab2">
<input type="text" id="urname" placeholder="Your School Name" required><br>
<button>Next</button>
</div>
</form> 
</body>


#表2{
显示：无；
}
函数show（）{
document.getElementById（“tab2”）.style.display=“block”；
}


下一个


下一个

我想用最简单和最少的代码创建一个多步骤表单。

现在，您正在创建第二个输入显示块，而不考虑第一个输入的值，而是添加一个if语句来检查第一个输入的值，然后相应地更改第二个输入的显示属性

函数显示（）{
让urName=document.getElementById（'urName'）.value
if（urName）{
document.getElementById（“tab2”）.style.display=“block”；
}
}

#表2{
显示：无；
}




下一个


下一个