Уведомление об ошибке Validator в окне диалога/fancybox

Question

Я использую библиотеку formvalidator.net для проверки формы на моем сайте. Как бы из-за ограниченности пространства я хотел бы выпустить уведомление об ошибке на fancybox или в диалоговом окне, чтобы все поля, отсутствующие пользователем, будут уведомляться в таком поле; http://screencast.com/t/L3qhWmo6

Это код, который я использую для загрузки библиотеки валидатора форм;

<link href="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.43/theme-default.min.css" rel="stylesheet" type="text/css" /> 

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.43/jquery.form-validator.min.js"></script> 
<script> 
var $messages = $('#email-error-dialog0'); 
    $.validate({ 
    modules : 'location, date, security, file, toggleDisabled', 
    validateOnBlur : false, 
    showHelpOnFocus : false, 
    addSuggestions : false, 
    showErrorDialogs : true, 
    errorMessagePosition : $messages // Instead of 'element' which is default 

    }); 

</script> 

Есть ли возможность показать по диалогу? У меня уже есть jquery.fancybox-1.3.1.pack.js библиотека доступна на странице. Нужно посоветовать.

Вот ссылка проверочного https://jsfiddle.net/m3g6nxwh/1/

Answer 1

Вы должны добавить OnError функцию опции как:

$(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 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> 


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

    <form accept-charset="UTF-8" action="/formsubmit.php" 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> 
       <option value="CA">California</option> 
       <option value="CO">Colorado</option> 
       <option value="CT">Connecticut</option> 
       <option value="DE">Delaware</option> 
       <option value="DC">District Of Columbia</option> 
       <option value="FL">Florida</option> 
       <option value="GA">Georgia</option> 
       <option value="HI">Hawaii</option> 
       <option value="ID">Idaho</option> 
       <option value="IL">Illinois</option> 
       <option value="IN">Indiana</option> 
       <option value="IA">Iowa</option> 
       <option value="KS">Kansas</option> 
       <option value="KY">Kentucky</option> 
       <option value="LA">Louisiana</option> 
       <option value="ME">Maine</option> 
       <option value="MD">Maryland</option> 
       <option value="MA">Massachusetts</option> 
       <option value="MI">Michigan</option> 
       <option value="MN">Minnesota</option> 
       <option value="MS">Mississippi</option> 
       <option value="MO">Missouri</option> 
       <option value="MT">Montana</option> 
       <option value="NE">Nebraska</option> 
       <option value="NV">Nevada</option> 
       <option value="NH">New Hampshire</option> 
       <option value="NJ">New Jersey</option> 
       <option value="NM">New Mexico</option> 
       <option value="NY">New York</option> 
       <option value="NC">North Carolina</option> 
       <option value="ND">North Dakota</option> 
       <option value="OH">Ohio</option> 
       <option value="OK">Oklahoma</option> 
       <option value="OR">Oregon</option> 
       <option value="PA">Pennsylvania</option> 
       <option value="RI">Rhode Island</option> 
       <option value="SC">South Carolina</option> 
       <option value="SD">South Dakota</option> 
       <option value="TN">Tennessee</option> 
       <option value="TX">Texas</option> 
       <option value="UT">Utah</option> 
       <option value="VT">Vermont</option> 
       <option value="VA">Virginia</option> 
       <option value="WA">Washington</option> 
       <option value="WV">West Virginia</option> 
       <option value="WI">Wisconsin</option> 
       <option value="WY">Wyoming</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>