对话框/ fancybox上的表单Validator错误通知

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>