Monday, November 11, 2013

Client + Server Side Validation = New Love

Having to do some recent form validation I wanted to have a solution that worked both on the client and server side. I found it!

It comes from combining jQuery Validation Plugin and jQuery Validation PHP Plugin

Using both of these libraries I create one rule file and incorporate it for both client and server side validation. My recent rule file looks like the following.

<?php
    $validation_rules = array(
        'rules' => array(
            'timestamp' => array(
                'required' => true,
                'number' => true
            ),
            'full-name' => 'required',
            'address' => 'required',
            'city-state-zip' => 'required',
            'home-phone' => 'required',
            'email' => array(
                'required' => true,
                'email' => true
            ),
            'birthday' => array(
                'required' => true,
                'dateUS' => true
            )    
        ),
        'messages' => array(
            'timestamp' => array(
                'required' => 'Select a date.',
                'number' => 'The date selected is not valid.'
             ),
            'full-name' => 'Enter your full name.',
            'address' => 'Enter your address.',
            'city-state-zip' => 'Enter your city state and zip.',
            'home-phone' => 'Enter a phone number.',    
            'email' => array(
                'required' => 'Enter your email address',
                'email' => 'Enter a valid email address'
            ),
            'birthday' => array(
                'required' => 'Enter your birthday',
                'dateUS' => 'Enter a date in the format mm/dd/yyyy.' 
            )
        )
    );
?> 

Notice how I have dateUS. That is a custom validation rule I set up. Adding custom rules is really easy for both libraries.

I am using Twitter Bootstrap for my framework, and the following js helps jQuery validator work great on the client side.

var settings = $('#form').validate(<?php echo json_encode($validation_rules); ?>).settings;
$.extend(settings, {
    errorClass: 'help-block',
    highlight: function(element){
        $(element).closest('.control-group').addClass('error');
    },
    success: function(element){
        element.closest('.control-group').removeClass('error');
    }
});

My post to page now follows something along the following logic.

<?php 
    require_once 'rules.php'; 
    require_once 'validator.class.php'; 

    $oValidator = new Validator($validation_rules);

    $validated_data = $oValidator->validate($_POST);

    if (count($validated_data) == 0){
        echo 'no errors';
    }
    else{
        print_r($validated_data);
    }
?>

Friday, February 8, 2013

Regular Expressions

I found a great series online that I am currently going through to teach myself regular expressions. It is entitled Regular Expressions for Dummies. It is great so far! It has lead me to a great resource for practicing regular expressions at http://gskinner.com/RegExr/.

Wednesday, January 9, 2013

Detecting When Scrolling Stops

There isn't a scrollstop listening event, so how can you call a function when the browser stops scrolling? The trick is to use setTimeout() to a call a function and then clearing the timer every time the page scrolls. When the page finishes scrolling the timer will not be cleared the final time and the function will execute. Here is a sample fiddle.

var timer;     
$(window).scroll(function(e){
         clearTimeout(timer);
         $('#search_tab').fadeOut('slow');
         timer = setTimeout(checkStop,150);
 });

function checkStop(){
  $('#search_tab').fadeIn('slow');
} 

Friday, November 30, 2012

Create a Stylish Callout Box with CSS

I recently needed to create a callout box using only CSS. I was able to do this using the css :before and :after Pseudo-elements. The trick was adding the border color to the side I wanted the triangle to point towards. Here is the CSS.

#comment{
 position: relative;
 padding: 10px;
 width: 150px;
 height: 150px;
 background-color: #F0F0F0;
 border: 1px solid #D0D0D0;
 -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
 -moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
 #comment:after, #comment:before {
  border: solid transparent;
  content: ' ';
  height: 0;
  position: absolute;
  width: 0;
 }
 #comment:after {
  border-color: rgba(240, 240, 240, 0);
  border-bottom-color: #F0F0F0;//Change this to change direction of triangle
  border-width: 9px;
  top: -18px;
  left: 7px;
 }
 #comment:before {
  border-color: rgba(208, 208, 208, 0);
  border-bottom-color: #D0D0D0;//Change this to change direction of triangle
  border-width: 10px;
  top: -20px;
  left: 6px;
 }

Here is a fiddle that shows what this produces. I also found this great resource online that mimics what I am producing here.

I actually liked Simon's approach to this and thought it was worth writing down his code for future reference. Just in case his site is ever taken down.

.arrow_box {
 position: relative;
 background: #88b7d5;
 border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
 bottom: 100%;
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
}

.arrow_box:after {
 border-color: rgba(136, 183, 213, 0);
 border-bottom-color: #88b7d5;
 border-width: 30px;
 left: 50%;
 margin-left: -30px;
}
.arrow_box:before {
 border-color: rgba(194, 225, 245, 0);
 border-bottom-color: #c2e1f5;
 border-width: 36px;
 left: 50%;
 margin-left: -36px;
}

Wednesday, October 24, 2012

Naming Conventions

This is a topic that will bring a wide range of opinions, but in order to keep myself consistent through my various projects, I have decided to follow the below naming conventions based on the language I am programming in.

PHP

Variable: underscore
Function: underscore
Class: camelCase

Javascript

Variable: camelCase
Function: camelCase
Constructor: camelCase

HTML/CSS

Class: hyphen
ID: hyphen
Other Attributes: hyphen/underscore (depending on project needs)

File Names

hyphen

MySQL

Database: underscore
Tables: underscore
Fields: underscore

Wednesday, October 17, 2012

Preventing Margin Collapse

Margin collapse happens when top and bottom margins of block elements are combined into a single margin whose size is equal to the margin of the element with the largest margin.

There are three basic cases of when margin collapse occurs.

  1. Adjacent siblings
  2. Parent and first/last child
  3. Empty blocks

The most frustrating case for me is the second one. An example would be adding margin-top: 10px to a header element and instead of the expected behavior of having the header be 10px down from the top of the div the entire div moves down 10px. Setting the div's overflow property to anything but the default visible value fixes this problem.

Some great resources to check out:

Retain Height of Floated Elements

A very common thing that a developer moving away from tables will want to do is float divs next to each other. This is a great way to display elements side by side but one fall back is they lose there block height causing other content to come up from beneath them. There is a simple fix to this problem that I would like to show today.

The HTML

<div id="container">
   <div id="floatLeft">
       <p>I want to keep this elements height.</p>
   </div>
   <div id="floatRight">
       <p>I want to keep this elements height as well.</p>
   </div>
</div>

The fix is setting the parent div of both floated elements overflow property to hidden/auto.

The CSS

#container{
  width: 960px;
  margin: 0px auto;
  overflow: hidden;
}
#floatLeft{
  float: left;
  width: 480px;
}
#floatRight{
  float: right;
  width: 480px;
}