farhanamin - npm explorer

jquery form validation Dan captcha input

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

$3



pada clsss card itu akan saya gunakan untuk membaut file di css nya



            Jquery Form 

            

                

            

            

                

            

            

                

            

            

                

            

            

                

            

            

                

            

            

                

            

            

                

            

$3



> bisa di download dari library atau bisa juga di melalui link script





"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"



"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"





"https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"



#### kita membuat file jquery untuk form validasi nya



> kita membuat rules validasi dalam field yang akan kita buat yang akan memunculkan outpur eror jika form tidak sesuai dengan rules yang kita buat



$("#userForm").validate({

    rules:{

        name:{

            required: true,

            minlength: 3

        },

        email: {

            required: true,

            email: true

        },

        addres:{

            required: true,

            addres: true

        },

        ZipCode:{

            required: true,

            minlength:4

        },

        date:{

            required: true,

            date: true

        },

        phone:{

            required: true,

            minlength:12

        },

        password:{

            required: true,

            minlength: 5

        },

        confirm_password:{

            required: true,

            equalTo: '#password'

        },

    },

    messages:{

        name:{

            required: 'The Name field is required',

            minlength: 'You must enter at least 3 characters'

        },

        email: {

            required: 'The Email field is required',

            email: 'You must enter a valid email address'

        },

        addres: {

            required: 'The Addres field is required',

            adrres: 'You must enter youre addres'

        },

        ZipCode: {

            required: 'The Zip Code field is required',

            minlength: 'You must enter at least 4 digit'

        },

        date: {

            required: 'The Date field is required',

        },

        phone: {

            required: 'The Phone field is required',

            minlength: 'You must enter at least 12 digit'

        },

        password:{

            required: 'The Password field is required',

            minlength: 'You must enter at least 12 characters'

        },

        confirm_password:{

            required: 'The Confirm password field is required',

            equalTo: 'The Confirm password field must match with Password'

        },

    },





$3



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

        }

    }



}



#### panduan untuk menginstall pluggin ini



pertama ketikan npm init pada project anda

lalu ketikan npm npm i tugas_jquery_amin_farhan