Dynamic fileds don't validate

http://jsfiddle.net/jordan_enev/31u5p7cy/3/

HTML

<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form method="post" novalidate="novalidate"><input name="__RequestVerificationToken" type="hidden" ><input name="uid" type="hidden" value="6474dd44-d0fd-49cc-9638-9d6d3b245ccc">                    <div class="form__select-wrap">
                        <select name="SelectedTitle" class="form__select" id="SelectedTitle"><option selected="selected" value="">Title*</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
<option value="dr">Dr</option>
</select>
                        <span class="form__error-msg"></span>
                    </div>
                    <div class="form__input-wrap">
                        <input name="FirstName" class="form__input" id="FirstName" type="text" placeholder="First Name*" value="" autocomplete="given-name">
                        <span class="form__error-msg"></span>
                        <div class="form__input-icon"></div>
                    </div>
                    <div class="form__input-wrap">
                        <input name="LastName" class="form__input" id="LastName" required="" type="text" placeholder="Last Name*" value="" autocomplete="family-name">
                        <span class="form__error-msg"></span>
                        <div class="form__input-icon"></div>
                    </div>
                    <div class="form__input-wrap">
                        <input name="EmailAddress" class="form__input" id="EmailAddress" required="" type="email" placeholder="Email address*" value="" autocomplete="email">
                        <span class="form__error-msg"></span>
                        <div class="form__input-icon"></div>
                    </div>
        ...

JavaScript

var form = $('form');
form.validate({
                rules: {
                    FirstName: {
                        required: true
                    },
                    LastName: {
                        required: true
                    },
                    EmailAddress: {
                        required: true,
                        email: true
                    },
                    Postcode: {
                        required: true
                    }
                },
                messages: {
                    FirstName: {
                        required: 'Please enter your first name'
                    },
                    LastName: {
                        required: 'Please enter your last name'
                    },
                    EmailAddress: {
                        required: 'Please enter an email address',
                        email: 'Please ensure this is a correctly formatted email address'
                    },
                    Postcode: {
                        required: 'Please enter a postcode'
                    }
                },
                errorPlacement: (err, element) => element.next('.form__error-msg').empty().append(err),
                onfocusout: function (element) {
                    this.element(element)
                }
            });