如何手动触发引导程序"required"工具提示警报?



当您通过<input type="submit">提交表单时一些required属性的输入是空的,一个小框出现在缺失的输入框附近,说"请填写此字段"或类似的东西(我在意大利语中使用它,所以我不知道英语中使用的确切措辞)。

我需要使用JavaScript手动触发这个工具提示警报,任何想法如何实现这一点?

表单验证是由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

最新更新