HTML Bootstrap 表单 - “必需”标签不适用于 JS 脚本

Question

大家晚上好，

我正在编码的网站遇到问题。 我在index.html 中实现了一个引导程序表单，并且编写了一个链接到HTML 的Javascript 脚本。

这是 HTML：

    <div class="container">
        <div style="text-align:center">
            <br>
            <h5><span class="badge bg-primary shadow rounded">Enregistrer un résultat</span></h5>
            <br>
        </div>
        <div class="container">
            <div class="row">
                <div class="col align-items-stretch" id="patient_form">
                    <div class="card shadow mb-5 bg-body rounded text-center" style='height: 430px;'>
                        <div class="card-header"><strong>Remplissez les informations du patient</strong></div>
                        <div class="card-body">
                        <p class="card-text">
                            <form class="form-inline" role="form">
                                <div class="form-floating mb-2">
                                    <input class="form-control" id="patient_prenom" autocomplete="off" required/>
                                    <label for="patient_prenom">Prénom</label>
                                </div>
                                <div class="form-floating mb-2">
                                    <input class="form-control" id="patient_nom" autocomplete="off" required/>
                                    <label for="patient_nom">Nom</label>
                                </div>
                                <div class="form-floating mb-2">
                                    <input class="form-control" id="patient_date_naissance" type="date" required>
                                    <label for="patient_date_naissance">Date de naissance</label>
                                </div>
                                <br>
                                <div class="text-center">
                                    <button onclick="searchPatient()" type="submit" class="btn btn-primary btn-sm">Rechercher le patient</button>
                                </div>
                            </form>
                        </p>
                        </div>
                    </div>
                </div>

这是 Javascript 脚本：

function searchPatient() {
    prenom = document.getElementById('patient_prenom').value;
    nom = document.getElementById('patient_nom').value;
    date_naissance = document.getElementById('patient_date_naissance').value;
    
    document.getElementById("patient_form").style.display = "none";
    document.getElementById("intervention_form").style.display = "block";
    document.getElementById("patient_recap").style.display = "block";    
    document.getElementById('patient_recap_text').innerHTML += '<h5>' + prenom + ' ' + nom + '<h5>' + '<h6>' + date_naissance + ' ' + '<h6>';
}

使用此配置，我的第一个表单中的“required”标签不起作用。 但一旦我删除了将 Javascript 链接到 HTML 的行，它就开始工作了。

你能帮我解决这个问题吗？

非常感谢！！

Answer 1

看起来将 onclick="searchPatient" 添加到提交按钮意味着它将立即运行该函数并跳过表单验证。根据这个答案，如果您通过JS提交表单，则必须自己进行验证。我是这样做的：

首先，您需要一个要检查验证的表单的句柄。最简单的方法是在表单元素上使用 id="form"。

然后，您只需调用 formElement.checkValidity()，如果它返回 false，则不会调用您的提交逻辑。例如：

function searchPatient() {
  const form = document.getElementById('form');
  if (!form.checkValidity()) {
    return;
  }

  // ... rest of function like normal
}

现在，当我单击按钮时，我会看到“此字段为必填”弹出窗口。