我在我的网站上使用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 库。需要建议。
答案 0 :(得分：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>