使用jQuery检查文本输入并使第二个文本成为必需

我正试图让jQuery强制我的

时间

字段可见，如果

电话

字段包含任何文本，则该字段是必需的。基本上，一旦用户开始填写

Phone

字段，我希望下一个字段

（时间）

出现

<form id="contact-form" method="POST" target="files/contact.php">
  <label for="full_name">Your Name: </label><input type="text" name="full_name" required="required" /><br />
  <label for="phone">Phone Number: </label><input type="text" id="phone" name="phone" /><br />
  <div id="time">
    <label for="time">Best time to call: </label><input type="text" name="time" /><br />
  </div>
  <input type="submit" name="submit" class="submit-btn" />
</form>

演示->

使用

.on（键控，myFunction）

演示->

使用

.on（键控，myFunction）

---

如果问题中没有关于此插件的内容，请不要在问题上加标签。编辑。否则，请编辑问题以包含一个。代码笔很好，但不能代替包含实际代码。谢谢。如果问题中没有关于此插件的内容，请不要在问题上加标签。编辑。否则，请编辑问题以包含一个。代码笔很好，但不能代替包含实际代码。谢谢，谢谢！我查看了我们的演示，效果很好。尽管如此，当我将

#time

留空时尝试提交表单时，它仍然会提交。我假设我的

$（“#time”）.addClass（'required'）不起作用？@flipnotic-我相应地更新了答案。。现在就去看看。。伟大的很高兴为您效劳，谢谢！我查看了我们的演示，效果很好。尽管如此，当我将
#time
留空时尝试提交表单时，它仍然会提交。我假设我的
$（“#time”）.addClass（'required'）不起作用？@flipnotic-我相应地更新了答案。。现在就去看看。。伟大的很乐意帮忙
$(document).ready(function() {
  $("#time").hide();
});

var inp = $("#phone").val();
if ($.trim(inp).length > 0) {
  $("#time").show();
  $("#time").addClass('required');
}

$(document).ready(function() {
  $("#time").hide();
});

$('#phone').on("keyup", function() {
  if (this.value.length > 0) {
    $("#time").show();
    $("#time").find("[name=time]").attr('required', 'required');
  } else {
    $("#time").hide();
  }
});