当您通过<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