logo标签列表

设置自定义的HTML5必填字段验证消息。

javascriptjqueryhtml
120

必填字段自定义验证

我有一个表单包含多个输入字段。我已经添加了HTML5验证。

<input type="text" name="topicName" id="topicName" required />

当我提交表单但未填写此文本框时，它会显示默认消息：

"请填写此字段"

有谁可以帮我编辑这个消息吗？

我有一个JavaScript代码来编辑它，但它不起作用。

$(document).ready(function() {
    var elements = document.getElementsByName("topicName");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("Please enter Room Topic Title");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})

电子邮件自定义验证

我有以下HTML表单

<form id="myform">
    <input id="email" name="email" type="email" />
    <input type="submit" />
</form>


我希望的验证信息如下:

必填字段：请输入电子邮件地址
错误的电子邮件地址：'testing@.com'不是一个有效的电子邮件地址。（这里显示在文本框中输入的电子邮件地址）

我已经尝试过了。

function check(input) {  
    if(input.validity.typeMismatch){  
        input.setCustomValidity("'" + input.value + "' is not a Valid Email Address.");  
    }  
    else {  
        input.setCustomValidity("");  
    }                 
}

这个函数没有正常工作，你有其他的方式来完成这件事吗？将不胜感激。

1
你说的“不工作”是什么意思？它是否出现了错误？打开Chrome的开发者工具或Firefox的Firebug，看看是否有JavaScript错误。 - Osiris
@LeviBotelho 我已经发布了整个代码，并且正在Firefox和Chrome中进行测试。 - Sumit Bijvani
好的，但是使用哪个版本的FF和Chrome？ - Levi Botelho
最新的Firefox 20.0和Chrome 25 - Sumit Bijvani
3
@SumitBijvani 你说的“寻找更好的答案”是什么意思？如果您能告诉我哪些部分有误或不足，我会改进我的回答。 - ComFreek
显示剩余6条评论
12个回答
1

您可以添加此脚本以显示您自己的消息。

 <script>
     input = document.getElementById("topicName");

            input.addEventListener('invalid', function (e) {
                if(input.validity.valueMissing)
                {
                    e.target.setCustomValidity("Please enter topic name");
                }
//To Remove the sticky error message at end write


            input.addEventListener('input', function (e) {
                e.target.setCustomValidity('');
            });
        });

</script>

对于其他验证，比如模式不匹配，您可以添加额外的if else条件。

例如：

else if (input.validity.patternMismatch) 
{
  e.target.setCustomValidity("Your Message");
}

还有其他有效性条件，如rangeOverflow、rangeUnderflow、stepMismatch、typeMismatch和valid。

0

可以将其用于onvalid属性中，如下所示

oninvalid="this.setCustomValidity('Special Characters are not allowed')
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接