Javascript 向动态表单添加验证

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

我显示单选按钮、复选框或文本框/文本区域，具体取决于我希望表单的显示方式

在有人提交表单之前，我必须验证每个表单条目（单选、复选框、文本框等）是否已被选中

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

例如：

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

---

您应该能够动态地使用不引人注目的验证，但是您需要添加适当的属性以首先触发适当的验证。从根本上讲，这与现在的情况非常相似，他们通过javascript动态添加元素。

要开始，还可以将JSON/javascript注入视图中。虽然这不是首选，因为这样你就不能用它制作一个单独的js文件。但对于动态表单的验证，我在前面做过

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

使添加验证规则变得非常容易。因此，您只需在服务器端使用类似这样的内容来创建验证规则

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

给出了基本规则结构

然后在渲染控件时显示在视图内部。查证

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

@if（ViewData.ContainsKey（“[ElementId]”）{
//如果存在
//使用newtonsoftjson注入json
$（'#@Html.raw（[ElementId]））.rules（“添加”，JsonConvert.SerializeObject（ViewData[“ElementId]））
}

您看过jquery验证插件了吗？为什么要重新发明轮子呢。它使用起来非常简单

检查这个

---

这里是官方文件的链接

如果您可以输出验证的json blob，您可以使用：

它将允许您指定一组JSON规则，如下所示：

var rules = {
    'cost': [
        {
            'rule': 'between',
            'args': [17, 1000],
            'error': 'The cost must be between 17, 1000'
        },
        {
            'rule': 'required',
            'error': 'You must specify a cost'
        },
    ],
    'producer.id': [
        {
            'rule': 'int',
            'error': 'Producer ID must be an int'
        }
    ],
    'producer.name.first': [
        {
            'rule': 'alphaNumeric',
            'error': 'Must be names and numbers'
        }
    ]
};

然后收集您的值并进行如下验证：

are(rules).validFor({
    cost: 20,
    producer: {
        id: 1,
        name: {
            first: 'bob'
        }
    }
});

它有一些内置的验证，应该非常符合您的需要。如果没有，您可以填充一些自定义验证

---

注：Iz，是我写的一个库，是的，我现在正在向你们介绍它

JQuery验证插件应该可以工作（请参阅）

听起来您只需要标记所有必需的字段，这样就可以通过使用类向它们添加必需的规则，从而避免在模型和javascript之间协调动态元素的ID/名称

将输入行更改为：

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

您还可以使用

（选择器）.valid（）

检查单个元素的有效性。您可以通过添加到类规则列表中来添加其他验证规则（除必需规则外）。

Html

<form id="myform">
<input name="product[0][name]" id="form_product[0][name]" data-rule-required="true" />
<input name="product[1][name]" id="form_product[1][name]" data-rule-required="true" />
<input name="product[2][name]" id="form_product[2][name]" data-rule-required="true" />
<br/>
<br/>
<br/>
<input type="submit" />

}

js

#docs {
display: block;
position: fixed;
bottom: 0;
right: 0;

$(document).ready(function () {

$('#myform').validate({ // initialize the plugin      
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
});

$('button').one('click', function () {
    $('#myform').append('<input name="product[3][name]" id="form_product[3][name]" data-rule-required="true">');
});});

$（文档）.ready（函数（）{
$（'#myform'）。验证（{//初始化插件
submitHandler:函数（表单）{//用于演示
警报（“已提交的有效表单”）；//用于演示
返回false；//用于演示
}
});
$（'button'）。一个（'click'，函数（）{
$（'#myform'）。追加（''）；
});});

您也可以使用

其中，您只需要管理动态元素的class属性

我建议你，你可以用

---

这对您来说很容易。

我最近回答了一个问题，我们不使用jQuery，如果您想使用自定义jQuery，请参考以下内容：

在form元素上，您可以对ex:使用递归代码，以防出现复选框

$(document).ready(function () {
    $('#new_user_form *').filter(':checkbox').each(function(){
        if(this.id=='row1' && this.value=='3') {
        } else {
            $(this).attr("checked",false);
        }
    });
});

对于其他类型的元件，如输入、无线电等，也同样适用

---

查看以上内容以获取更多信息、评论以获取更多信息或一个小的演示表单。

我使用

将以下代码放在页面的脚本部分。 您需要将

表单数据

类添加到表单中，并在向页面添加元素时添加

必填字段

var validator = null;
$(document).ready(function () {
    try {
        var validatedForm = $(".form-data");
        validator = validatedForm.validate && validatedForm.validate({
            rules: {
                required_field: {
                    required: true
                }
            },
            messages: {
                required_field: {
                    required: " "
                }
            },
            errorElement: "span",
            showErrors: function (errorMap, errorList) {
                this.defaultShowErrors();
            },
            highlight: function (element) {
                // do something like
                $(element).closest('...').removeClass('success').addClass('error');
            },
            unhighlight: function (element) {
                // do something like
                $(element).closest('...').removeClass('error');
            },
            submitHandler: function(form) {
                // submit form
                form.submit();
            }
            success: function (element) {
                // do something like
                $(element).closest('...').removeClass('error').end().remove();
            },
            onfocusout: function (element) {
                $(element).valid();
            },
        });

        $.each($(".required_field"), function (index, value){
            $(value).rules( "add", {
                  required: true,
                  messages: {
                      required: " "
                  }
            });
        });
    } catch(err) {
        console.log("javascript error", err);
    }
});

提交时，您可以检查表单是否有效：

if($('#formId').valid()) {
    ...

---

我想最好的方法是使用$.validate插件进行客户端验证，并在操作后创建方法来验证数据。我总是建议不要将javascript与csharp或其他地方混合使用，以保持事物的有序性。

它是如何动态的？您的视图基于具有特定属性的模型，不是吗？您的意思是jquery验证？仅在客户端？@AbbasAmiri是的，我有一个强类型的viewmodel，就像我循环使用它们一样，比如

@foreach（model.FormElements中的FormElement）

，但是元素的#来自数据库。是的，我正在寻找客户端验证。@user1361315我建议您使用HtmlHelpers，它们使您的视图干净且易于维护，我看不出在您的场景中使用它们有任何问题。验证完全由HtmlHelpers支持。我将对此进行研究，但目前它不使用HtmlHelpers，我如何手动进行验证？

if($('#formId').valid()) {
    ...