如何在不提交的情況下進行表單驗證 laravel
[英]how to make form validation laravel without submit
問題描述
我想問一下 Laravel 驗證，我已經完成了 Laravel 驗證，但是在知道表單上的輸入錯誤之前必須先單擊表單中的數據保存按鈕，以及如何找出我們在控制器中設置的輸入錯誤而沒有我們先點擊表單中的提交按鈕？ 如果我錯誤輸入了我在甜蜜警報中浮動的錯誤消息，我在提交時會出現錯誤消息
對於我的成型刀片
<form id="formpegawai" class="js-validation-bootstrap" method="post">
{{csrf_field()}}
<input name="_token" type="hidden" id="_token" value="{{ csrf_token() }}"/>
<div class="form-body">
<div class="form-group">
{{--<label type="hidden" class="control-label col-md-3">Kode</label>--}}
<div class="col-md-9">
<input name="kode" type="hidden" class="form-control" type="text"
placeholder="Kode">
</div>
<div class="col-md-9">
<input name="user_id" type="hidden" class="form-control" type="text"
placeholder="Kode">
</div>
</div>
<x></x>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="val-name">Nama<span class="text-danger">*</span></label>
<div class="col-md-9">
<input type="text" class="form-control" id="nama" name="nama"
placeholder="Masukan Nama..." required>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="val-name">Alamat<span
class="text-danger">*</span></label>
<div class="col-md-9">
<input type="text" class="form-control" id="alamat" name="alamat"
placeholder="Masukan Alamat...">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="val-name">Tempat Lahir<span
class="text-danger">*</span></label>
<div class="col-md-9">
<input type="text" class="form-control" id="tempat_lahir" name="tempat_lahir"
placeholder="Masukan Tempat Lahir...">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="val-name">Tanggal Lahir<span
class="text-danger">*</span></label>
<div class="col-md-9">
<input type="text" class="js-flatpickr form-control bg-white"
id="Date" name="tgl_lahir"
placeholder="Y-m-d">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="val-name">Pendidikan Terkahir<span
class="text-danger">*</span></label>
<div class="col-md-9">
<select class="form-control" id="pendidikan_terkahir"
name="pendidikan_terkahir">
<option value="0">Silahkan Pilih</option>
<option value="SMA">SMA</option>
<option value="SMK">SMK</option>
<option value="S1">S1</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="val-name">Tahun Masuk</label>
<div class="col-md-9">
<input type="text" class="form-control" id="tahun_masuk" name="tahun_masuk"
placeholder="Masukan Tahun Masuk..." readonly>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="val-name">No Telp<span
class="text-danger">*</span></label>
<div class="col-md-9">
<input type="number" class="form-control" id="no_telp" name="no_telp"
placeholder="Masukan No Telpon...">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="val-name">Jenis Kelamin<span
class="text-danger">*</span></label>
<div class="col-md-9">
<select class="form-control" id="jkel" name="jkel">
<option value="0">Silahkan Pilih</option>
<option value="laki-laki">Laki-Laki</option>
<option value="wanita">Wanita</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="val-name">Jabatan<span
class="text-danger">*</span></label>
<div class="col-md-9">
<select class="form-control" id="id_jabatan" name="id_jabatan">
<option value="0">Silahkan Pilih</option>
@foreach ($dataku as $data)
<option value="{{ $data->id }}">{{$data->id }}
[{{ $data->jabatan}}]
</option>
@endforeach
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="val-name">Status Keaktifan <span
class="text-danger">*</span></label>
<div class="col-md-9">
<select class="form-control" id="status" name="status">
<option value="0">Silahkan Pilih</option>
<option value="aktif">Aktif</option>
<option value="tidak aktif">Tidak Aktif</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save
</button>
<button type="button" onclick="reload();" class="btn btn-danger"
data-dismiss="modal">
Cancel
</button>
</div>
</div>
</form>
對於我的控制器代碼
public function simpanpegawai(Request $req)
{
$messages = [
'nama.required' => 'Field Nama Gak Boleh Kosong',
'nama.min' => 'Field nama tidak boleh kurang dari 5 kata',
'nama.regex' => 'Field nama tidak boleh angka',
'alamat.required' => 'Field Alamat Gak Boleh Kosong',
'alamat.min' => 'Field alamat tidak boleh 5 kata',
'tempat_lahir.required' => 'Field tempat lahir harus diisi !',
'tempat_lahir.regex' => 'field Tempat lahir tidak boleh ada angka',
'tgl_lahir.required' => 'Field Tanggal Lahir harus diisi !',
'tgl_lahir.date' => 'Field Tanggal Lahir harus format tanggal!',
'pendidikan_terkahir.not_in' => 'Field pendidikan terkahir Gak Boleh Kosong',
'no_telp.required' => 'Field no telpon Gak Boleh Kosong',
'no_telp.min' => 'Field no telpon Harus minimal 10 ',
'jkel.not_in' => 'Field jenis kelamin harus diisi !',
'id_jabatan.not_in' => 'Field jabatan harus diisi !',
'status.not_in' => 'Field status harus diisi !',
];
$validator = \Validator::make($req->all(), [
'nama' => 'required|min:5|regex:/^[a-zA-Z]+(([\',. -][a-zA-Z ])?[a-zA-Z]*)*$/',
'alamat' => 'required|min:5',
'no_telp' => 'required|min:10',
'tempat_lahir' => 'required|min:5|regex:/^[a-zA-Z]+(([\',. -][a-zA-Z ])?[a-zA-Z]*)*$/',
'tgl_lahir' => 'required|date',
'pendidikan_terkahir' => 'not_in:0',
'jkel' => 'not_in:0',
'id_jabatan' => 'not_in:0',
'status' => 'not_in:0',
], $messages);
if ($validator->fails()) {
return response()->json(['errors' => $validator->errors()->all()]);
} else {
$user = new \App\User;
$user->name = $req->nama;
$user->role = $req->id_jabatan;
$user->username = $req->nama;
$user->password = bcrypt($req->no_telp);
$simpan = $user->save();
$req->request->add(['user_id' => $user->id]);
$pegawai = \App\PegawaiModel::create($req->all());
if ($simpan == 1) {
$status = "Tersimpan";
} else {
$status = "Gagal";
}
echo json_encode(array("status" => $status));
}
}
對於我的 jquery
$.ajax({
url: url,
type: "POST",
data: $('#formpegawai').serialize(),
dataType: "JSON",
success: function (data) {
if (data.errors) {
jQuery.each(data.errors, function (key, value) {
swal({
title: "Pesan Eror",
text: value,
timer: 5000,
showConfirmButton: false,
type: "error"
})
});
} else {
swal({
text: data.status,
timer: 5000,
icon:"success",
showConfirmButton: false,
type: "error"
})
$('#modal_form').modal('hide');
}
},
error: function (request, status, error) {
}
});
1 個解決方案
解決方案1
-1 2020-01-26 06:03:02
您可以在不刷新頁面的情況下進行驗證。 如果您使用 bootstrap，那么您可以輕松使用 validator.js 插件。
Validator.js 插件提供客戶端驗證，無需頁面刷新。
示例如何驗證必填字段、電子郵件、最小長度等。
<html lang="en">
<head>
<title>
Bootstrap Validation example using validator.js
</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="https://code.jquery.com/jquery-1.12.4.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.min.js">
</script>
</head>
<body>
<br/>
<div class="container">
<div class="panel panel-primary" style="width:750px;margin:0px auto">
<div class="panel-heading">Bootstrap Validation example using validator.js</div>
<div class="panel-body">
<form data-toggle="validator" role="form">
<div class="form-group">
<label class="control-label" for="inputName">Name</label>
<input class="form-control" data-error="Please enter name field." id="inputName" placeholder="Name" type="text" required />
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputEmail" class="control-label">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label">Password</label>
<div class="form-group">
<input type="password" data-minlength="5" class="form-control" id="inputPassword" data-error="must enter minimum of 5 characters" placeholder="Password" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="control-label" for="inputName">BIO</label>
<textarea class="form-control" data-error="Please enter BIO field." id="inputName" placeholder="Cina Saffary" required=""></textarea>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit">
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
如何在laravel 4中不使用表單提交將數據傳遞到服務器？
[英]how to pass data to server without using form submit in laravel 4?
提交電子郵件表單的代碼，無需刷新頁面也無需驗證
[英]Code to submit the email form without refreshing the page and without validation
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.