多形式动态字段javascript验证

时间:2016-11-25 10:58:36

标签: javascript php html

我有多种形式:

<?php for ($i = 0; $i > $n; $i++) { ?> // n is no. of value (no limit)
    <form>
        <input name="<?php echo $i; ?>venue" type="text">
        <input name="roster" type="text">
        <input type="submit" name="btn_venue">

    </form>
<?php } ?>
    <form>
        <input name="hospitality" type="text">
        <input name="template" type="text">
        <input type="submit" name="btn_hospitality">
    </form>
    ...
    ...
    <form>
        <input name="element" type="text">
        <input name="alignment" type="text">
        <input type="submit" name="btn_xyz">
    </form>

我希望以所有形式验证(字段不应为空),我该如何使用验证?

我尝试了jQuery验证:

<script>
    $('document').ready(function () {
        $('form').each(function (key, form) {
            $(form).validate({
                rules: {
                    hospitality: {
                        required: true
                    },
                    //...
                    //...
                    alignment: {
                        required: true
                    }
            });
        });
    });
</script>

我已经管理了静态名称字段验证,但我不知道动态venue名称验证。任何人都可以帮助我吗?

如果只有一个表单易于维护但动态多表单提交验证如何验证。

一次只有一个表单提交,但特定表单字段验证它是如何可能的?

2 个答案:

答案 0 :(得分:2)

试试这个。它遍历每个表单,并通过每个输入(类型文本)为每个表单生成,并为每个表单构建所需的规则。然后将动态构建的规则提供给验证函数。

$('document').ready(function () {
    $('form').each(function (key, form) {
        // build the rules object dynamically
        var rules = {};
        // loop through each input in the form
        $(form).find('input[type="text"]').each(function(idx, obj) {
            // make a rule for this input
            rules[obj.name] = {"required": true};
        });
        $(form).validate({
            "rules": rules
        });
    });
});

答案 1 :(得分:1)

Okey这绝对不是最干净的方式,但它是第一个跨过我的脑海。 首先,修改您的HTML,因此表单的id="form$i",输入已id="input$i",,并且提交的内容为id="$i"。同时添加课程以提交class="validate"

<?php for ($i = 0; $i > $n; $i++) { ?> // n is no. of value (no limit)
    <form id="form<?php echo $i; ?>">//so id="form2" for example
        <input id="input<?php echo $i; ?>" name="<?php echo i; ?>venue" type="text">// id="input2"
        <input name="roster" type="text">
        <input id="<?php echo $i; ?>" class="validate" type="submit" name="btn_venue">//id="2"
    </form>
<?php } ?>

JQuery应该有用,我将解释代码中的每一行

<script>
    $(function () {
        $(".validate").click(function () { //this is call for each click button with class validate
            var id = $(this).attr('id');//getting id of the clicked element which is $i
            var formid = 'form' + id;//creating new var formid which will target formid (for example: in first loop $i=1, so id=1, and formid=form1)
            var input = 'input' + id;//creating input which value will be input$i
            $('#' + formid).on('submit', function (e) {//on form submit validate function
                if ($(#input).value == '') {
                    return false;
                } else {
                    return true;
                }
            });
        });
    });
</script>

希望你理解逻辑,可能是我在某处犯了错误,所以仔细看看..