Gerekli alan özel doğrulaması

Birçok giriş alanına sahip bir formum var. Html5 doğrulamalarını koydum

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

formu bu metin kutusunu doldurmadan gönderdiğimde varsayılan mesajı gösteriyor

"Please fill out this field"

Biri bu mesajı düzenlememe yardım edebilir mi?

Düzenlemek için bir javascript kodum 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("");
        };
    }
})

E-posta özel doğrulamaları

Aşağıdaki HTML formum var

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

Beğenmek istediğim doğrulama mesajları.

Gerekli alan: Lütfen E-posta Adresini Girin
Yanlış E-posta: 'testing @ .com' Geçerli bir E-posta Adresi değil. ( burada, metin kutusunda görüntülenen girilen e-posta adresi )

Bunu denedim.

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

Bu işlev düzgün çalışmıyor, bunu yapmanın başka bir yolu var mı? Takdir edilecektir.

Kod parçacığı

Bu cevap çok dikkat çektiğinden, işte bulduğum güzel bir yapılandırılabilir pasaj:

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

→ 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 detay

• defaultText başlangıçta görüntülenir
• emptyText giriş boş olduğunda görüntülenir (silindi)
• invalidText giriş tarayıcı tarafından geçersiz olarak işaretlendiğinde görüntülenir (örneğin, geçerli bir e-posta adresi olmadığında)

Üç özelliğin her birine bir dize veya işlev atayabilirsiniz.
Bir işlev atarsanız, giriş öğesine (DOM düğümü) bir başvuruyu kabul edebilir ve daha sonra hata mesajı olarak görüntülenen bir dize döndürmesi gerekir .

uygunluk

Test edilen yer:

• Chrome Canary 47.0.2
• IE 11
• Microsoft Edge (28/08/2015 tarihinden itibaren güncel sürümü kullanarak)
• Firefox 40.0.3
• Opera 31.0

Eski cevap

Eski revizyonu burada görebilirsiniz: https://stackoverflow.com/revisions/16069817/6

Bunu geçersiz bir özniteliği kullanarak kolayca başarabilirsiniz, bu demo kodunu kontrol edin

<form>
<input type="email" pattern="[^@]*@[^@]" required oninvalid="this.setCustomValidity('Put  here custom message')"/>
<input type="submit"/>
</form>

Codepen Demosu: https://codepen.io/akshaykhale1992/pen/yLNvOqP

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;
}

Demo:

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

Bunu dene:

$(function() {
    var elements = document.getElementsByName("topicName");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("Please enter Room Topic Title");
        };
    }
})

Bunu Chrome ve FF'de test ettim ve her iki tarayıcıda da çalıştı.

Dostum, bunu HTML 5'te hiç yapmadım ama deneyeceğim. Bu kemana bir bak .

Bazı jQuery, HTML5 yerel etkinlikleri ve özellikleri ile giriş etiketinde özel bir öznitelik kullandım (kodunuzu doğrulamaya çalışırsanız bu, soruna neden olabilir). Tüm tarayıcılarda test etmedim ama işe yarayabileceğini düşünüyorum.

Bu, jQuery ile alan doğrulama JavaScript kodudur:

$(document).ready(function()
{
    $('input[required], input[required="required"]').each(function(i, e)
    {
        e.oninput = function(el)
        {
            el.target.setCustomValidity("");

            if (el.target.type == "email")
            {
                if (el.target.validity.patternMismatch)
                {
                    el.target.setCustomValidity("E-mail format invalid.");

                    if (el.target.validity.typeMismatch)
                    {
                         el.target.setCustomValidity("An e-mail address must be given.");
                    }
                }
            }
        };

        e.oninvalid = function(el)
        {
            el.target.setCustomValidity(!el.target.validity.valid ? e.attributes.requiredmessage.value : "");
        };
    });
});

Güzel. İşte basit form html:

<form method="post" action="" id="validation">
    <input type="text" id="name" name="name" required="required" requiredmessage="Name is required." />
    <input type="email" id="email" name="email" required="required" requiredmessage="A valid E-mail address is required." pattern="^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9]+$" />

    <input type="submit" value="Send it!" />
</form>

Özellik requiredmessage, bahsettiğim özel özelliktir. Mesajınızı, jQuery hata mesajını görüntülediğinde ondan alacağı için gerekli her alan için ayarlayabilirsiniz. Her alanı doğrudan JavaScript'te ayarlamanız gerekmez, jQuery bunu sizin için yapar. Bu normal ifade iyi görünüyor (en azından testing@.com! Haha'nızı engelliyor )

