1

我有这个表格

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

4

3 回答 3

1

我做了上述 答案中的工作。

$('#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
于 2013-08-02T10:48:39.070 回答
1

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/

于 2014-03-14T02:10:34.303 回答
1

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

例子

var foo = document.getElementById('foo');
foo.setCustomValidity('custom message');
于 2014-05-05T21:35:29.193 回答