无法设置cuctom html5验证消息

我正在尝试使用浏览器验证消息。当两个字段不相同时，我无法定义自定义消息。无法设置cuctom html5验证消息

我的情况是，我必须测试当字段是有效的，所以我用jquery on.blur来测试，但由于某种原因，该消息是空的。

尝试输入2个有效但不同的电子邮件地址。预期的结果应该是“测试为什么不工作”浏览器消息。

HTML：

<form id="newsletter_form" class="form" role="form" name="newsletter_form" method="post" action="/" autocomplete="off"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
      <input type="email" class="form-control" name="email" id="email" value="" maxlength="250" placeholder="email" aria-required="true" required="required" /> 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
      <input type="email" class="form-control" name="confirm_email" id="confirm_email" value="" maxlength="250" placeholder="confirm email" aria-required="true" required="required" /> 
     </div> 
    </div> 
    <input type="submit" class="btn submit btn-default" value="submmit!" /> 
</form>

JAVASCRIPT：

$('form #email').on('change invalid', function() { 
    var field = $(this).get(0); 
    field.setCustomValidity(''); 
    if (!field.validity.valid) { 
     field.setCustomValidity("custom email invalid"); 
    } 
}); 


/* THIS IS MY BUGGY ONE */ 
$('form #confirm_email').on('blur valid', function() { 
    var field = $(this).get(0); 
    field.setCustomValidity(''); 
    if ($("#email").val() != $("#confirm_email").val()) { 
     /* i tried setting the field to invalid, nothing */ 
     //field.validity.invalid; 
     //alert('s'); 
     field.setCustomValidity("test why not working"); 
    } 
}); 

$('form #confirm_email').on('change invalid', function() { 
    var field = $(this).get(0); 
    field.setCustomValidity(''); 
    if (!field.validity.valid) { 
     field.setCustomValidity("custom error message"); 
    } 
});

我试图jquery.on（改变有效..等等，我得到的alert()机器人没有更改的文本。

任何帮助将不胜感激，我越来越无聊这个'错误'？

来源

2014-01-15 Milche Patern

我认为这将是更simplier使用jQuery插件验证（http://jqueryvalidation.org）而不是用浏览器消息挣扎，这可能与浏览器不同。什么有效e。 G。在IE中并不意味着在Opera中工作。使用我建议的方法，您可以用相同的代码覆盖所有浏览器。有了这个插件，您还可以通过定义自己的验证器规则来设置自己的消息。 – alpham8

嗨@ alpham8和感谢您的输入，实际上它符合我想ie9 +和跨现代浏览器覆盖支持h5f JavaScript库。这个决定不是我的，我只是要做到这一点。 –

作为一个方面说明，浏览器验证非常好，一次只显示一个验证错误。虽然我明白这不是你的决定，但是对于那些打电话的人来说，这仍然是一个争论。浏览器验证尚不存在。 –

但由于某些原因，该消息为空。

那是因为你明确地将其设定为空：

field.setCustomValidity('');

中用来脾气坏的关于无效的电子邮件你的“自定义错误消息”的处理程序

。该处理程序在'blur valid'之后执行，并且将始终重置之前发生的事件。您可以通过取消上面的注释来尝试。

任何帮助将不胜感激

检查在相同的处理这两个原因：

$('form #confirm_email').on('change valid invalid', function() { 
    // var field = $(this).get(0); -- don't do this!!! field = this. 

    this.setCustomValidity(''); 
    if (!this.validity.valid) { 
     this.setCustomValidity("custom message for standard errors"); 
    } else if ($("#email").val() != this.value) { 
     this.setCustomValidity("test now working"); 
    } 
});

（updated demo）

来源

2014-01-15 23:37:47 Bergi

héhé...现在测试它。经过测试......我可以回家了。男士，谢谢你的反应。我没有考虑模糊和改变..和jquery处理。 –

这是什么意思？：better：field.validity.typeMismatch //检查电子邮件模式 –

我想你可能只想检查电子邮件的正确性，然后你可以使用'validity'对象的更具体的属性。不相关的问题，可能是猜错了，不是吗？ – Bergi

无法设置cuctom html5验证消息

回答

相关问题