在html5联系表单中更改必填字段中的错误消息的语言

时间：2012-05-25 11:47:51

标签： forms html5

我正在尝试在html5表单字段中更改错误消息的语言。

我有这段代码：

<input type="text" name="company_name"  oninvalid="setCustomValidity('Lütfen işaretli yerleri doldurunuz')" required />

但是在提交时，即使字段不是空白，我仍然会收到错误消息。

我尝试了<input type="text" name="company_name" setCustomValidity('Lütfen işaretli yerleri doldurunuz') required />

然后显示英文消息。任何人都知道如何在其他语言上显示错误消息？

的问候，卓然

11 个答案:

答案 0 :(得分：70)

setCustomValidity的目的不仅仅是设置验证消息，它本身将字段标记为无效。它允许您编写本机不支持的自定义验证检查。

您有两种可能的方式来设置自定义消息，一种不涉及Javascript的简单消息和一种可以使用Javascript的消息。

最简单的方法是在输入元素上使用title属性 - 其内容与标准浏览器消息一起显示。

<input type="text" required title="Lütfen işaretli yerleri doldurunuz" />

enter image description here

如果您只想显示自定义消息，则需要一些Javascript。我在this fiddle中为您提供了两个示例。

答案 1 :(得分：37)

您忘记this oninvalid，请使用以下代码更改您的代码：

    oninvalid="this.setCustomValidity('Lütfen işaretli yerleri doldurunuz')"

enter image description here 

<form><input type="text" name="company_name"  oninvalid="this.setCustomValidity('Lütfen işaretli yerleri doldurunuz')" required /><input type="submit">
</form>

答案 2 :(得分：10)

<强> 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('Lütfen işaretli yerleri doldurunuz');
    }
    else if (textbox.validity.typeMismatch){{
        textbox.setCustomValidity('please enter a valid email address');
    }
    else {
       textbox.setCustomValidity('');
    }
    return true;
}

演示：

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

答案 3 :(得分：6)

我知道这是一篇旧帖子，但我想分享一下我的经验。

HTML：

$('input[required]').on('invalid', function() {
    this.setCustomValidity($(this).data("required-message"));
});

Javascript（jQuery）：

ID FName   LName  Street     Number Phone   Note
1  John    Smith  6th Ave    17     6465165 some random text
2  Peter   Murphy Barker Ave 22     6545213 some random text
3  Michael Adams  Centre St  34     5451351 some random text

这是一个非常简单的样本。我希望这对任何人都有帮助。

答案 4 :(得分：1)

//Dynamic custome validation on all fields
//add validate-msg attr to all inputs
//add this js code

$("form :input").each(function(){
                    var input = $(this);
                    var msg   = input.attr('validate-msg');
                    input.on('change invalid input', function(){
                        input[0].setCustomValidity('');
                        if(!(input[0].validity.tooLong || input[0].validity.tooShort)){
                            if (! input[0].validity.valid) {
                                input[0].setCustomValidity(msg);
                            }
                        }


                    });
                });

答案 5 :(得分：1)

