我的应用程序中有两个HTML表单字段,一个显示下拉列表供用户 Select 是否超过18岁,第二个字段是家长姓名.

我只想在用户未满18岁时将parent_name字段设为required.以下是我当前的相应表单部件代码.

<div>
  <label for="over_18">Over 18?</label>
  <select id="over_18" required multiple>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select>
</div>

<div class="form-group">
  <label>Parent Name</label>
  <input type="parent_name" id="parent_name" required>
</div>

到目前为止,我已经创建了以下函数,但我无法理解如何使用它.

function updateRequirements() {
  var over_18 = document.getElementById('over_18').value;
  if (over_18 = 'No') {
    doccument.getElementById('parent_name').required = true;
  } else {
    doccument.getElementById('parent_name').required = false;
  }
}

Update:

如果第一个输入类型为date,如何获得相同的结果?因此,只有当第一次输入中提供的年龄小于18岁时,才需要第二次输入.

推荐答案

每次over_18 Select 更改时,都可以更新parent_name输入的required属性.

几点注意:

  • type="parent_name"无效,应该是type="text".
  • 我认为你在select上加了multiple是错误的,在这里没有任何意义.
  • 我也做了最初的选项,selectSelect Agevalue="",所以现在你不需要在HTML中用requiredparent_name.

const select = document.getElementById("over_18");
const parentInput = document.getElementById("parent_name");
const form = document.querySelector("form");

select.addEventListener("change", (e) => {
  if (e.target.value === "No") {
    parentInput.required = false;
  } else {
    parentInput.required = true;
  }
});

form.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("Submitted");
});
<form>
  <div>
    <label for="over_18">Over 18? </label>
    <select id="over_18" required>
      <option value="">Select Age</option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
    </select>
  </div>
  <div>
    <label for="parent_name">Parent Name</label>
    <input type="input" id="parent_name">
  </div>
  <button type="submit">Submit</button>
</form>

Update based on OP's comment:

如果agedate输入:

  • 通过比较提供日期的年、月和日期与当前日期,计算年龄是否超过18岁.
  • 然后,相应地切换required属性.

const ageInput = document.getElementById("age");
const parentInput = document.getElementById("parent_name");
const form = document.querySelector("form");

ageInput.addEventListener("change", (e) => {
  const date = new Date(e.target.value),
    birthYear = date.getFullYear(),
    birthMonth = date.getMonth(),
    birthDate = date.getDate(),
    currYear = new Date().getFullYear(),
    currMonth = new Date().getMonth(),
    currDate = new Date().getDate(),
    years = currYear - birthYear,
    isAdult =
      years > 18 ||
      (years === 18 && currMonth > birthMonth) ||
      (years === 18 && currMonth === birthMonth && currDate >= birthDate);

  console.log("Is Adult?", isAdult);

  if (isAdult) {
    parentInput.required = false;
  } else {
    parentInput.required = true;
  }
});

form.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("Submitted");
});
<form>
  <div>
    <label for="age">Age</label>
    <input type="date" id="age" required>
  </div>
  <div class="form-group">
    <label for="parent_name">Parent Name</label>
    <input type="text" id="parent_name">
  </div>
  <button type="submit">Submit</button>
</form>

Javascript相关问答推荐

加载背景图像时同步旋转不显示的问题

可更改语言的搜索栏

如何从HTML对话框中检索单选项组的值?

类构造函数不能在没有用With Router包装的情况下调用

闭包是将值复制到内存的另一个位置吗?

在FAQ Accodion应用程序中使用React useState时出现问题

如何在我的Next.js项目中.blob()我的图像文件?

使用类型:assets资源 /资源&时,webpack的配置对象&无效

将范围 Select 器添加到HighChart面积图

当我点击一个按钮后按回车键时,如何阻止它再次被点击

JWT Cookie安全性

在Puppeteer中使用promise进行日志(log)记录时出现TargetCloseError

如何在Firebase中读取对象的特定字段?

将以前缓存的 Select 器与querySelector()一起使用

V-如果使用数组[vue3]中的布尔结果

是否可以在同一路由路径中为不同的处理程序使用不同的express中间件?

不会执行不返回值的快速路径作为函数

通过webContent发送数据时的空对象.发送

文本动画在其消失之前

使用关键帧的CSS动画未按预期工作