Bagaimana Melakukan Validasi JavaScript Dasar - dummies

Anda dapat melakukan beberapa validasi dasar menggunakan JavaScript untuk berbagai jenis masukan. Latihan pertama ini membuat HTML untuk formulir web. Setelah Anda menyelesaikan latihan ini, Anda akan melakukan validasi JavaScript untuk formulir.

1. Buka editor teks Anda dan buat file kosong baru.

2. Di dalam file, tempatkan HTML berikut:

   Sebuah formulir Informasi Pengguna Nama: * Nama diperlukan 
   
   Kota: 
   Negara Bagian: Alabama California Colorado Florida Illinois New Jersey New York Wisconsin > ZIP: 
   Alamat E-mail: * E-mail diperlukan 
   Nomor Telepon: Format: xxx-xxx-xxxx 
   Tipe Nomor: Rumah Kerja Silakan pilih opsi 
   Password: * Password required 
   Verifikasi Kata Sandi: * Sandi tidak cocok dengan 
   Simpan file sebagai form. php di root dokumen anda 
   

3. localhost
4. / form. php. HTML terlihat sangat buruk, dengan bidang bentuk dan kesalahan yang tidak sejajar ditampilkan. Anda bisa memperbaikinya dengan CSS.

   

   Buat file teks baru di editor Anda dan masukkan CSS berikut:

5. form fieldset {display: inline-block;}. radioButton {float: tidak ada; tampilan: inline; margin-right: 0. 1em; lebar: 2em;} label formulir {width: 8em; margin-kanan: 1em; float: kiri; text-align: right; display: block;} form input {width: 15em;} #submit {margin-top: 2em; float: right;}. errorClass {background-color: # CC6666;} #errorDiv {col or: red;}. errorFeedback {visibility: hidden;}

   Simpan file sebagai form. css di root dokumen anda
   

6. File ini sudah dirujuk dalam HTML yang Anda buat di Langkah 2, jadi tidak ada perubahan lain yang diperlukan untuk file itu.

   Muat ulang formulirnya. file php di browser anda

7. Dengan HTML dan CSS di tempat, saatnya menambahkan beberapa JavaScript.

   

   Catatan: Anda membuat kode validasi nanti di bab ini. Untuk saat ini, Anda tinggal menambahkan file JavaScript dasar.

   Buat file teks baru di editor Anda.

8. Tempatkan JavaScript berikut di file.

9. $ (dokumen). siap (function () {alert ("halo");});

   Simpan file sebagai bentuk js di root dokumen anda
   

10. Formulir reload. php di browser web anda

11. Klik OK untuk mengabaikan dialog.

    

12. Sementara dialog lansiran itu sendiri bukanlah hal baru, ini membuktikan bahwa Anda telah menghubungkan HTML dan JavaScript dengan benar untuk latihan ini. Dari sini, Anda dapat bekerja untuk menambahkan validasi JavaScript ke formulir. Sebelum melakukannya, Anda mungkin merasa terbantu untuk memecah beberapa HTML dan CSS yang telah Anda buat.