Bootstrap Validator
จากเดิมที่ค้างทุกคนไว้ หลังเข้าชาน(ชรา)
ก็นึกออก เอาความสามรถของ Class CSS ปรับเอามาใช้งานซ่ะ
หลักการคือ
1.
Plugin Validate ส่วนใหญ่จะตอบสนองไว้กับการปุ่ม submit
(input หรือ button type ที่เป็น submit)
ดังนั้น
2.
ปุ่มของเราก็ให้มันเป็น button นี่แร๊ะ จะได้ไม่ต้องไปไหน
3.
ภายในคำสั่งใน event click สั่งให้ plugin ทำงาน
โดยการตรวจสอบ Form ค้นหา input
ทั้งหมด ที่เราได้ตั้งค่า ให้ตรวจสอบ (แอตทริบิ้วที่มีการระบุเป็น
required)
4.
หากตรวจสอบแล้วเงื่อนไขหากมี validate เกิดขึ้น div
ที่คลุม text ฟิล์ด input ในฟอร์มนั้นจะ troggle class “has-error”
แสดงเป็นสีแดงเกิดขึ้น
5.
ทำการตรวจสอบ div ภายใน Form ทั้งหมดหากไม่มี
CSS class “has-error” ก็สั่ง Form submit()
สวย ...หรู มีระดับ
Controller
|
def
save(){
if(yourInstance.save(flush: true)){
redirect(action : ‘nextmethod’) }
}
def nextmethod(){ render ... } |
View
|
<g:formRemote
url="[controller: 'yourController', action: 'save']"
data-toggle="validator"
role="form" name="yourForm" id="idYourForm"
method="post" update="stateDivUpdate">
<div
class="row">
<div class="form-group">
<div class="col-lg-3">
<label for="idTxt"
class="control-label">Label</label>
</div>
<div class="col-lg-9">
<input type="text" class="form-control"
id="idTxt" name="txtName" maxlength="50"
value=""
required/>
</div>
</div>
</div>
<button type="button" id="idButton" class="btn btn-primary">Click</button> </g:formRemote> |
JavaScript
|
<script>
$(function
() {
$("#idButton").on("click",function(){
$("#idYourForm").validator('validate');
if(!$("#idYourForm div").hasClass("has-error")){
$("#idYourForm").submit();
}
});
});
</script>
|
ไม่มีความคิดเห็น:
แสดงความคิดเห็น