jquery.validate with bootstrap 3.0

1. download latest jquery.validate.js >> http://jqueryvalidation.org/
2. สร้างไฟล์ jquery.valudate.style.js เพื่อกำหนด style เวลา validation ให้ใช้แบบ bootstrap 3.0 โดยเวอร์ชั่นนี้จะใช้ class form-control has-error และ has-success ต่างกับเวอร์ชั่น 2.0

// to be placed in your layout/template so that it's applied to all pages
$(document).ready(function() {
  jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
      // if the input has a prepend or append element, put the validation msg after the parent div
      if(element.parent().hasClass('input-prepend') || element.parent().hasClass('input-append')) {
        error.insertAfter(element.parent());       
      // else just place the validation message immediatly after the input
      } else {
        error.insertAfter(element);
      }
    },
    errorElement: "small", // contain the error msg in a small tag
    wrapper: "div", // wrap the error message and small tag in a div
    highlight: function(element) {
      $(element).closest('.form-group').removeClass('has-success'); // remove the Boostrap error class from the control group
      $(element).closest('.form-group').addClass('has-error'); // add the Bootstrap error class to the control group
    },
    success: function(element) {
      $(element).closest('.form-group').removeClass('has-error'); // remove the Boostrap error class from the control group
      $(element).closest('.form-group').addClass('has-success'); // add the Bootstrap error class to the control group
    }
  });
});

3. สร้างการใช้งานในแต่ละหน้า ตัวอย่างนี้ใช้ในหน้า Login ชื่อไฟล์ validate.login.js

$(document).ready(function() {
  $('#form').validate(
  {
    rules: {
      password: {
        minlength: 4,
        required: true
      },
      email: {
        required: true,
        email: true
      }
    }
  });
});

โดย form จะต้องใส่ id ให้ตรงกันกับใน js และ input tag จะต้องมีชื่อ name ตรงกันกับใน js และต้องตั้งค่า id ไม่ซ้ำกัน ตัวอย่างใน laravel เช่น

<form id="form" method="post" action="{{ URL::to('/member/auth/login') }}">
     <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
     <div class="form-group">
        <input type="email" name="email" class="form-control" id="email" placeholder="Enter email" value="<?php echo Input::old('email'); ?>">
     </div>
     <div class="form-group">
        <input type="password" name="password" class="form-control" id="password" placeholder="Password">
     </div>
</form>

ตัวอย่าง interface

reference http://www.rayfaddis.com/blog/2013/05/27/jquery-validation-with-twitter-bootstrap http://getbootstrap.com/css/#forms-control-validation

Related posts:

This entry was posted in bootstap, knowledge, laravel4. Bookmark the permalink.