向动态表单添加验证

时间:2013-09-13 19:02:50

标签: javascript jquery asp.net-mvc forms validation

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

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

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

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

示例:

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

10 个答案:

答案 0 :(得分:4)

开始使用,您还可以将JSON / Javascript注入视图中。虽然这不是优先的,因为那样你就不能用它来制作一个单独的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

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

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

答案 1 :(得分:2)

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

选中此Demo

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

答案 2 :(得分:1)

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

DEMO jsfiddle HERE

答案 3 :(得分:0)

您应该能够parse the elements动态地进行不显眼的验证,但是您需要先添加适当的属性来触发相应的验证。从根本上说,它与question中发生的事情非常相似,他们通过javascript动态添加元素。

答案 4 :(得分:0)

如果您可以输出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,我写的是一个库,是的,我现在正在向你推销它。

答案 5 :(得分:0)

JQuery Validate插件应该可以工作(参见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()检查各个元素的有效性。您可以通过添加到类规则列表中添加其他验证规则(除了必需)。

答案 6 :(得分:0)

您也可以使用Jquery Validate engine

其中,您只需管理动态元素的class属性。

我建议你,你可以使用Hook of Jquery Validate Engine

对你来说很容易。

答案 7 :(得分:0)

我最近回答了一个问题,即如果您想使用自定义jQuery,我们不会使用jQuery,请参考如下:

在表单元素上,您可以使用ex的递归代码:如果是复选框

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

对于其他类型的元素(即输入,无线电等)也可以使用。

On selecting a checkbox disable spefic checkboxes

上面有关详情的评论,请参阅更多信息或小型演示文稿。

答案 8 :(得分:0)

我使用jQuery Validation Plugin

达到了相同的要求

将以下代码放在页面的脚本部分中。 您需要在表单中添加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()) {
    ...

答案 9 :(得分:0)

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