Archive for the ‘jquery’ Category

jQuery Validate

jQuery Validation plugin is popular and simple plugin for client side validations. It can be customized with plenty of options. It can be easily integrated into your existing forms. The plugin already has set of useful validation methods including URL and email validation that come out of the box. The plugin provides an API to write your own methods. All in built methods comes with default error messages in english. In the blog, I will try to explore a few methods and usage of jQuery Validate Plugin. Plugin Methods This library adds three jQuery plugin methods:
  • validate() – Validates the selected form.
  • valid() – Checks whether the selected form or selected elements are valid.
  •  rules() – Read, add and remove rules for an element
Setting up: You need to download the files and then place dist/jquery.validate.min.js file in #= require jquery.validate.min Applying to the form:
  • You just need to add a class ‘jqvalidate’ to the form that you want to validate. In rails, you will generally do it like following
    <%=  form_for(@account, :html =&gt; { :class =&gt; "jqvalidate" }) do |f| %>
    .........
    .........
    <% end %>
    
  • Next you need to create a function that is to be called before the form is loaded:
    $.validate_form = () -&gt;
    $.validator.addClassRules({
    cc_number: { required: true, digits: true, minlength: 15, maxlength: 16},
    cc_cvv: { required: true, digits: true, minlength: 3, maxlength: 4}
    })
    $('.jqvalidate').validate({
    ignore: ".jqvalidate_ignore"
    errorClass: "invalid"
    })
    
  1. addClassRules is used to specify validations on the fields with its in built methods. cc_number and cc_cvv are the classes given to two different fields respectively on which the validations are applied.
  2. ‘.jqvalidate_validate’ class is given to those fields that are not subject to the validations by this plugin.
  3. ‘invalid’ is the class given to the error messages.
The blog post just details the start for the plugin. We encourage you to dig more and explore this great plugin. For more details, refer to the documentation.

Remove Circle / Polygons from Google Map api v3

What differentiates circle/rectangle from a polygon in Google maps is that circle/rectangles are interpreted as closed figures bounded by bounds where as for a polygon you can define a path with number of points on it to draw. Although they both can be removed by setting map as null, Polygons still offer more options. If whole figure is to be removed, call setMap with null. But if only parts of polygon has to be removed, iterate over them and remove them using removeAt. Following example shows
<script>
/* 
** closedFig is the object of class google.maps.Circle or google.maps.Rectangle or 
** google.maps.Polygon
*/
removeFig(closedFig) {
closedFig.setMap(null);
}

/* 
** poly is the object of class google.maps.Polygon
** vertices is the collection of vertices to be removed. 
** if vertices empty this removes the whole polygon
*/
removeSelected(poly, vertices) {
       if (vertices.length == 0 )
		vertices = poly.getPath();

	// Iterate over the vertices.
	for (var i = vertices.length-1; i > -1; i--) {
		vertices.removeAt(i);
	}
}
</script>