HTML-JS年龄验证与适当的消息

zhte4eai 于 2023-06-27 发布在其他

关注(0)|答案(1)|浏览(180)

我不能让它显示一条消息说数据是有效的。
仅显示否定消息。
我不希望被发送的形式，我需要它只是显示一个消息说“积极的消息”
我需要满足这些要求：
A）出生日期字段：这些字段应该接收有效的日、月和年，并且在它们正确时将焦点发送到下一个字段。
B）婚姻状况字段：如果选择的婚姻状况是单身，则必须分析出生日期，并且只有在该人超过15岁时才进行验证。
我希望当年龄大于15岁时，或者当选择的婚姻状况与“单身”不同时，出现正面消息。
我希望当选择“单身”并且年龄小于15岁时发送负面消息。
我希望通过改变婚姻状况或年龄，负面信息消失，正面信息出现。
到目前为止的努力：

function idade() {
  let estadocivil = document.getElementById('iestadocivil').value;
  let inascimento = document.getElementById('inascimento').value;
  let conteudo = document.getElementById('conteudo');

  let sucesso = document.getElementById('isucesso');
  let falha = document.getElementById('ifalha');

  if (estadocivil === 'solteiro') {
    let data = new Date();
    let ano = data.getFullYear();

    let anoNascimento = ano - parseInt(inascimento.substring(0, 4));

    if (anoNascimento <= 15) {
      conteudo.innerHTML = 'Solteiro needs age 15!';
      falha.innerHTML = 'negative message!';
      return false;

    } else {

      conteudo.innerHTML = '';
      sucesso.innerHTML = 'positive message';
      return false;
    }
  }
}

<label for="inascimento">Ano de nascimento:</label>
<input type="date" name="nascimento" id="inascimento" required>

Html

来源：https://stackoverflow.com/questions/76520325/html-js-age-verification-with-appropriate-messages

1条答案

按热度按时间

hgc7kmma1#

我不得不添加一些HTML并给表单一个ID
您需要一个提交事件处理程序。
您需要清除消息或使用一个元素来处理成功和失败

function idade() {
  let estadocivil = document.getElementById('iestadocivil').value;
  let inascimento = document.getElementById('inascimento').value;
  let conteudo = document.getElementById('conteudo');

  let sucesso = document.getElementById('isucesso');
  let falha = document.getElementById('ifalha');

  if (estadocivil === 'solteiro') {
    let data = new Date();
    let ano = data.getFullYear();

    let anoNascimento = ano - parseInt(inascimento.substring(0, 4));

    if (anoNascimento <= 15) {
      conteudo.innerHTML = 'Solteiro needs age 15!';
      falha.innerHTML = 'negative message!';
      sucesso.innerHTML = '';      
      return false;
    } else {
      conteudo.innerHTML = '';
      falha.innerHTML = '';
      sucesso.innerHTML = 'positive message';
      return false;
    }
  }
}
window.addEventListener("DOMContentLoaded", () => {
  document.getElementById("myForm").addEventListener("submit", (e) => {
    const ageCheck = idade()
    if (!ageCheck) e.preventDefault(); // stop the submission. You can remove the test to always stop submission
  });
});

<form id="myForm">
  <select id="iestadocivil" required>
    <option value="">Estado Civil</option>
    <option value="solteiro">Solteiro</option>
    <option value="casado">Casado</option>
    <option value="divorciado">Divorciado</option>
  </select>

  <label for="inascimento">Ano de nascimento:</label>
  <input type="date" name="nascimento" id="inascimento" required>
  <input type="submit" />
</form>
<span id="isucesso"></span>
<span id="ifalha"></span>
<div id="conteudo"></div>

赞(0）回复(0）举报 2023-06-27

我来回答

HTML-JS年龄验证与适当的消息

1条答案

相关问题

热门标签

最新问答