Jquery ui validator Custom Error

Include this script in you header after your "jquery.validate.js" >its simple trick to customize your whole array of error array.

jQuery.extend(jQuery.validator.messages, {

    required: "This field is required.",

    remote: "Use another Email.It is alreadt taken",

    email: "Please enter a valid email address.",

    url: "Please enter a valid URL.",

    date: "Please enter a valid date.",

    dateISO: "Please enter a valid date (ISO).",

    number: "Please enter a valid number.",

    digits: "Please enter only digits.",

    creditcard: "Please enter a valid credit card number.",

    equalTo: "Please enter the same value again.",

    accept: "Please enter a value with a valid extension.",

    maxlength: jQuery.validator.format("Please enter no more than {0} characters."),

    minlength: jQuery.validator.format("Please enter at least {0} characters."),

    rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."),

    range: jQuery.validator.format("Please enter a value between {0} and {1}."),

    max: jQuery.validator.format("Please enter a value less than or equal to {0}."),

    min: jQuery.validator.format("Please enter a value greater than or equal to {0}.")

});

Happy coding :)

Continue Reading...

CakePHP: Date field with default values

it's a bit of a hack and quite ugly, but since the empty option doesn't appear to support multiple values it's probably the easiest solution - unless you want to rewrite the whole dateTime() function. str_replace unfortunately doesn't allow limiting the number of replacements, which is why we have to resort to preg_replace.

Cakephp code:

echo $form->input('date', array(
'type'  => 'date',
'label' => 'Date',
'empty' => TRUE,
'minYear' => 2000,
'dateFormat' => 'DMY',
'maxYear' => date('Y'),
'minYear' => date('Y') - 10
# default order m/d/y
));

PHP Way out:
$placeholder = '[RandomStringWhichDoesNotAppearInTheMarkup]';
$out = $this->Form->input('date', array('label' => 'Date of Birth'
                                            , 'dateFormat' => 'DMY'
                                            , 'empty' => $placeholder
                                            , 'minYear' => date('Y') - 110
                                            , 'maxYear' => date('Y') - 0));

$escapedPlaceholder = preg_quote($placeholder, '/');
$out = preg_replace("/$escapedPlaceholder/", 'DATE', $out, 1);
$out = preg_replace("/$escapedPlaceholder/", 'MONTH', $out, 1);
$out = preg_replace("/$escapedPlaceholder/", 'YEAR', $out, 1);

echo $out;
Jquery way:
        // var valid=true;

        jQuery(document).ready( function() {

            $("#dateDay option:first").text('DAY');
            $("#dateMonth option:first").text('MONTH');
            $("#dateYear option:first").text('YEAR');


        });

Continue Reading...

Jquery image hover zoomer

Here is the simple jquery zoomer without even keeping an extra copy of image using simple css and jquery(you can use bigger mage too).
















Usage:
Html:
<div class="bui_img" id="b0"><img alt="" src="image.jpg"></div>
Jquery script:
Add this code to you page 

// starting the script on page load
$(document).ready(function(){
 xOffset = 10;
  yOffset = 30;
 $(".bui_img").mouseover(function(e){
  var imgsrc = $(this).children('img:first').attr('src');//variable to store image source
  
  $("body").append("<p id='preview'><img src='"+ imgsrc +"' alt='Image preview' /></p>");  
  $("#preview")
   .css("top",(e.pageY - xOffset) + "px")
   .css("left",(e.pageX + yOffset) + "px")
   .fadeIn("fast"); 
 });
 
 $(".bui_img").mousemove(function(e){
  $("#preview")
   .css("top",(e.pageY - xOffset) + "px")
   .css("left",(e.pageX + yOffset) + "px");
 });
 
 $(".bui_img").mouseleave(function(e){
  
  $("#preview").remove();
 });
});

Note: store image source to variable  imgsrc.

Css:

#preview{border: 3px dotted gray;position: absolute;}

#preview img {height: 270px;//change image size to desired.}

Happy coding  :)

Continue Reading...

checkbox Checkall jquery script

 Below code will check checkbox under form with id 'form_inbox'

var chkd=0;
    function checkall(){
        if(chkd==0)
            chkd =1;
        else
            chkd =0;
        var form = document.getElementById('form_inbox');//replace Id with form id
            if(chkd==1){           
                for(var i=0;i<form.elements.length;i++){
                    if(form.elements[i].type=="checkbox"){
                        form.elements[i].checked = true;
                    }
                }   
           
            }
            else{           
                for(var i=0;i<form.elements.length;i++){
                    if(form.elements[i].type=="checkbox"){
                        form.elements[i].checked = false;
                    }
                }
            }
        return false;
        }

You need to do only this this
<input id="InboxCheckall" type="checkbox" value="1" text="The User Alias" onclick="checkall();" name="data[Inbox][checkall]">

And don not forget to change form id.
Enjoy coding

Continue Reading...

cakephp validation using jquery validator

In my project client was asked to do client side validation.I decided to use jquery validator in my Cakephp project.I tried find out "how to do" with my project..I got to read jquery validator plugin DOC and tried some demo version.After many fat burning session i decided to post in my blog so that starter like me can go through you it and find a solution.

Steps
--------
1.download jquery validator plugin from this link.

2.Copy jquery.validate.js and jquery.js in cake/app/webroot/js folder.

3.Use this code in your view to load script inline in your view

$options = array('inline'=>'inline');
echo $javascript->link('validator/jquery.validate.js',null,$options);

4.Try this was in your view

$(function(){
$('#admin_register').validate({
debug: false,
errorClass: "authError",
errorElement: "span",
rules: {
"data[User][email]": {
required: true,
email: true
},
"data[User][telephone]": {
number: true,
minlength: 10
}
},
highlight: function(element, errorClass) {
$(element).removeClass(errorClass);
}
});
});

5.Your form is going to be something like this.

echo $form->create('User', array('action' => 'admin_register','inputDefaults'=> array('label'=>false),'type' => 'file','id'=>'admin_register'));


POINTS TO GIVE SOME ATTENTION
-------------------------------------------------------------

$('#admin_register').validate({ ----------its using form element's ID .

"data[User][telephone]": {-----------------Give form input field's name attribute as mentioned here.(I made mistake in this section, that is i used data[User][telephone] instead of "data[User][telephone]" )

Continue Reading...