jquery validate remote ajax untuk cek apakah username sudah ada yang memakai
jquery validate sangat pupolar bagi para pengembang aplikasi yang berbasis website karena kemudahan yang diberikan nya dan banyak fasilitas yang dapat kita gunakan. yang salah satu nya adalah kita dapat menggunakan method remote untuk check secara realtime misal apakah username sudah terdaftar di database ataukah belum
disini saya menggunakan laravel sebagai framework base nya. dengan tabel users yang berisi username. nanti akan kita cek apakah username nyang di inputkan sudah ada yang memakai ataukah belum
untuk kodingan di controller laravel nya adlah seperti di bawah ini:
public function getUsername(Request $request)
{
$username = $request->username;
$checkusername = $this->mAdmin::where('username', $username)->get();
if ($checkusername->count() == 0) {
echo 'true';
} else {
echo 'false';
}
}
kode diatas adalah untuk mengecek apakah di database sudah ada username yang sama dengan yang di inputkan oleh user
kemudian masuk ke bagian view nya. kita akan membuat form untuk register user dengan menggunakan blade di laravel view.
@extends('game-layouts.default')
@section('csss')
@parent
<!-- //use custom css here -->
@stop
@section('javascript')
@parent
<!-- //use custom js / javascript here -->
<script src="{{ asset('assets/jquery.validate/jquery.validate.min.js') }}"></script>
<script type="text/javascript">
$("#formtambahtoko").validate({
rules: {
nama_user: {
required: true,
maxlength: 50
},
username: {
required: true,
maxlength: 25,
remote:{
url: "{{url('/api/register/get-username')}}",
type: "post",
dataType: 'json',
data: {
_token: "{{ csrf_token() }}",
username: function() {
return $( "#username" ).val();
}
}
}
},
password: {
required: true,
maxlength: 50
},
password2: {
required: true,
maxlength: 50,
equalTo : "#password"
}
},
messages: {
nama_user: {
required: "Nama Perusahaan wajib di isi",
maxlength: "Maximal 50 karakter"
},
username: {
required: "Username wajib di isi",
maxlength: "Maximal 25 karakter",
remote: "Username sudah digunakan."
},
password: {
required: "Password wajib di isi",
maxlength: "Maximal 50 karakter"
},
password2: {
required: "Ulangi password wajib di isi",
maxlength: "Maximal 50 karakter",
equalTo : "Password tidak sama"
}
},
submitHandler: function(form) {
form.submit();
}
});
</script>
@stop
<!-- title website -->
@section('title', 'Tambah Frontliner')
<!-- set menu sidebar active -->
@section('menu', 'tambahFrontliner')
<!-- //pageheader content -->
@section('pageheader', 'Tambah Frontliner')
<!-- //subpageheader contente -->
@section('subpageheader', '')
<!-- //breadcrumb -->
@section('breadcrumb')
@parent
<li><a href="{{ url('toko/dashboard') }}"><i class="fa fa-dashboard"></i> Dashboard</a></li>
<li><a href="{{ url('toko/frontliner') }}"><i class="fa fa-dashboard"></i> Frontliner</a></li>
<li class="active">Tambah Frontliner</li>
@stop
<!-- //main content -->
@section('content')
<!-- right column -->
<div class="row">
<div class="col-md-12">
<!-- Horizontal Form -->
<div class="box box-info">
<div class="box-header with-border">
<h4 class="box-title">Tambah Frontliner</h4>
</div>
<!-- /.box-header -->
<!-- form start -->
<form id="formtambahfrontliner" class="form-horizontal" action="{{ url('toko/frontliner/tambah-frontliner') }}" method="POST">
<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
<input type="hidden" class="form-control" id="kode_user" name="kode_user" placeholder="Kode Frontliner" value="{{ $kode_frontliner }}">
<div class="box-body">
<div class="col-sm-12">
<div class="form-group">
<label for="kode_user" class="col-sm-3 control-label">Kode Frontliner</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="kode_user1" name="kode_user1" placeholder="Kode Frontliner" value="{{ $kode_frontliner }}" disabled>
</div>
</div>
<div class="form-group">
<label for="nama_user" class="col-sm-3 control-label">Nama Frontliner</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="nama_user" name="nama_user" placeholder="Nama Frontliner" value="{{ old('nama_user') }}">
</div>
</div>
<div class="form-group">
<label for="status" class="col-sm-3 control-label">Status</label>
<div class="col-sm-5">
<select name="status" id="status" class="form-control status">
<option value="0" {{ (old('status') == 0) ? "selected":"" }}>Non Aktif</option>
<option value="1" {{ (old('status') == 1) ? "selected":"" }}>Aktif</option>
</select>
</div>
</div>
<div class="form-group">
<label for="username" class="col-sm-3 control-label">Username</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="username" name="username" placeholder="Username" value="{{ old('username') }}">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-3 control-label">Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="password" name="password" placeholder="Password" value="">
</div>
</div>
<div class="form-group">
<label for="password2" class="col-sm-3 control-label">Ulangi Password</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="password2" name="password2" placeholder="Ulangi Password" value="">
</div>
</div>
</div><!-- /.col_sm_12 -->
</div><!-- /.box-body -->
<div class="box-footer">
<a href="{{ url('toko/frontliner/daftar-frontliner') }}" class="btn btn-default">BATAL</a>
<button type="submit" class="btn btn-info pull-right">SIMPAN</button>
</div>
<!-- /.box-footer -->
</form>
</div>
<!-- /.box -->
</div>
</div>
@stop
pada kode view diatas dapat kita lihat ada method remote di jquery validate. yang menggunkan ajax untuk pengecekan nya secara realtime. jadi ketika di database sudah ada username yang sama maka akan menampilkan error dengan. keterangan username telah di gunakan yang menggambil dari parameter messsage.
jangan lupa untuk menambahkan route api nya ya tambahkan route. api nya
Route::post(‘/register/get-username’, ‘ApiController@getUsername’);
ok mudah di pahami kan.
kalo sudah silakan dicoba semoga berhasil jika ada masalah silakan tinggalkan komentar.
