tugas_jquery_amin_farhan v1.0.1

jquery form validation dengan captcha input

tugas A3 Di Salt Academy kali ini saya membuat jquery form validaiton dengan captcha input

pertama kita membuat dulu table pada file hmtl

pada clsss form itu akan saya gunakan untuk membaut file di css nya
<div class = "form-element">
                <label for = "nama">Nama Lengkap</label>
                <input type = "text" name = "nama" id = "nama" placeholder = "Masukan Nama Lengkap Anda">
            </div>
            <div class = "form-element">
                <label for = "addres">Alamat</label>
                <input type = "text" name = "addres" id = "addres" placeholder = "Masukan Alamat Anda">
            </div>
            <div class = "form-element">
                <label for = "TempatLahir">Tempat Lahir</label>
                <input type = "text" name = "tlahir" id = "tlahir" placeholder = "Masukan Tempat Lahir Anda">
            </div>
            <div>
            <div class="form-element">
                <label for="TanggalLahir">Tanggal Lahir:</label>
                <input type="date" id="lahir" name="lahir" placeholder="TanggalLahir">
            </div>

kita menambahkan lib dari ajax jquery

pada script ini kita tempatkan di head html

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

pada script yang ini kita tempatkan di bawah file di atas body html

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

kita membuat file jquery untuk form validation pendafataran

kita membuat function variable email dan nama ini membuat batasan input data dalam field yang akan kita buat di luar dari variable yang kita buat jquery akan memberikan informasi eror

function isEmail(email) {
    let regex = /^([a-zA-Z0-9_.@-])+$/;
    return regex.test(email);
}
function isNama(nama) {
    let regex = /^([a-z A-Z])+$/;
    return regex.test(nama);
}

 if (isNama($("#nama").val()) == false){
        errorMessage += "<p>Nama Tidak Boleh Di Isi Dengan Angka.</p>";
    }
    if (isEmail($("#email").val()) == false){
        errorMessage += "<p>Email Anda Tidak Valid.</p>";
    }

kita memberikan field mising pada submit button yang akan memberikan eror jika user lupa mengisi salah satu data form

$("#submitButton").click(function(){

    let errorMessage = "";
    let fieldsMissing = "";

    if ($("#nama").val() == ""){
        fieldsMissing += "<br>Nama";
    }
    if ($("#tlahir").val() == ""){
        fieldsMissing += "<br>Tempat Lahir";
    }
    if ($("#lahir").val() == ""){
        fieldsMissing += "<br>Tanggal Lahir";

kita akan membuat variable captcha untuk validation user pada form yang akan kita buat

function CreateCaptcha() {
    var alpha = new Array('A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9');
    var i;
    for (i = 0; i < 6; i++) {
        var a = alpha[Math.floor(Math.random() * alpha.length)];
        var b = alpha[Math.floor(Math.random() * alpha.length)];
        var c = alpha[Math.floor(Math.random() * alpha.length)];
        var d = alpha[Math.floor(Math.random() * alpha.length)];
        var e = alpha[Math.floor(Math.random() * alpha.length)];
        var f = alpha[Math.floor(Math.random() * alpha.length)];
    }
    ```

lalu kita membuat validasi pada captcha yang kita buat di variable create captcha sebelumnya

function ValidateCaptcha() {
    var string1 = removeSpaces(cd);
    var string2 = removeSpaces($('#UserCaptchaCode').val());
    if (string1 == string2) {
        return true;
    }
    else {
        return false;
    }
}
// Remove Spaces

function removeSpaces(string) {
    return string.split(' ').join('');
}

    // Check Captcha

    function CheckCaptcha() {
    let result = ValidateCaptcha();
    if( $("#UserCaptchaCode").val() == "" || $("#UserCaptchaCode").val() == null || $("#UserCaptchaCode").val() == "undefined") {
        $('#WrongCaptchaError').text('Masukan Code Yang Berada Di gambar bawah.').show();
        $('#UserCaptchaCode').focus();
    } else {
        if(result == false) {
        IsAllowed = false;
        $('#WrongCaptchaError').text('Captcha Salah! Silahkan Ulangi Lagi.').show();
        CreateCaptcha();
        $('#UserCaptchaCode').focus().select();
        }
        else {
        IsAllowed = true;
        $('#UserCaptchaCode').val('').attr('place-holder','Enter Captcha - Case Sensitive');
        CreateCaptcha();
        $('#WrongCaptchaError').fadeOut(100);
        $('#SuccessMessage').fadeIn(500).css('display','block').delay(5000).fadeOut(250);
        }
    }
}

setelah membuat file jquery kita akan memasukan script nya di dalam file html yang kita buat sebelumunya tempatkan di atas akhir body

  <script  src="/js/jquery.js"></script>

panduan untuk menginstall pluggin ini

pertama ketikan npm init pada project anda lalu ketikan npm npm i tugas_jquery_amin_farhan

priview tampilan plugin pada form validation ini