jquery.validator.addmethod custom error message

How to implement a custom dynamic error message to your jQuery Validator method?

$.validator.addMethod("checkEmailAvailability",function(value,element){
	var result;
	$.ajax({
        type: "POST",
        async: false,
		url:"includes/ajax/check-availability.php",
		data:{email:value},
		dataType:"json",
        success: function(response) {
			result=response.success;
			$.validator.messages.checkEmailAvailability=response.msg;
         }
     });
	 return result;
});

In the above code the message for the validator method is set by using

$.validator.messages.checkEmailAvailability=response.msg;

where the response.msg is the message we receive from the server.

This is a good and simple JavaScript snippet for the jQuery Validator plugin on how to add a jquery.validator.addmethod custom error message.

If you find this useful leave us a comment.

How to prevent form submit on enter using jQuery

I had a client that pressed enter after typing in a form by mistake and kept saying that my script had an error.
After disabling the form submission on enter key the problem vanished 🙂

Prevent form submit on enter script :

$(document).keydown(function(evt) {
   var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
   if (keyCode == 13) {
     return false;
   }
});

Minimum Widths for the text container in Fluid Layouts

Minimum width for the text that flows around a floating element.

A floating element takes space from the horizontal space from the text that flows around it. If browser view port is small the horizontal space left for the text may only fit a word or two per line resulting in a ugly narrow column.

241559_408204619244716_1660507095_o

The problem: when browser width is 320px the space left the floating text is small and the text looks ugly.

The fix for columns too small to contain text is to use the pseudo element :before  on the container that contains the floating text.

.floating-text-container {
     border-top: 1px solid transparent;/*fix for Mozilla Firefox*/
}
.floating-text-container:before {
      content: "";
      width: 100px;/*min width required for the floating text container */
      display: block;
      overflow: hidden;

}

241559_408204619244716_1660507095_o

The problem: when browser width is 320px the space left for the floating text is small and the text looks ugly but now the text will just show up under the image

If the browser width is greater, ex. 450px the text will float next to the image because the minimum width we set in the css is met

241559_408204619244716_1660507095_o

The problem: when browser width is 450px the space left for the floating text is small and the text looks ugly but now the text will just show up under the image

Make phpMyAdmin work with Varnish Cache.

How to make phpMyAdmin work on Nginx server with Varnish Cache?

Assuming you have configured Varnish Cache to drop cookies here is what you have to change to make phpMyAdmin work properly on your Nginx server.

  1. after you install phpMyAdmin make a symbolic link 
    sudo ln -s /usr/share/phpmyadmin/ /usr/share/nginx/www
  2. edit /etc/varnish/default.vcl – add in  sub vcl_recv 
    if (req.url ~ "^/phpmyadmin") {
return (pass);
}

    – add in sub vcl_fetch

    if (req.url ~ "^/phpmyadmin") {
return (hit_for_pass);
}
  3. edit /etc/phpmyadmin/config.inc.php and set 
     $cfg['PmaAbsoluteUri']="http://yourdomain.com/phpmyadmin/";

You can see that it’s not that complicated to make phpMyAdmin work with Varnish Cache.