Hari ini, saya ingin berbagi dengan Anda cara membuat validasi formulir ajax jquery dalam aplikasi codeigniter 3. Di sini saya akan membuat formulir sederhana dan membuatnya validasi sisi server menggunakan pustaka form_validation. form_validation akan membantu mengatur aturan kustom, keberhasilan, pesan kesalahan dengan mudah.
Validasi adalah bagian yang sangat penting dari setiap proyek. Jika Anda melakukan formulir login, formulir pendaftaran, hubungi formulir kami, komentar dll. Anda harus meminta untuk mengatur validasi formulir. Codeigniter menyediakan pustaka form_validation untuk mengatur validasi sisi server, tetapi jika kita membuatnya sederhana maka selalu menyegarkan halaman, jadi akan lebih baik jika Anda menggunakan jquery ajax untuk validasi formulir.
Jadi di sini saya memberi Anda contoh lengkap validasi formulir dalam aplikasi codeigniter. saya membuat formulir sederhana dengan nama depan, nama belakang, email dan alamat seperti formulir hubungi kami dan saya mengatur validasi sisi server menggunakan ajax. Jadi mari kita simak langkah di bawah ini dan buat validasi ajax dengan cepat.
Langkah 1: Buat Route
Pada langkah pertama kita perlu menambahkan dua route untuk formulir tampilan dan formulir posting. jadi buka file routes.php dan tambahkan kode seperti di bawah ini:
application/config/routes.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;
$route['item'] = "item/index";
$route['itemForm'] = "item/itemForm";Langkah 2: Create Item Controller
Pada langkah ini, kita perlu membuat Pengontrol Item dan mendefinisikan dua metode, indeks() dan itemForm(), Di sini kita juga akan memuat form_validation dan pustaka sesi. Jadi mari kita lanjutkan.
application/controllers/Item.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Item extends CI_Controller {
/**
* Get All Data from this method.
*
* @return Response
*/
public function __construct() {
parent::__construct();
$this->load->library('form_validation');
$this->load->library('session');
}
/**
* Create from display on this method.
*
* @return Response
*/
public function index()
{
$this->load->view('item');
}
/**
* Store Data from this method.
*
* @return Response
*/
public function itemForm()
{
$this->form_validation->set_rules('first_name', 'First Name', 'required');
$this->form_validation->set_rules('last_name', 'Last Name', 'required');
$this->form_validation->set_rules('email', 'Email', 'required|valid_email');
$this->form_validation->set_rules('address', 'Address', 'required');
if ($this->form_validation->run() == FALSE){
$errors = validation_errors();
echo json_encode(['error'=>$errors]);
}else{
echo json_encode(['success'=>'Record added successfully.']);
}
}
}Langkah 3: Create View File
Pada langkah terakhir, kita perlu membuat file view, Jadi di sini buat file view item.php dan salin kode di bawah, di sini kita akan menampilkan form.
application/views/item.php
<!DOCTYPE html>
<html>
<head>
<title>Codeigniter Ajax Validation Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<div class="container">
<h2>Codeigniter Ajax Validation</h2>
<div class="alert alert-danger print-error-msg" style="display:none">
</div>
<form>
<div class="form-group">
<label>First Name:</label>
<input type="text" name="first_name" class="form-control" placeholder="First Name">
</div>
<div class="form-group">
<label>Last Name:</label>
<input type="text" name="last_name" class="form-control" placeholder="Last Name">
</div>
<div class="form-group">
<strong>Email:</strong>
<input type="text" name="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<strong>Address:</strong>
<textarea class="form-control" name="address" placeholder="Address"></textarea>
</div>
<div class="form-group">
<button class="btn btn-success btn-submit">Submit</button>
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".btn-submit").click(function(e){
e.preventDefault();
var _token = $("input[name='_token']").val();
var first_name = $("input[name='first_name']").val();
var last_name = $("input[name='last_name']").val();
var email = $("input[name='email']").val();
var address = $("textarea[name='address']").val();
$.ajax({
url: "/itemForm",
type:'POST',
dataType: "json",
data: {first_name:first_name, last_name:last_name, email:email, address:address},
success: function(data) {
if($.isEmptyObject(data.error)){
$(".print-error-msg").css('display','none');
alert(data.success);
}else{
$(".print-error-msg").css('display','block');
$(".print-error-msg").html(data.error);
}
}
});
});
});
</script>
</body>
</html>Sekarang kita siap untuk contoh lengkap ini.
Jadi mari kita jalankan perintah di bawah ini pada direktori root Anda untuk menjalankan cepat:
php -S localhost:8000Sekarang Anda dapat membuka URL di bawah ini di browser Anda:
http://localhost:8000/itemSaya harap ini dapat membantu Anda ...
jquery ajax form validation codeigniter
andriajah