Fiddle'da görebileceğiniz gibi, form gönderme olayı için fazladan doğrulama yapıyorum ( bu da document.ready için geçerli ):

$("#validation").on("submit", function(e)
{
    for (var i = 0; i < e.target.length; i++)
    {
        if (!e.target[i].validity.valid)
        {
            window.alert(e.target.attributes.requiredmessage.value);
            e.target.focus();
            return false;
        }
    }
});

Umarım bu işe yarar veya size yardımcı olur.

Bu benim için iyi çalışıyor:

jQuery(document).ready(function($) {
    var intputElements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < intputElements.length; i++) {
        intputElements[i].oninvalid = function (e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                if (e.target.name == "email") {
                    e.target.setCustomValidity("Please enter a valid email address.");
                } else {
                    e.target.setCustomValidity("Please enter a password.");
                }
            }
        }
    }
});

ve birlikte kullandığım form (kesilmiş):

<form id="welcome-popup-form" action="authentication" method="POST">
    <input type="hidden" name="signup" value="1">
    <input type="email" name="email" id="welcome-email" placeholder="Email" required></div>
    <input type="password" name="passwd" id="welcome-passwd" placeholder="Password" required>
    <input type="submit" id="submitSignup" name="signup" value="SUBMIT" />
</form>

Bunu, ihtiyaç duyduğunuz şeye bağlı olarak, aynı türdeki tüm girişlerde veya yalnızca bir tanesinde 'geçersiz' için bir olay dinleyicisi ayarlayabilir ve ardından uygun mesajı ayarlayabilirsiniz.

[].forEach.call( document.querySelectorAll('[type="email"]'), function(emailElement) {
    emailElement.addEventListener('invalid', function() {
        var message = this.value + 'is not a valid email address';
        emailElement.setCustomValidity(message)
    }, false);

    emailElement.addEventListener('input', function() {
        try{emailElement.setCustomValidity('')}catch(e){}
    }, false);
    });

Komut dosyasının ikinci parçası olan geçerlilik mesajı sıfırlanacaktır, çünkü aksi takdirde formu göndermek mümkün olmayacaktır: örneğin bu, e-posta adresi düzeltildiğinde bile mesajın tetiklenmesini önler.

Ayrıca, girişi yazmaya başladığınızda 'geçersiz' tetikleneceğinden, giriş alanını gerektiği gibi ayarlamanız gerekmez.

İşte bunun için bir keman: http://jsfiddle.net/napy84/U4pB7/2/ Yardımcı olacağını umuyoruz!

Her giriş etiketinde "başlık" özelliğini kullanın ve üzerine bir mesaj yazın

Sadece öğeyi almanız ve setCustomValidity yöntemini kullanmanız yeterlidir.

Misal

var foo = document.getElementById('foo');
foo.setCustomValidity(' An error occurred');

this.setCustomValidity () eventListener ile sadece oninvalid = " özelliğini kullanabilirsiniz!

İşte demo kodlarım! (Kontrol etmek için çalıştırabilirsiniz!)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>oninvalid</title>
</head>
<body>
    <form action="https://www.google.com.hk/webhp?#safe=strict&q=" method="post" >
        <input type="email" placeholder="xgqfrms@email.xyz" required="" autocomplete="" autofocus="" oninvalid="this.setCustomValidity(`This is a customlised invalid warning info!`)">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

referans bağlantısı

http://caniuse.com/#feat=form-validation

https://www.w3.org/TR/html51/sec-forms.html#sec-constraint-validation

Bu komut dosyasını kendi mesajınızı göstermek için ekleyebilirsiniz.

 <script>
     input = document.getElementById("topicName");

            input.addEventListener('invalid', function (e) {
                if(input.validity.valueMissing)
                {
                    e.target.setCustomValidity("Please enter topic name");
                }
//To Remove the sticky error message at end write


            input.addEventListener('input', function (e) {
                e.target.setCustomValidity('');
            });
        });

</script>

Örüntü uyuşmazlığı gibi diğer doğrulama için, aksi takdirde koşul ekleyebilirsiniz.

sevmek

else if (input.validity.patternMismatch) 
{
  e.target.setCustomValidity("Your Message");
}

rangeOverflow, rangeUnderflow, stepMismatch, typeMismatch, valid gibi başka geçerlilik koşulları vardır