javascript - 如何手动触发 bootstrap "required"工具提示警报？

Question

当您通过 <input type="submit"> 提交表单时 和一些输入 required属性为空，丢失的输入框附近会出现一个小框，上面写着“请填写此字段”或类似的内容(我用意大利语使用它，所以我不知道英语中使用的确切措辞)。

我需要使用 JavaScript 手动触发此工具提示警报，知道如何实现此目的吗？

Answer 1

表单验证由 HTML5 提供，与 Bootstrap 无关，要禁用浏览器提供的默认表单验证，您必须使用包含输入的表单，例如使用属性 novalidate 将禁用浏览器提供的默认表单验证。如果您想使用自定义表单验证功能，您可以使用表单上的 onsubmit 事件，例如您将得到如下内容:

<form onsubmit='return submitForm(this);' novalidate='novalidate'>
  <input type='text' required>
  <input type='submit'>
</form>

通过在提交表单时执行此操作，您可以将提交的表单传递给函数submitForm，以便该函数能够迭代表单的元素来检查它们。 像这样的东西:

function submitForm(formToValidate){
   var formValid=true;
   var inputs = formToValidate.getElementsByTagName("input");
   var errorDescription;
   for(var i=0; i<inputs.length; i++)
   {
     var inputValid=true;
     switch(inputs[i].type)
     {
        case "number":
            if(inputs[i].hasAttribute("required")&&inputs[i].value=="")
            {
                inputValid=false;
                errorDescription="Required field";
            }
            /*Check other attributes here (max, min, step, etc.)*/
            break;
         /*Check other types of input here*/
     }
     if(!inputValid)
     {
        markInputAsNotValid(inputs[i],errorDescription);
        formValid=false;
        break;
     }
  }
  return formValid;
}

请注意，浏览器使用函数submitForm返回的值来确定提交是否成功。

了解更多信息:https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation