向动态表单添加验证

首先，您还可以将 JSON/Javascript 注入到视图中。虽然这不是首选，因为这样您将无法从中制作单独的 js 文件。但是在验证动态表单的情况下，我之前这样做了。

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

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>
}

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

查看此演示

这是官方文档的链接。 http://jqueryvalidation.org/documentation/

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" />

添加一个字段验证文档

.css

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

}

.js

$(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">');
});});

演示 JSFIDDLE 在这里

您应该能够通过不显眼的验证动态解析元素，但是您需要添加适当的属性以首先触发适当的验证。从根本上说，这与这个问题中发生的事情非常相似，他们通过javascript动态添加元素。

如果可以输出验证的 json blob，则可以使用以下内容： https://github.com/parris/iz#json

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

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 验证插件应该可以工作（见 http://jqueryvalidation.org）。

听起来您所需要的只是标记所有必填字段，因此您可以使用类向它们添加所需的规则，这将避免在模型和 javascript 之间协调动态元素的 id/名称。

将输入行更改为：

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

然后在你的 JavaScript 中：

$(document).ready(function() {
    var form = $( "#MyForm" );
    form.validate();
    jQuery.validator.addClassRules('requiredField', {
        required: true
    });
    form.on('submit', function () {
        if (form.valid()) {
            form.submit();
        }
    });
});

您还可以使用 (selector).valid() 检查各个元素的有效性。您可以通过添加到类规则列表来添加其他验证规则（必需规则除外）。

你也可以使用 Jquery 验证引擎。

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

我建议你，你可以使用Jquery Validate Engine的钩子。

这对你来说很容易。

我最近回答了一个问题，我们没有用jQuery做任何事情，如果你想用户自定义jQuery，请参考如下：

表单元素上，您可以使用递归代码，例如：在复选框的情况下

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

对于其他类型的元素，即输入、无线电等，将同样有效。

选中复选框时，禁用特定复选框

查看上面的更多信息，评论以获取更多信息或小型演示表单。

我使用 jQuery 验证插件达到了相同的要求

将以下代码放在页面的脚本部分中。您需要将 form-data 类添加到窗体中，并在将元素添加到页面时添加required_field。

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 插件进行客户端验证，并在 POST 操作中创建方法来验证您的数据。我总是建议不要将javascript与csharp或其他地方混合使用，以保持事物的井井有条。