javascript - 向动态表单添加验证

Question

我从数据库中提取要在特定表单上显示的内容，因此表单元素是动态的。

我根据我希望表单的显示方式显示单选按钮、复选框或文本框/文本区域。

在有人提交表单之前，我必须验证是否已选择每个表单条目(单选、复选框、文本框等)。

如何向这些动态表单元素插入验证？

示例:

<input type="checkbox" id="@formInputId" name="@formInputName" value="@element.Id"  />

Answer 1

首先，您还可以将 JSON/Javascript 注入(inject) View 中。尽管这不是首选，因为那样你将无法从中创建单独的 js 文件。但在验证动态表单时，我之前就这样做了。

由于您的表单 ID 来自数据库，您知道每个控件的 ID，因此您可以使用 jquery 单独识别每个元素。

jquery validation plugins使得添加验证规则变得非常容易。因此，您只需使用类似的内容在服务器端制定验证规则即可。

forEach(FormElement element in Model.FormElements){
 dynamic rules = new ExpandoObject();
 //set all the rule here.
 ViewBag.ElementId = rules;
}

基本规则结构给出here 。

然后在渲染控件时在 View 内部。检查

@if(ViewData.ContainsKey("[ElementId]")){
//if it exists
//inject json using newtonsoft json
<script>
$('#@Html.raw([ElementId])').rules("Add", JsonConvert.SerializeObject(ViewData["ElementId"]))
</script>
}