Validasi khusus bidang yang diperlukan

Saya memiliki satu formulir dengan banyak bidang masukan. Saya telah menempatkan validasi html5

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

ketika saya mengirimkan formulir tanpa mengisi kotak teks ini menunjukkan pesan default seperti

"Please fill out this field"

Adakah yang bisa membantu saya untuk mengedit pesan ini?

Saya memiliki kode javascript untuk mengeditnya, tetapi tidak berfungsi

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

Email validasi khusus

Saya telah mengikuti formulir HTML

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

Pesan validasi yang ingin saya sukai.

Bidang yang harus diisi: Harap Masukkan Alamat Email Email
Salah: 'testing @ .com' bukan Alamat Email yang Valid. (di sini, alamat email yang dimasukkan ditampilkan di kotak teks )

Saya sudah mencoba ini.

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

Fungsi ini tidak berfungsi dengan benar, Apakah Anda punya cara lain untuk melakukan ini? Itu akan sangat dihargai.

Cuplikan kode

Karena jawaban ini mendapat banyak perhatian, berikut adalah cuplikan yang dapat dikonfigurasi yang saya buat:

/**
  * @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);

Pemakaian

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

Keterangan lebih lanjut

• defaultText ditampilkan pada awalnya
• emptyText ditampilkan saat input kosong (dihapus)
• invalidText ditampilkan ketika input ditandai sebagai tidak valid oleh browser (misalnya jika itu bukan alamat email yang valid)

Anda dapat menetapkan string atau fungsi ke masing-masing dari tiga properti.
Jika Anda menetapkan suatu fungsi, itu dapat menerima referensi ke elemen input (simpul DOM) dan harus mengembalikan string yang kemudian ditampilkan sebagai pesan kesalahan.

Kesesuaian

Diuji di:

• Chrome Canary 47.0.2
• IE 11
• Microsoft Edge (menggunakan versi terbaru pada 28/08/2015)
• Firefox 40.0.3
• Opera 31.0

Jawaban lama

Anda dapat melihat revisi lama di sini: https://stackoverflow.com/revisions/16069817/6

Anda cukup mencapai ini menggunakan atribut oninvalid, periksa kode demo ini

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

Demo Codepen: 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/

Coba ini:

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

Saya menguji ini di Chrome dan FF dan berfungsi di kedua browser.

Sobat, saya tidak pernah melakukan itu di HTML 5 tetapi saya akan mencoba. Coba lihat biola ini.

Saya telah menggunakan beberapa jQuery, peristiwa dan properti asli HTML5 dan atribut khusus pada tag input (ini dapat menyebabkan masalah jika Anda mencoba memvalidasi kode Anda). Saya tidak menguji di semua browser tetapi saya pikir ini mungkin berhasil.

Ini adalah kode JavaScript validasi lapangan dengan jQuery:

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

Bagus. Berikut adalah bentuk html sederhana:

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

Atributnya requiredmessageadalah atribut khusus yang saya bicarakan. Anda dapat mengatur pesan Anda untuk setiap bidang yang diperlukan karena jQuery akan mendapatkannya ketika itu akan menampilkan pesan kesalahan. Anda tidak harus mengatur setiap bidang langsung di JavaScript, jQuery melakukannya untuk Anda. Regex itu sepertinya baik-baik saja (setidaknya memblokir Anda [email protected]! Haha)

Seperti yang Anda lihat di biola, saya membuat validasi tambahan untuk acara formulir pengiriman ( ini juga terjadi di dokumen. ):

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

Saya harap ini berhasil atau membantu Anda.

Ini bekerja dengan baik untuk saya:

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

dan formulir yang saya gunakan dengan (terpotong):

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

Anda dapat melakukan ini dengan menyiapkan event listener untuk 'tidak valid' di semua input dari jenis yang sama, atau hanya satu, tergantung pada apa yang Anda butuhkan, dan kemudian menyiapkan pesan yang tepat.

[].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);
    });

Bagian kedua dari skrip, pesan validitas akan disetel ulang, karena jika tidak, tidak mungkin mengirimkan formulir: misalnya ini mencegah pesan dipicu bahkan ketika alamat email telah diperbaiki.

Anda juga tidak perlu menyiapkan bidang masukan seperti yang diperlukan, karena 'tidak valid' akan dipicu begitu Anda mulai mengetik masukan.

Berikut ini biola untuk itu: http://jsfiddle.net/napy84/U4pB7/2/ Semoga membantu!

Gunakan atribut "title" di setiap tag masukan dan tulis pesan di atasnya

Hanya perlu mendapatkan elemen dan menggunakan metode setCustomValidity.

Contoh

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

Anda cukup menggunakan atribut oninvalid = " , dengan bingding this.setCustomValidity () eventListener!

Ini kode demo saya! (Anda dapat menjalankannya untuk memeriksanya!)

<!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="[email protected]" required="" autocomplete="" autofocus="" oninvalid="this.setCustomValidity(`This is a customlised invalid warning info!`)">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

link referensi

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

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

Anda dapat menambahkan skrip ini untuk menampilkan pesan Anda sendiri.

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

Untuk validasi lain seperti ketidakcocokan pola, Anda dapat menambahkan tambahan jika kondisi lain

Suka

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

ada kondisi validitas lain seperti rangeOverflow, rangeUnderflow, stepMismatch, typeMismatch, valid