需求:需要一个表单不断的添加奖品信息
问题:在第一次表单后,只清空对象数据,不刷新页面(提高体验),会存在第二次提交时,不校验表单数据就可以提交。
思路:提交后销毁校验,然后再初始化。
文档链接
1、HTML
<form id="questForm" name="questForm" class="form-horizontal">
<div class="am-panel-bd" style="padding: 15px 0px;">
<div class="am-g am-form-group" style="margin-top:5px">
<div class="am-u-sm-3">
<label><span style="color: #ff0000;">*</span>问卷内容:</label>
</div>
<div class="am-u-sm-9">
<textarea rows="4" cols="6" class="am-form-field am-u-sm-9"
data-validation-message="自定义问卷内容" placeholder="输入自定义问卷类容"
ng-model="quest.contents" required />
</div>
</div>
<br />
<div class="am-g am-form-group" style="margin-top:5px">
<div class="am-u-sm-3">
<label><span style="color: #ff0000;">*</span>排序号:</label>
</div>
<div class="am-u-sm-9">
<input type="text" class="am-form-field am-u-sm-9"
data-validation-message="最小人数为正整数" pattern="^[1-9]\d*$" required
placeholder="最小人数" ng-model="quest.sort" />
</div>
</div>
<br />
<div class="am-g am-form-group" style="margin-top:5px">
<div class="am-u-sm-3">
<label><span style="color: #ff0000;">*</span>状态:</label>
</div>
<div class="am-u-sm-9">
<select class="am-form-field" ng-model="quest.state"
ng-options="m.code as m.value for m in stateList"></select>
</div>
</div>
</div>
<div class="am-panel-footer">
<button type="submit" class="am-btn am-btn-warning">保 存</button>
<button data-am-modal-close class="am-btn am-btn-secondary"
style="color: #fff;">取 消</button>
</div>
</form>
2、js
$(function() {
$('#questForm').validator({
onValid : function(validity) {
$(validity.field).closest('.am-form-group').find('.am-alert').hide();
},
onInValid : function(validity) {
var $field = $(validity.field);
var $group = $field.closest('.am-form-group');
var $alert = $group.find('.am-alert');
// 使用自定义的提示信息 或 插件内置的提示信息
var msg = $field.data('validationMessage') || this.getValidationMessage(validity);
if (!$alert.length) {
$alert = $('<div class="am-alert am-alert-danger am-u-sm-7"></div>').hide().appendTo($group);
}
$alert.html(msg).show();
},
submit : function() {
var formValidity = this.isFormValid();
if (formValidity) {
$scope.questsave();//调用后台接口
var options = this.options;
$("#questForm").validator('destroy');//销毁
$('#questForm').validator(options);//初始化
}
}
});
});