Question

我有这个表格

<form id="contact-form" class="">
<input type="text" name="subject" required="required" placeholder="Subject">
<input type="text" name="phone_or_mail" required="required" placeholder="Phone number or E-mail address">
<textarea name="question" required="required" placeholder="Your Question here ..."></textarea>
<input type="submit" value="Send" id="contact_form_submit"></form>

我尝试设置自定义验证消息，但是没有成功。

$('input').validationMessage = 'My error message0';
$('input[name="subject"]').validationMessage = 'My error message1 ';
$('input[name="phone_or_mail"]').validationMessage = 'My error message2';
$('textarea[name="question"]').validationMessage = 'My error message3';

始终显示默认消息。有人能指出我正确的方向吗？

以下是演示： http://jsfiddle.net/MCD2R/

Answer 1

我的工作就像上面提到的answer一样。

$('#contact-form input[name="subject"]')[0].oninvalid = function(e) {
    if (!e.target.validity.valid) {
        e.target.setCustomValidity(t('Please fill out this field!'));
    }
};
$('#contact-form input[name="subject"]')[0].oninput = function(e) {
    e.target.setCustomValidity('');
};

$('#contact-form input[name="phone_or_mail"]')[0].oninvalid = function(e) {
    if (!e.target.validity.valid) {
        e.target.setCustomValidity(t('Please fill out this field!'));
    }
};
$('#contact-form input[name="phone_or_mail"]')[0].oninput = function(e) {
    e.target.setCustomValidity('');
};

$('#contact-form textarea[name="question"]')[0].oninvalid = function(e) {
    if (!e.target.validity.valid) {
        e.target.setCustomValidity(t('Please fill out this field!'));
    }
};
$('#contact-form textarea[name="question"]')[0].oninput = function(e) {
    e.target.setCustomValidity('');
};

t（）是我的翻译功能。整个问题是导致此问题的原因，以获取翻译的错误消息。

IE 10-在提交事件上有验证回退。

$('#contact-form').submit(function(e) {
    e.preventDefault();
    var subject = $('input[name="subject"]');
    //if empty or value left as placeholder
    if (subject.val() == '' || subject.val() == t('Subject')) {
        subject.css('border', '2px solid red');
        return false;
    }
    var phone = $('input[name="phone_or_mail"]');
    if (phone.val() == '' || subject.val() == t('Phone number or E-mail address')) {
        phone.css('border', '2px solid red');
        return false;
    }
    var q = $('textarea[name="question"]');
    if (q.val() == '' || subject.val() == t('Your Question here ...')) {
        q.css('border', '2px solid red');
        return false;
    }
    ...
    $.ajax

Answer 2

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

Answer 3

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

实施例

var foo = document.getElementById('foo');
foo.setCustomValidity('custom message');

无法在html5表单上设置自定义validationMessage

3 个答案: