Zorunlu alan özel doğrulama

Birçok giriş alanları ile bir form var. Html5 doğrulamalarını koyduk

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

bu kutucuğu doldurmadan formu gönderdiğinizde varsayılan mesaj gibi gösteriyor

"Please fill out this field"

kimse bana bu mesajı düzenlemek için yardım edebilir misiniz?

Bunu düzenlemek için bir javascript kodu var ama çalışmıyor

$(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("");
        };
    }
})

Özel doğrulamaları e-posta

Aşağıdaki HTML Formu var

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

İstiyorum doğrulama mesajlar.. gibi

Alan gerekli :E-Posta Adresi Giriniz
Yanlış E-Posta :'' Geçerli bir e-Posta Adresi değil. testing@.com (burada girilen e-posta adresi metin kutusu görüntülenir)

Bu.. denedim

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

Bu fonksiyon düzgün çalışmıyor, bunu yapmanın başka bir yolu var mı? kayda değer olurdu.

Kod parçacığını

Bu cevap çok fazla ilgi var bu yana, burada güzel yapılandırılabilir bir parçacık ile geldi:

/**
  * @author ComFreek <http://stackoverflow.com/users/603003/comfreek>
  * @link http://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);

Kullanımı

&yani; 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!';
  }
});

Daha fazla ayrıntı

• defaultText başlangıçta görüntülenir
• emptyText giriş boş (temizlenmiş) görüntülenir
• invalidText giriş tarayıcı (geçerli bir eposta adresi değil örneğin) tarafından geçersiz olarak işaretli olduğunda görüntülenir

String veya üç özelliklerin her biri için bir fonksiyon atayabilirsiniz.< / ^ br . Eğer bir işlevi atarsanız, giriş elemanı (DOM düğüm) ve başvuru kabul edebilirgerekirsonra hata iletisi olarak görüntülenen bir dize döndürür.

Uyumluluk

Test:

• Chrome Canary 47.0.2
• IE 11
• Microsoft Kenar (28/08/2015 kadar güncel bir sürümünü kullanıyor)
• Firefox 40.0.3
• Opera 31.0

Eski cevap

Eski revizyon burada görebilirsiniz: http://stackoverflow.com/revisions/16069817/6