PWEB - Form Validation dengan JQuery

Tugas : Membuat Form Validation dengan JQuery

Nama: Muhammad Yunus

NRP: 5025021171

Kelas: PWEB B
Link: Repository / Website

Pada materi kali ini kita menggunakan JQuery untuk membuat form validation.
Kita memanfaat jquery untuk memastikan pengguna memasukkan input dengan benar sesuai yang diharapkan.

Potongan code utama

    <script type="text/javascript" >

        $('#form').submit (function (e) {

            e.preventDefault();

            submit_form();

        });

 

        function isEmail (email) {

            return /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/.test(email);

        }

        function letters (name) {

            return /^[a-zA-Z ]+$/.test(name);

        }

        function numbers (id) {

            return /^[0-9]+$/.test(id);

        }

         

        const submit_form = () => {

            let email_value = $('#email').val();

            let password_value = $('#password').val();

            let name_value = $('#name').val();

            let id_value = $('#id').val();

            let error = false;

            if (name_value == "") {

                error = true;

                alert( 'Please enter your name' );

            } else if (!letters(name_value)) {

                error = true;

                alert( 'Please enter your name in letters' );

            }

            if (id_value == "") {

                error = true;

                alert( 'Please enter your id' );

            } else if (!number(id_value)) {

                error = true;

                alert( 'Please enter your id in number' );

            }

           

            if(email_value === ''){

                error = true;

                alert( 'Email cannot be blank');

            }else if(!isEmail(email_value)){

                error = true;

                alert( 'Not a valid email');

            }

            if(password_value === ''){

                error = true;

                alert('Password cannot be blank');

            }else if (password_value.length > 9){

                error = true;

                alert('Password must be less 8 characters');

            }else if (password_value.length < 3){

                error = true;

                alert( 'Password must be bigger than 4 characters');

            }

            if (error) {

                return false;

            } else {

                alert('Form Submitted Successfully!');

                return true;

            }

        }

    </script>