Bagaimana Anda menampilkan pesan kesalahan di bawah kolom input di html?

Properti validitas elemen input berisi sejumlah properti yang terkait dengan validitas data

Contoh

Jika angka dalam kolom input kurang dari 100 (atribut min input), tampilkan pesan

Hari ini, Kami ingin berbagi dengan Anda cara menampilkan pesan kesalahan di bawah kotak teks dalam validasi javascript. Dalam posting ini kami akan menunjukkan kepada Anda validasi formulir javascript yang menampilkan pesan kesalahan di sebelah input, dengar validasi formulir javascript dengan semua pesan kesalahan sekaligus kami akan memberikan demo dan contoh untuk diterapkan. Pada postingan kali ini, kita akan belajar tentang cara menampilkan pesan error di javascript tanpa peringatan dengan sebuah contoh

bagaimana cara menampilkan pesan kesalahan di samping kotak teks menggunakan javascript?

Isi

Kode HTML

<div id="form_signin">
    	<h2><span class="fontawesome-lock"></span>Sign In</h2>

    <form action="javascript:alert('FORM SUBMITTED');" method="POST">
        <fieldset>
            <p>
                <label for="customer_email_address">E-mail address</label>
            </p>
            <p>
                <input type="email" id="customer_email_address">
            </p>
            <p>
                <label for="password">Password</label>
            </p>
            <p>
                <input type="password" id="user_password_input">
            </p>
            <!-- JS because of IE support; better: placeholder="Email" -->
            <p>
                <input type="submit" value="Sign In">
            </p>
        </fieldset>
    </form>
</div>
<!-- end form_signin -->

Kode JavaScript

    $('form').on('submit', function (e) {
        var focusSet = false;
        if (!$('#customer_email_address').val()) {
            if ($("#customer_email_address").parent().next(".validation").length == 0) // only add if not added
            {
                $("#customer_email_address").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter customer_email_address address</div>");
            }
            e.preventDefault(); // prevent form from POST to server
            $('#customer_email_address').focus();
            focusSet = true;
        } else {
            $("#customer_email_address").parent().next(".validation").remove(); // remove it
        }
        if (!$('#user_password_input').val()) {
            if ($("#user_password_input").parent().next(".validation").length == 0) // only add if not added
            {
                $("#user_password_input").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter password</div>");
            }
            e.preventDefault(); // prevent form from POST to server
            if (!focusSet) {
                $("#user_password_input").focus();
            }
        } else {
            $("#user_password_input").parent().next(".validation").remove(); // remove it
        }
    });

Kode CSS

@charset"utf-8";


 @import url(http://weloveiconfonts.com/api/?family=fontawesome);
 @import url(http://meyerweb.com/eric/tools/css/reset/reset.css);

[class*="fontawesome-"]:before {
    font-family:'FontAwesome', sans-serif;
}

 body {
    background-color: #C0C0C0;
    color: #000;
    font-family:"Varela Round", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
}
input {
    border: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    -webkit-appearance: none;
}

 #form_signin {
    margin: 50px auto;
    width: 400px;
}
#form_signin h2 {
    background-color: #f95252;
    -webkit-border-radius: 20px 20px 0 0;
    -moz-border-radius: 20px 20px 0 0;
    border-radius: 20px 20px 0 0;
    color: #fff;
    font-size: 28px;
    padding: 20px 26px;
}
#form_signin h2 span[class*="fontawesome-"] {
    margin-right: 14px;
}
#form_signin fieldset {
    background-color: #fff;
    -webkit-border-radius: 0 0 20px 20px;
    -moz-border-radius: 0 0 20px 20px;
    border-radius: 0 0 20px 20px;
    padding: 20px 26px;
}
#form_signin fieldset p {
    color: #777;
    margin-bottom: 14px;
}
#form_signin fieldset p:last-child {
    margin-bottom: 0;
}
#form_signin fieldset input {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
#form_signin fieldset input[type="email"], #form_signin fieldset input[type="password"] {
    background-color: #eee;
    color: #777;
    padding: 4px 10px;
    width: 328px;
}
#form_signin fieldset input[type="submit"] {
    background-color: #33cc77;
    color: #fff;
    display: block;
    margin: 0 auto;
    padding: 4px 0;
    width: 100px;
}
#form_signin fieldset input[type="submit"]:hover {
    background-color: #28ad63;
}

Saya harap Anda mendapatkan ide tentang menampilkan pesan kesalahan di bawah kolom input menggunakan jquery
Saya ingin mendapat umpan balik tentang infinityknow saya. blog com
Umpan balik, pertanyaan, atau komentar Anda yang berharga tentang artikel ini selalu diterima
Jika Anda menikmati dan menyukai posting ini, jangan lupa untuk membagikannya

Pos terkait

1. bagaimana cara menampilkan pesan kesalahan dalam javascript tanpa peringatan?
2. Kode sumber validasi formulir javascript
3. Cara menampilkan Pesan Kesalahan Validasi Kustom di laravel
4. Contoh Validasi Formulir Reactjs dengan Demo
5. cara membolehkan validasi nomor hp hanya 10 digit menggunakan javascript dengan jquery
6. tayangan slide php dalam kode sumber javascript
7. Validasi tombol radio di jquery
8. formulir pendaftaran validasi javascript
9. validasi formulir jquery tanpa plugin
10. Program kalkulator dasar menggunakan javascript menggunakan fungsi

Bagaimana Anda menunjukkan kesalahan input dalam HTML?

Bagaimana Anda menampilkan pesan kesalahan di bawah kolom input sebagai reaksi?

Bagaimana cara menampilkan pesan kesalahan di bawah kolom input di PHP?

Bagaimana Anda menampilkan pesan kesalahan?