我真的不知道如何问这个，但我会尝试。
我有一个HTML注册表单，其中包含几个字段：用户名，密码，电子邮件......我还有一个带3个选项的单选按钮。第一个是好的，因为它没有启用其他任何东西。
其他2个选项可启用2个不同的部分。实际上，每个都显示额外的字段。选项2显示了该选项必需的2个额外字段。
选项3显示5个字段，其中2个是必填字段（与选项2中的2个字段相同）。
我在表单中有验证但我不知道如何处理选项2和3的2个必填字段，因为如果我强制要求，我不能发送带有选项1的表单。如果我不要强制要求，我可以在选项2和3中将这两个字段的表格发送空白。
知道我该怎么办？我将尝试解释我的表单结构：
用户名（必填） 密码（必填） 电子邮件（必填）
带3个选项的单选按钮：
选项1（默认选中） 选项2（一旦检查显示:) 地址（强制性） 电话（必填） 选项3（一旦检查显示:) 地址（强制性） 电话（必填） 移动（可选） 城市（可选） 邮政编码（可选） 提交按钮
提前多多感谢！
代码：
<form action="signUp.php" method="post" id="reg" name="reg">
<h2>Registration</h2>
<p>
<div class="cabeceraFormulario">Personal data</div>
</p>
<p>
<label for="username" class="floatLabel">Username</label>
<input id="username" name="username" type="text" onkeyup="checkAvailability();"><span class="liveValidation" id="user-availability-status"></span>
</p>
<p>
<label for="email" class="floatLabel">Email</label>
<input id="email" type="text" class="keyup-email text-input" name="email" placeholder="We'll send you a mail to verify your account" onkeyup="checkAvailability();">
<span class="liveValidation" id="email-availability-status"></span>
</p>
<p>
<label for="password" class="floatLabel">Password</label>
<input id="password" name="password" type="password">
<span>Min: 8, Max: 18</span>
</p>
<p>
<label for="confirm_password" class="floatLabel">Confirm Password</label>
<input id="confirm_password" name="confirm_password" type="password">
<span>Password don't match</span>
</p>
<div class="cabeceraFormulario">Type of Account</div>
<div class="container">
<ul>
<li>
<input type="radio" id="1" name="selector" value="1" onclick="javascript:tipoCuenta();" checked>
<label for="1">Option 1</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="2" name="selector" value="2" onclick="javascript:tipoCuenta();">
<label for="2">Option 2</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="3" name="selector" value="3" onclick="javascript:tipoCuenta();">
<label for="3">Option 3</label>
<span id="radioError"></span>
<div class="check"></div>
</li>
</ul>
</label>
</div>
</div>
<div id="option2Form" style="display:none">
<div class="cabeceraFormulario">Option 2</div>
<p>
<label for="address" class="floatLabel">Address</label>
<input id="address" name="address" type="text" onkeyup="checkAvailability();"><span class="liveValidation" id="address-availability-status"></span>
</p>
<p>
<label for="phone" class="floatLabel">Phone</label>
<input id="phone" name="phone" type="text">
<span>Only numbers</span>
</p>
</div>
<div id="option3Form" style="display:none">
<div class="cabeceraFormulario">Option 3</div>
<p>
<label for="address1" class="floatLabel">Address</label>
<input id="address1" name="address1" type="text" onkeyup="checkAvailability();"><span class="liveValidation" id="address1-availability-status"></span>
</p>
<p>
<label for="phone1" class="floatLabel">Phone</label>
<input id="phone1" name="phone1" type="type">
<span>Only numbers</span>
</p>
<p>
<label for="mobile" class="floatLabel">Mobile</label>
<input id="mobile" name="mobile" type="text">
<span>Only numbers</span>
</p>
<p>
<label for="city" class="floatLabel">City</label>
<input id="city" name="city" type="text">
</p>
</div>
<p>
<input type="submit" value="createAccount" id="submit">
</p>
</form>
使用Javascript：
function tipoCuenta()
{
if (document.getElementById('2').checked)
{
document.getElementById('option2Form').style.display = 'block';
}else document.getElementById('option2Form').style.display = 'none';
if (document.getElementById('3').checked)
{
document.getElementById('option3Form').style.display = 'block';
}else document.getElementById('option3Form').style.display = 'none';
}
我刚刚将这两个文件包含在内，因为其他文件不相关（我认为）。这段代码工作得非常好，但正如我所解释的那样。当我选择选项2时，通过填写用户名，密码和电子邮件（由3个选项共享），我可以发送表格，虽然地址和电话也必须填写（对我来说是强制性的）。我想我只想问是否有办法做我想做的事。
谢谢！
新尝试：
function validateFields() {
if (document.getElementById("option2").checked) {
var inpObj = document.getElementById("address");
if (inpObj.checkValidity() == true) {
document.getElementById("demo").innerHTML = "Please enter your address.";
return false;
} else {
document.getElementById("demo").innerHTML = "Input OK";
return true;
}
}
}
<input type="submit" value="create my account" id="submit" onclick="return validateFields();">
使用此选项，如果字段地址为空，则会显示消息并且不会发送表单，但是，如果我输入内容，表单将不会被发送，并且之前的错误消息将保留在屏幕中。