Fancy box validation in JQuery

In this below script,Fancy box validation in JQuery/ javascript

Script:
We have implemented Vaildation code here.


<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.8/jquery.form-validator.min.js"></script>
<script>
$(function () {
  $.validate({
    modules : 'location, date, security, file, toggleDisabled',
    validateOnBlur : false,
    showHelpOnFocus : false,
    addSuggestions : false,
    showErrorDialogs : false,
    errorMessagePosition : 'bottom', // Instead of 'element' which is default
    onError : function($form) {
      var msgErr = '';
      $form.find('span.form-error').each(function(index, element) {
        msgErr += '<p>' + $(element).text() + '</p>';
      });
      $('#errMsg').html(msgErr);
    }
  });
});</script>

HTML:
<p id="errMsg"></p>
<div id="form">
    <div id="form-top">
    </div>
    <div id="email-error-dialog0"></div>

    <form accept-charset="UTF-8"  class="infusion-form" method="POST">

        <div>
            <label>First Name:</label>
            <input class="infusion-field-input-container required" id="inf_field_FirstName" name="inf_field_FirstName"
                   type="text" placeholder="First Name" data-validation="letternumeric" data-validation-allowing=" "
                   data-validation-error-msg="Please enter your first name"/>
        </div>
        <div>
            <label>Last Name:</label>
            <input class="infusion-field-input-container" id="inf_field_LastName" name="inf_field_LastName" type="text"
                   placeholder="Last Name" data-validation="letternumeric" data-validation-allowing=" "/>
        </div>
        <div>
            <label>Address:</label>
            <input class="infusion-field-input-container" id="inf_field_StreetAddress1" name="inf_field_StreetAddress1"
                   type="text" placeholder="Your Address" data-validation="letternumeric" data-validation-allowing=" "/>
        </div>
        <div>
            <label>Country:</label>
            <select id="inf_field_Country" name="inf_field_Country" style="width:171px; height:18px;">
                <option value="United States" selected="selected">United States</option>
            </select>
        </div>
        <div>
            <label>State:</label>
            <select class="span2" name="inf_field_State" style="width:171px; height:18px;">
                <option value="AL">Alabama</option>
                <option value="AK">Alaska</option>
                <option value="AZ">Arizona</option>
                <option value="AR">Arkansas</option>
             
            </select>
        </div>
        <div>
            <label>City:</label>
            <input class="infusion-field-input-container" id="inf_field_City" name="inf_field_City" type="text"
                   placeholder="Your City" data-validation="alphanumeric"/>
        </div>

        <div>
            <label>Zip Code:</label>
            <input class="infusion-field-input-container" id="inf_field_PostalCode" name="inf_field_PostalCode"
                   type="text" placeholder="Zip Code" maxlength="5" data-validation="number"/>
        </div>

        <div>
            <label>Phone:</label>
            <input class="infusion-field-input-container" id="inf_field_Phone1" name="inf_field_Phone1" type="tel"
                   maxlength="10" style="text-indent:10px; margin-left:10px; width:165px;" placeholder="Phone"
                   data-validation="number"/>
        </div>
        <div>
            <label>Email:</label>
            <input class="infusion-field-input-container" id="inf_field_Email" name="inf_field_Email" type="email"
                   style="text-indent:10px; margin-left:10px; width:165px;" placeholder="Email Address"
                   data-validation="email"/>
        </div>
</div>
<div id="form-btm">
    <input type="submit" id="form-btn"/>
</div>
</form>

<p id="para"></p>