设置自定义HTML5必填字段validation消息

必填字段自定义validation

我有一个有很多input字段的表单。 我已经把html5validation

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

当我提交表单没有填写这个文本框时,它显示默认消息

"Please fill out this field"

任何人都可以请帮我编辑这个消息吗?

我有一个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(""); }; } }) 

电子邮件自定义validation

我有以下HTML表单

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

validation消息,我想要的。

必填字段:请input电子邮件地址
错误的电子邮件: “testing@ .com”不是有效的电子邮件地址。 ( 在这里,input的电子邮件地址显示在文本框中

我已经试过了。

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

这个function工作不正常,你有其他的方法吗? 这将不胜感激。

代码片段

由于这个答案非常重视,下面是一个很好的可configuration的代码片断:

 /** * @author ComFreek <https://stackoverflow.com/users/603003/comfreek> * @link https://stackoverflow.com/a/16069817/603003 * @license MIT 2013-2015 ComFreek * @license[dual licensed] CC BY-SA 3.0 2013-2015 ComFreek * You MUST retain this license header! */ (function (exports) { function valOrFunction(val, ctx, args) { if (typeof val == "function") { return val.apply(ctx, args); } else { return val; } } function InvalidInputHelper(input, options) { input.setCustomValidity(valOrFunction(options.defaultText, window, [input])); function changeOrInput() { if (input.value == "") { input.setCustomValidity(valOrFunction(options.emptyText, window, [input])); } else { input.setCustomValidity(""); } } function invalid() { if (input.value == "") { input.setCustomValidity(valOrFunction(options.emptyText, window, [input])); } else { input.setCustomValidity(valOrFunction(options.invalidText, window, [input])); } } input.addEventListener("change", changeOrInput); input.addEventListener("input", changeOrInput); input.addEventListener("invalid", invalid); } exports.InvalidInputHelper = InvalidInputHelper; })(window); 

用法

→ jsFiddle

 <input id="email" type="email" required="required" /> 
 InvalidInputHelper(document.getElementById("email"), { defaultText: "Please enter an email address!", emptyText: "Please enter an email address!", invalidText: function (input) { return 'The email address "' + input.value + '" is invalid!'; } }); 

更多细节

  • defaultText最初显示
  • 当input为空时清空emptyText (被清除)
  • 当浏览器将input标记为无效时,会显示invalidText (例如,当它不是有效的电子邮件地址时)

您可以为这三个属性中的每一个分配一个string或一个函数。
如果您分配了一个函数,它可以接受对input元素(DOM节点)的引用,并且它必须返回一个string,然后显示为错误消息。

兼容性

经testing:

  • 铬金丝雀47.0.2
  • IE 11
  • Microsoft Edge(使用截至2015年8月28日的最新版本)
  • Firefox 40.0.3
  • Opera 31.0

老答案

你可以在这里看到旧版本: https : //stackoverflow.com/revisions/16069817/6

你可以使用oninvalid属性简单地实现这一点,检查这个演示代码

 <form> <input type="email" pattern="[^@]*@[^@]" required oninvalid="this.setCustomValidity('Put here custom message')"/> <input type="submit"/> </form> 

在这里输入图像描述

尝试这个:

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

我在Chrome和FF中testing了这个function,并在两个浏览器中都能正常工作。

HTML:

 <form id="myform"> <input id="email" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);" type="email" required="required" /> <input type="submit" /> </form> 

