![](/img/trans.png)
[英]How to validate dynamically added fields and prevent form submission using jQuery?
[英]How do I use jquery to validate form fields, that was populated dynamically?
該列表是根據用戶職業動態獲取的。 這就是我得到清單的方式:
@for (int i = 0; i < Model.AppraisalQuestions.ToList().Count; i++)
{
@Html.HiddenFor(m => m.AppraisalQuestions[i].QuestionId)
@Html.HiddenFor(m => m.AppraisalQuestions[i].QuestionDescription)
<p>
@Html.DisplayFor(m => m.AppraisalQuestions[i].QuestionDescription)
@Html.ValidationMessageFor(m => m.AppraisalQuestions[i].SelectedAnswer, "", new { @class = "text-danger" })
</p>
<div class="row lead evaluation">
<div id="colorstar" class="starrr ratable"></div>
<span id="count">0</span> star(s) - <span id="meaning"> </span>
@foreach (var answer in Model.AppraisalQuestions[i].PossibleAnswers)
{
//var inputId = Model.AppraisalQuestions[i].QuestionId + "-" + answer.ID;
@Html.HiddenFor(m => m.AppraisalQuestions[i].SelectedAnswer, new { id = "SelectedAns", required = "required" })
}
</div>
}
這是模型:
public class AppraisalInputModel
{
public int AppraisalId { get; set; }
public AppraisalInputModel()
{
AppraisalQuestions = new List<AppraisalQuestionInputModel>();
}
public string FullName { get; set; }
public string JobTitle { get; set; }
public int StaffId { get; set; }
public int ScorerId { get; set; }
public int BranchId { get; set; }
public string AppraisalTitle { get; set; }
public IList<AppraisalQuestionInputModel> AppraisalQuestions { get; set; }
}
這是AppraisalQuestionInputModel
public class AppraisalQuestionInputModel
{
public int QuestionId { get; set; }
public string QuestionDescription { get; set; }
public bool IsGeneral { get; set; }
[Required]
[Display(Name = "Score")]
public int? SelectedAnswer { get; set; }
public IEnumerable<AnswerVM> PossibleAnswers => new List<AnswerVM>()
{
new AnswerVM {ID = 1, Text = "1 - Poor"},
new AnswerVM {ID = 2, Text = "2 - Below Expectation"},
new AnswerVM {ID = 3, Text = "3 - Meets Expectation"},
new AnswerVM {ID = 4, Text = "4 - Good"},
new AnswerVM {ID = 5, Text = "5 - Excellent"},
};
}
這是腳本部分代碼:
@section Scripts{
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
// Starrr plugin (https://github.com/dobtco/starrr)
var __slice = [].slice;
(function($, window) {
var Starrr;
Starrr = (function() {
Starrr.prototype.defaults = {
rating: void 0,
numStars: 5,
change: function(e, value) {}
};
function Starrr($el, options) {
var i,
_,
_ref,
_this = this;
this.options = $.extend({}, this.defaults, options);
this.$el = $el;
_ref = this.defaults;
for (i in _ref) {
_ = _ref[i];
if (this.$el.data(i) != null) {
this.options[i] = this.$el.data(i);
}
}
this.createStars();
this.syncRating();
this.$el.on('mouseover.starrr', 'span', function(e) {
return _this.syncRating(_this.$el.find('span').index(e.currentTarget) + 1);
});
this.$el.on('mouseout.starrr', function() {
return _this.syncRating();
});
this.$el.on('click.starrr', 'span', function(e) {
return _this.setRating(_this.$el.find('span').index(e.currentTarget) + 1);
});
this.$el.on('starrr:change', this.options.change);
}
Starrr.prototype.createStars = function() {
var _i, _ref, _results;
_results = [];
for (_i = 1, _ref = this.options.numStars; 1 <= _ref ? _i <= _ref : _i >= _ref; 1 <= _ref ? _i++ : _i--) {
_results.push(this.$el.append("<span class='glyphicon .glyphicon-star-empty'></span>"));
}
return _results;
};
Starrr.prototype.setRating = function(rating) {
if (this.options.rating === rating) {
rating = void 0;
}
this.options.rating = rating;
this.syncRating();
return this.$el.trigger('starrr:change', rating);
};
Starrr.prototype.syncRating = function(rating) {
var i, _i, _j, _ref;
rating || (rating = this.options.rating);
if (rating) {
for (i = _i = 0, _ref = rating - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) {
this.$el.find('span').eq(i).removeClass('glyphicon-star-empty').addClass('glyphicon-star');
}
}
if (rating && rating < 5) {
for (i = _j = rating; rating <= 4 ? _j <= 4 : _j >= 4; i = rating <= 4 ? ++_j : --_j) {
this.$el.find('span').eq(i).removeClass('glyphicon-star').addClass('glyphicon-star-empty');
}
}
if (!rating) {
return this.$el.find('span').removeClass('glyphicon-star').addClass('glyphicon-star-empty');
}
};
return Starrr;
})();
return $.fn.extend({
starrr: function() {
var args, option;
option = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
return this.each(function() {
var data;
data = $(this).data('star-rating');
if (!data) {
$(this).data('star-rating', (data = new Starrr($(this), option)));
}
if (typeof option === 'string') {
return data[option].apply(data, args);
}
});
}
});
})(window.jQuery, window);
$(function() {
return $(".starrr").starrr();
});
$(document).ready(function () {
var starCount;
var correspondence = ["", "Poor", "Below Expectation", "Above Expectation", "Good", "Excelent"];
$('.ratable').on('starrr:change', function(e, value) {
$(this).closest('.evaluation').children('#count').html(value);
$(this).closest('.evaluation').children('#SelectedAns').val(value);
starCount = $(this).closest('.evaluation').children('#SelectedAns').val(value);
if (starCount === null) {
swal("", "Please Enter First Name", "error");
}
$(this).closest('.evaluation').children('#meaning').html(correspondence[value]);
var currentval = $(this).closest('.evaluation').children('#count').html();
var target = $(this).closest('.evaluation').children('.indicators');
target.css("color", "black");
target.children('.rateval').val(currentval);
target.children('#textwr').html(' ');
});
$('#hearts-existing').on('starrr:change', function(e, value) {
$('#count-existing').html(value);
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
}
並且所有問題都必須回答。 如何驗證以確保回答所有問題?
我已經嘗試過form.Validate()
但是它不起作用。
您的視圖正在為同一SelectedAnswer
生成5個隱藏的輸入。 您只需要一個(只有第一個的值將由DefaultModelBinder
綁定),並且需要在starrr:change
事件中設置其值。
但是,默認情況下不會驗證隱藏的輸入,因此您還需要配置$.validator
來進行客戶端驗證。
首先,修改視圖以刪除foreach
循環並將其替換為單個隱藏輸入。 請注意, id
屬性也已替換為類名(重復的id
屬性是無效的html)
@for (int i = 0; i < Model.AppraisalQuestions.ToList().Count; i++)
{
@Html.HiddenFor(m => m.AppraisalQuestions[i].QuestionId)
@Html.HiddenFor(m => m.AppraisalQuestions[i].QuestionDescription)
<p>
@Html.DisplayFor(m => m.AppraisalQuestions[i].QuestionDescription)
@Html.ValidationMessageFor(m => m.AppraisalQuestions[i].SelectedAnswer, "", new { @class = "text-danger" })
</p>
<div class="row lead evaluation">
<div class="starrr ratable"></div> // remove invalid id attribute
<span class="count">0</span> star(s) - <span class="meaning"> </span>
@Html.HiddenFor(m => m.AppraisalQuestions[i].SelectedAnswer, new { @class = "rating" })
</div>
}
然后設置輸入的值,以便在您提交表單時將其回發
$('.ratable').on('starrr:change', function(e, value) {
var container = $(this).closest('.evaluation'); // cache it
container.children('.count').html(value); // modify
container.children('.rating').val(value); // set value of input
container.children('.meaning').html(correspondence[value]); // modify
....
})
請注意,與starCount
相關的代碼似乎不是必需的,並且不清楚該方法中的其他一些代碼在做什么或為什么要使用它(例如, currentval
與value只是相同的value
)
最后,要獲得客戶端驗證,請添加以下腳本(但不在 document.ready()
內部)
$.validator.setDefaults({
ignore: ":hidden:not('.rating')"
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.