Validating Numbers

Is the content intended to be a number?

When dealing with validations in input forms, one occasionally has to determine if the content entered is actually a number. However, the input content will always be string when performing a check on an input.

Always a String
1
2
3
4
$('input').on('change', function() {
//Outputs 'string'
console.log(typeof $(this).val());
});

Although this behavior is convenient for most situations, it could be a hassle for numbers.

To solve this problem, parseInt will be used.

String to Number
1
2
3
4
5
$('input').on('change', function() {
//Outputs 'string'
//The '10' is for decimal form
console.log(typeof parseInt($(this).val(), 10);
});

Want to point out that my validator function could be used in place of typeof.

Mathematically Inclined Cases

Besides representing numbers as integers or decimal, there are also situations where numbers could be negative or positive zero or represented in exponential form. There are even more extreme cases such as infinity.

For these cases, the numbers representations are valid, but may be unusual to the some individuals. It could be worthwhile to also validate against these cases and to prevent a jarring user experience when inputting in forms.

WordPress - Mixed Content Warning

Insecured Content

Recently, when working with WordPress, I noticed that when using the Master Slider plugin, a content slider/carousel plugin, Firefox was complaining about mixed content from the images. I was using ssl on the site.

Initially I thought this was the wrongdoing of the plugin, but looking through the support pages for the plugin did not yield any immediate answers. The source did not yield any obvious error.

While trying to figure out the problem with the slider, I also notice the warning of the mixed content from the media library of WordPress.

This lead me to think that it may not be the plugin’s fault, and there might be something wrong with WordPress or with the configuration at least.

Looking further into the situation lead me to figure out that I have forgotten to change the url settings in WordPress.

To solve my problem I navigated to

1
Settings > General

Then changing

1
2
WordPress URL
Site Address URL

values to use https for the domain to solve the problem.

Bash - Clear History Upon Exiting Terminal

Cleaning terminal history

Whether you want to have some sense of privacy or a sense of cleanliness, working with the terminal leaves a history that you might want to remove.

Removing the .bash_history upon exiting the terminal is the goal for this post.

Create a .rm_terminal_history.sh file in the directory that .bashrc file is in.

.rm_terminal_history.sh
1
2
3
4
5
6
7
8
9
10
11
12
13
14
rm_hist(){  
if [ -f ~/.bash_history ]
then
rm ~/.bash_history
history -c
echo ".bash_history removed."
exit 0
else
echo ".bash_history can not be found."
exit 1
fi
}

trap rm_hist EXIT

After the script is created, give it executable privileges.

Make Script Executable
1
chmod +x .rm_terminal_history.sh

Now add a reference to your .bashrc file for the script to run

Add Entry to .bashrc
1
2
#Add following line to .bashrc
source ~/.rm_terminal_history.sh

The .bash_history file will be remove when exiting the terminal at any time.

WordPress Quick Tips #1

Enqueue Multiple Google Fonts into One Stylesheet

Taking the twenty-fourteen theme for example, modify the ‘functions.php’ by separate the differents fonts that is to be used with a pipe character in the twentyfourteen_font_url function.

Single Stylesheet for a Group of Fonts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function twentyfourteen_font_url() {
$font_url = '';

if ( 'off' !== _x( 'on', 'Oswald font: on or off', 'twentyfourteen' ) ) {
$font_url = add_query_arg( 'family', urlencode( 'Oswald:400|Droid Sans:400'), "//fonts.googleapis.com/css" );
}

return $font_url;
}

function twentyfourteen_scripts() {
wp_enqueue_style( 'googlefont-oswald-and-opensans', twentyfourteen_font_url(), array(), null );

//...
}

add_action( 'wp_enqueue_scripts', 'twentyfourteen_scripts' );

Bouncing Contact Form 7 Emails

If you wish to receive messages from the Contact Form 7 form to your personal email, but the behavior is spotty (emails not being sent to you), then it would help to install the Flamingo plugin. This plugin will save messages in WordPress, such that messages will be accessible from the WordPress dashboard.

Simple Validator

Simply Validating

Validation conjures up thoughts of input form validation, but validation could also pop up elsewhere when there is user input such as the case for parameters in jQuery plugins.

The following article will describe a build-up of a modular validate function.

The validation will perform as follows

Format and Example
1
2
//validate(inputData, attr, attrRule, againstValue);
ex: validate(10, number, greaterThan, 11);

The example function will determine whether 10 as a number is greater than 11, which turns out to be false. The output of validate will be a string that states the error.

We start off with the validate variable as an immediately-invoking function with the variables that are to be accepted in the validate function

Variables Accepted
1
2
3
var validate = (function() {
var inputData, againstValue, attr, attrRule;
});

The validate function will have the blocks within

General Function Layout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var validate = (function() {
var inputData, againstValue, attr, attrRule;

//Validation Messages
var validationMessage = {};

//Validation Definitions
var validationDefinitions = {};

//Run Check
var validationCheck = function() {};

//Input Gather
return function() {

};
});

Accept Variables Input

The ‘Input Gather’ function will expose the arguments to the variables that are open within the validate function. The main comparision is done with the validationDefinition function, before its boolean outcome is handed off and check by validationCheck.

Input Gather
1
2
3
4
5
6
7
8
9
10
11
//Start off the validation
return function() {
var args = arguments;
attr = args[1];
attrRule = args[2];
inputData = args[0];
againstValue = args[3];

//Kicks off the validation check with supplied data
return validationCheck(validationDefinitions[attr][attrRule]());
};

Validation Rules

The validationDefinitions variable is an object that has a mapping of attr: {attrRule: function(){}}. The actual validation process is done by calling upon the attrRule definition function.

Validation Definitions
1
2
3
4
5
6
7
8
9
//Validation patterns
//Passed-in data are compared against the desired value (againstValue)
var validationDefinitions = {
number: {
greaterThan: function() {
return inputData > againstValue;
}
}
};

Determining Validness

The result of the validation helps determine if a validation message needs to be sent

Validation Check
1
2
3
4
5
6
7
//Run the checks against the validation patterns
var validationCheck = function(passedCheck) {
//Only generate a message value was not validated
if(!passedCheck) {
return validationMessage[attr][attrRule]();
}
};

Noting the Validation Error

The output of an invalid data input will result in a message being return.

Validation Messages
1
2
3
4
5
6
7
8
9
//Determine which message type should be used
var validationMessage = {
number: {
//Generate the message for a specific attrRule
greaterThan: function() {
return inputData + ' is not greater than ' + againstValue;
}
}
};

All Together

The validate function is complete on the bottom. More validation definitions and messages be added in the proper blocks.

Complete Validation Function
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
var validate = (function() {  

//Make these variables accessible to all functions inside validator
var inputData, againstValue, attr, attrRule;

//Determine which message type should be used
var validationMessage = {
number: {
//Generate the message for a specific attrRule
greaterThan: function() {
return inputData + ' is not greater than ' + againstValue;
}
/*
lessThan: function() {
return inputData + ' is not less than ' + againstValue;
}
//More messages here
*/

}
};

//Validation patterns
//Passed-in data are compared against the desired value (againstValue)
var validationDefinitions = {
number: {
greaterThan: function() {
return inputData > againstValue;
}
/*
,lessThan: function() {
return inputData < againstValue;
}
//More rules here
*/

}
};

//Run the checks against the validation patterns
var validationCheck = function(passedCheck) {
//Only generate a message value when not validated
if(!passedCheck) {
return validationMessage[attr][attrRule]();
}
};

//Start off the validation
return function() {
var args = arguments;
attr = args[1];
attrRule = args[2];
inputData = args[0];
againstValue = args[3];

//Kicks off the validation check with supplied data
return validationCheck(validationDefinitions[attr][attrRule]());
};
})();

//Usage: validate(inputData, 'number', 'greaterThan', 5);
console.log(validate(4, 'number', 'greaterThan', 5));
//Output: '4 is not greater than 5'

Online Demo