JAVASCRIPT:

 function InvalidMsg(textbox) { if (textbox.value == '') { textbox.setCustomValidity('Required email address'); } else if (textbox.validity.typeMismatch){{ textbox.setCustomValidity('please enter a valid email address'); } else { textbox.setCustomValidity(''); } return true; } 

演示:

http://jsfiddle.net/patelriki13/Sqq8e/

人,我从来没有在HTML 5中做过,但我会尝试。 看看这个小提琴。

我已经使用了一些jQuery,HTML5本地事件和属性以及input标签上的自定义属性(如果您尝试validation代码,这可能会导致问题)。 我没有在所有浏览器中进行testing,但我认为它可能工作。

这是使用jQuery的字段validationJavaScript代码:

 $(document).ready(function() { $('input[required], input[required="required"]').each(function(i, e) { e.oninput = function(el) { el.target.setCustomValidity(""); if (el.target.type == "email") { if (el.target.validity.patternMismatch) { el.target.setCustomValidity("E-mail format invalid."); if (el.target.validity.typeMismatch) { el.target.setCustomValidity("An e-mail address must be given."); } } } }; e.oninvalid = function(el) { el.target.setCustomValidity(!el.target.validity.valid ? e.attributes.requiredmessage.value : ""); }; }); }); 

尼斯。 这里是简单的表单html:

 <form method="post" action="" id="validation"> <input type="text" id="name" name="name" required="required" requiredmessage="Name is required." /> <input type="email" id="email" name="email" required="required" requiredmessage="A valid E-mail address is required." pattern="^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9]+$" /> <input type="submit" value="Send it!" /> </form> 

requiredmessage属性是我提到的自定义属性。 您可以为每个必填字段设置消息,因为当显示错误消息时,jQuery将从中获取消息。 你不必在JavaScript上设置每个字段,jQuery为你做。 那个正则expression式似乎没问题(至less它阻止了你的testing@.com !哈哈)

正如你可以在小提琴上看到的,我对提交表单事件做了额外的validation( 这也在document.ready上 ):

 $("#validation").on("submit", function(e) { for (var i = 0; i < e.target.length; i++) { if (!e.target[i].validity.valid) { window.alert(e.target.attributes.requiredmessage.value); e.target.focus(); return false; } } }); 

我希望这工作或帮助你。

这适用于我:

 jQuery(document).ready(function($) { var intputElements = document.getElementsByTagName("INPUT"); for (var i = 0; i < intputElements.length; i++) { intputElements[i].oninvalid = function (e) { e.target.setCustomValidity(""); if (!e.target.validity.valid) { if (e.target.name == "email") { e.target.setCustomValidity("Please enter a valid email address."); } else { e.target.setCustomValidity("Please enter a password."); } } } } }); 

和我正在使用它的forms(截断):

 <form id="welcome-popup-form" action="authentication" method="POST"> <input type="hidden" name="signup" value="1"> <input type="email" name="email" id="welcome-email" placeholder="Email" required></div> <input type="password" name="passwd" id="welcome-passwd" placeholder="Password" required> <input type="submit" id="submitSignup" name="signup" value="SUBMIT" /> </form> 

在这里输入图像描述

你可以在相同types的所有input中设置一个“invalid”的事件监听器,或者根据需要设置一个事件监听器,然后设置正确的消息。

 [].forEach.call( document.querySelectorAll('[type="email"]'), function(emailElement) { emailElement.addEventListener('invalid', function() { var message = this.value + 'is not a valid email address'; emailElement.setCustomValidity(message) }, false); emailElement.addEventListener('input', function() { try{emailElement.setCustomValidity('')}catch(e){} }, false); }); 

脚本的第二部分,有效性信息将被重置,否则将无法提交表单:例如,即使电子邮件地址已更正,也会阻止邮件被触发。

另外,您不必根据需要设置input字段,因为一旦您开始在input中input,就会触发“无效”。

这是一个小提琴: http : //jsfiddle.net/napy84/U4pB7/2/希望帮助!

只需要获取元素并使用setCustomValidity方法即可。

 var foo = document.getElementById('foo'); foo.setCustomValidity(' An error occurred'); 

在每个input标签中使用属性“title”并在其上写入一条消息

你可以简单地使用oninvalid =“属性,并绑定this.setCustomValidity() eventListener!

这里是我的演示代码!(你可以运行它来检查!) 在这里输入图像描述

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>oninvalid</title> </head> <body> <form action="https://www.google.com.hk/webhp?#safe=strict&q=" method="post" > <input type="email" placeholder="xgqfrms@email.xyz" required="" autocomplete="" autofocus="" oninvalid="this.setCustomValidity(`This is a customlised invalid warning info!`)"> <input type="submit" value="Submit"> </form> </body> </html> 

你可以添加这个脚本来显示你自己的消息。

  <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> 

对于其他validation,如模式不匹配,你可以添加附加条件

喜欢

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

还有其他有效的条件,如rangeOverflow,rangeUnderflow,stepMismatch,typeMismatch,有效