CF7 Conditional Fields PRO 1.6.2 introduces the possibility to write your own JavaScript functions to determine whether or not a group should be shown.
Form
Form Code
<label>Date of birth:
[date date-of-birth "2010-04-03"]</label>
[group minus-18]
Sorry, you are too young to watch dirty pictures. Try decreasing your date of birth.
[/group][group plus-18]
Hooray! You are older than 18. Here's some explicit content:
<div style="font-family: monospace;white-space: pre;"> o <br> /__o <br> _// < <br>' </div>
[/group]
Conditional Fields (Text)
show [plus-18] if [date-of-birth] function "isOlderThan18"
show [minus-18] if [date-of-birth] function "isYoungerThan18"
In order for the above example to work, you need to create two JavaScript functions – not PHP functions! – called isOlderThan18($field) {}
and isYoungerThan18($field) {}
in your theme. These functions need to return true or false. Preferably, you need to place these functions somewhere in a custom JS file, or if you must, in your header.php or footer.php, for example before the closing </body> tag in your theme.
The $field parameter passed is the jQuery object of the date field. If you want to access the DOM field directly, you can get it with $field[0].
Here’s the full JavaScript code used to check if the user is older or younger than 18:
<script>
function isOlderThan18($field) {
//expected format: yyyy-mm-dd
var birthdate_str = $field.val();
var dmy = birthdate_str.split("-");
if (dmy.length !== 3 ||
isNaN(dmy[0]) || dmy[0].length!==4 ||
isNaN(dmy[1]) || dmy[1].length!==2 ||
isNaN(dmy[2]) || dmy[2].length!==2 )
{
return false; //invalid format
}
var birthdate = new Date(dmy[0], dmy[1] - 1, dmy[2]);
if (birthdate === "Invalid Date" || isNaN(birthdate))
{
return false; // invalid date
}
//at this point the date is valid
if (calculateAge(birthdate) >= 18) {
return true; // older than 18
} else {
return false; // younger than 18
}
}
function isYoungerThan18($field) {
return !isOlderThan18($field);
}
function calculateAge(birthdate) { // birthday is a date
var ageDifMs = Date.now() - birthdate.getTime();
var ageDate = new Date(ageDifMs); // miliseconds from epoch
return Math.abs(ageDate.getUTCFullYear() - 1970);
}
</script>