'''
ValueError                                Traceback (most recent call last)
<ipython-input-91-2ffa9ed657fb> in <module>
      7 import en_core_web_sm
      8 #nlp = en_core_web_sm.load()
----> 9 nlp = spacy.load('en_core_web_sm', disable=['parser', 'ner'])

~\Anaconda3\envs\nlp_course\lib\site-packages\spacy\__init__.py in load(name, **overrides)
     19     if depr_path not in (True, False, None):
     20         deprecation_warning(Warnings.W001.format(path=depr_path))
---> 21     return util.load_model(name, **overrides)
     22 
     23 

~\Anaconda3\envs\nlp_course\lib\site-packages\spacy\util.py in load_model(name, **overrides)
    112             return load_model_from_link(name, **overrides)
    113         if is_package(name):  # installed as package
--> 114             return load_model_from_package(name, **overrides)
    115         if Path(name).exists():  # path to model data directory
    116             return load_model_from_path(Path(name), **overrides)

~\Anaconda3\envs\nlp_course\lib\site-packages\spacy\util.py in load_model_from_package(name, **overrides)
    133     """Load a model from an installed package."""
    134     cls = importlib.import_module(name)
--> 135     return cls.load(**overrides)
    136 
    137 

~\Anaconda3\envs\nlp_course\lib\site-packages\en_core_web_sm\__init__.py in load(**overrides)
     10 
     11 def load(**overrides):
---> 12     return load_model_from_init_py(__file__, **overrides)

~\Anaconda3\envs\nlp_course\lib\site-packages\spacy\util.py in load_model_from_init_py(init_file, **overrides)
    171     if not model_path.exists():
    172         raise IOError(Errors.E052.format(path=path2str(data_path)))
--> 173     return load_model_from_path(data_path, meta, **overrides)
    174 
    175 

~\Anaconda3\envs\nlp_course\lib\site-packages\spacy\util.py in load_model_from_path(model_path, meta, **overrides)
    154             component = nlp.create_pipe(name, config=config)
    155             nlp.add_pipe(component, name=name)
--> 156     return nlp.from_disk(model_path)
    157 
    158 

~\Anaconda3\envs\nlp_course\lib\site-packages\spacy\language.py in from_disk(self, path, disable)
    645         if not (path / 'vocab').exists():
    646             exclude['vocab'] = True
--> 647         util.from_disk(path, deserializers, exclude)
    648         self._path = path
    649         return self

~\Anaconda3\envs\nlp_course\lib\site-packages\spacy\util.py in from_disk(path, readers, exclude)
    509     for key, reader in readers.items():
    510         if key not in exclude:
--> 511             reader(path / key)
    512     return path
    513 

~\Anaconda3\envs\nlp_course\lib\site-packages\spacy\language.py in <lambda>(p, proc)
    641             if not hasattr(proc, 'to_disk'):
    642                 continue
--> 643             deserializers[name] = lambda p, proc=proc: proc.from_disk(p, vocab=False)
    644         exclude = {p: False for p in disable}
    645         if not (path / 'vocab').exists():

pipeline.pyx in spacy.pipeline.Tagger.from_disk()

~\Anaconda3\envs\nlp_course\lib\site-packages\spacy\util.py in from_disk(path, readers, exclude)
    509     for key, reader in readers.items():
    510         if key not in exclude:
--> 511             reader(path / key)
    512     return path
    513 

pipeline.pyx in spacy.pipeline.Tagger.from_disk.load_model()

pipeline.pyx in spacy.pipeline.Tagger.from_disk.load_model()

~\Anaconda3\envs\nlp_course\lib\site-packages\thinc\neural\_classes\model.py in from_bytes(self, bytes_data)
    350     def from_bytes(self, bytes_data):
    351         data = srsly.msgpack_loads(bytes_data)
--> 352         weights = data[b"weights"]
    353         queue = [self]
    354         i = 0

~\Anaconda3\envs\nlp_course\lib\site-packages\thinc\neural\util.py in copy_array(dst, src, casting, where)
     68 
     69 def require_gpu():
---> 70     from ._classes.model import Model
     71     from .ops import CupyOps
     72 

ValueError: could not broadcast input array from shape (96) into shape (128)
'''

这可以帮助您更好，更快速，更便捷，更轻松。

答案 6 :(得分：1)

为我工作。 

<input oninvalid="this.setCustomValidity('custom text on invalid')" onchange="this.setCustomValidity('')" required>

必须进行变革！

答案 7 :(得分：0)

使用JS执行。抓住错误消息的类别，并在出现的任何地方更改其内容。 

var myClasses = document.getElementsByClassName("wpcf7-not-valid-tip");

for (var i = 0; i < myClasses.length; i++) {
    myClasses[i].innerHTML = "Bitte füllen Sie das Pflichtfeld aus.";
}

答案 8 :(得分：0)

TLDR：通常，您不需要更改验证消息，但是如果您使用此消息，则：

<input
    oninvalid="this.setCustomValidity('Your custom message / 您的自定义信息')"
    oninput="this.setCustomValidity('')"
    required="required"
    type="text"
    name="text"
>

验证消息来自您的浏览器，如果您的浏览器是英语，则该消息将为英语，如果浏览器是法语，则该消息将为法语，依此类推。

如果您输入的默认验证消息不起作用，最简单的解决方案是将自定义消息作为参数提供给setCustomValidity。

...
oninvalid="this.setCustomValidity('Your custom message / 您的自定义信息')"
...

这是本机输入的方法，它将覆盖默认消息。但是现在我们有了一个问题，一旦触发验证，在用户键入时消息将继续显示。因此，要停止显示该消息，您可以使用oninput属性将有效性消息设置为空字符串。

...
oninput="this.setCustomValidity('')"
...

答案 9 :(得分：0)

<form>
  <input
    type="text"
    name="company_name"
    oninvalid="this.setCustomValidity('Lütfen işaretli yerleri doldurunuz')"
    required
  /><input type="submit" />
</form>

答案 10 :(得分：-1)

<input type="text" id="inputName"  placeholder="Enter name"  required  oninvalid="this.setCustomValidity('Please Enter your first name')" >

这可以帮助你更好，快速，方便＆amp;最容易的。

相关问题
最新问题