0

我正在研究交通规划器，在我的任务表中，我有一个按钮来签署任务的路线编号。当一个任务根本没有路由编号时，该按钮将调用一个引导模式来为该任务分配一个新的路由编号，这也是标准的路由编号。

当一个任务已经有一个路由编号时，该按钮将调用相同的模式并添加一个新的复选框。未选中表示，仅在今天更改路由编号，选中表示，将插入的路由编号设为标准路由编号。

我正在使用 JQuery 进行验证，但没有发生任何事情，并且表单在未经验证的情况下提交。我究竟做错了什么..？

调用模式的链接：

<a href="#routenummer_view<?php echo $row['planning_id']; ?>" class="btn strong" data-toggle="modal"><?php if ($row['routenummer'] != ''){ echo $row['routenummer']; } if ($row['routenummer'] == ''){ ?><i class="icon-plus"></i><?php }?></a>

模态：

<div id="routenummer_view<?php echo $row['planning_id']?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="routenummer_viewLabel" aria-hidden="true">
    <form class="modal-form" action="../includes/modals/routenummer/submit_view_routenummer.php"
        data-remote="true" method="post" id="routenummer_edit">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3 id="routenummerviewLabel"><?php if ($row['routenummer'] == ''){ echo 'Standaard Routenummer Invoeren';} else echo 'Routenummer Wijzigen';?></h3>
        </div>
        <div class="modal-body">

            <label>Routenummer:</label> 
                <input type="text" name="routenummer" <?php if ($row['routenummer'] != NULL){ ?>value="<?php if ($row['routenummer'] != NULL){ echo $row['routenummer']; echo '" /><br />';}?> <?php } if ($row['routenummer'] == NULL){ ?> placeholder="Typ hier een routenummer..." /><?php if ($row['routenummer'] != NULL){ echo '<br />'; }}?>
                <?php if ($row['routenummer'] != NULL){ ?>
                 <label class="checkbox">
                    <input type="checkbox" name="standaard"> Maak standaard routenummer.</label>
                     <?php }?>

        </div>
        <div class="modal-footer">
            <input type="hidden" name="opdrachtid" value="<?php echo $row['planning_id']; ?>" />
            <input type="submit" value="<?php if ($row['routenummer'] == ''){ echo 'Invoeren';} else echo 'Wijzigen';?>" class="btn btn-primary" />
            <a href="#" class="btn" data-dismiss="modal">Annuleren</a>
        </div>
  </form>
</div>

查询：

$(document).ready(function() {
    $("#routenummer_edit").validate({
        onkeyup : false,
        rules : {
            routenummer : {
                required : true,
                digits: true
            }
        },
        messages : {
            routenummer : {
                required : "Routenummer is verplicht.",
                digits : "Routenummer moet een getal zijn."
            }
        },
    });
});

示例图片 示例图片

编辑

渲染的 HTML

当任务没有标准路由编号时：

<div id="routenummer_view90" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="routenummer_viewLabel" aria-hidden="true">
    <form class="modal-form" action="../includes/modals/routenummer/submit_view_routenummer.php"
        data-remote="true" method="post" id="routenummer_edit">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3 id="routenummerviewLabel">Standaard Routenummer Invoeren</h3>
        </div>
        <div class="modal-body">

            <label>Routenummer:</label> 
                <input type="text" name="routenummer"  placeholder="Typ hier een routenummer..." />                     
        </div>
        <div class="modal-footer">
            <input type="hidden" name="opdrachtid" value="90" />
            <input type="submit" value="Invoeren" class="btn btn-primary" />
            <a href="#" class="btn" data-dismiss="modal">Annuleren</a>
        </div>
  </form>
</div>

当任务确实有标准路由编号时：

<div id="routenummer_view67" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="routenummer_viewLabel" aria-hidden="true">
    <form class="modal-form" action="../includes/modals/routenummer/submit_view_routenummer.php"
        data-remote="true" method="post" id="routenummer_edit">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3 id="routenummerviewLabel">Routenummer Wijzigen</h3>
        </div>
        <div class="modal-body">

            <label>Routenummer:</label> 
                <input type="text" name="routenummer" value="21" /><br />                                <label class="checkbox">
                    <input type="checkbox" name="standaard"> Maak standaard routenummer.</label>

        </div>
        <div class="modal-footer">
            <input type="hidden" name="opdrachtid" value="67" />
            <input type="submit" value="Wijzigen" class="btn btn-primary" />
            <a href="#" class="btn" data-dismiss="modal">Annuleren</a>
        </div>
  </form>
</div>

编辑

$(document).ready(function() {
$('.modal-form').each(function () {
            $(this).validate({ // initialize the plugin
                rules: {
                    routenummer: {
                        required: true,
                        digits: true
                    }
                },
                messages : {
                    routenummer : {
                        required : "Routenummer is verplicht.",
                        digits : "Routenummer moet een getal zijn."
                    }
            }
        });
});
});

编辑

模态

<div id="routenummer<?php echo $row['planning_id']?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="routenummerLabel" aria-hidden="true">
    <form class="modal-form" action="../includes/modals/routenummer/submit_routenummer.php"
        data-remote="true" method="post">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3 id="routenummerLabel"><?php if ($row['routenummer'] == ''){ echo 'Standaard Routenummer Invoeren';} else echo 'Routenummer Wijzigen';?></h3>
        </div>
        <div class="modal-body">

            <label>Routenummer:</label> 
                <input type="text" name="routenummer" <?php if ($row['routenummer'] != NULL){ ?>value="<?php if ($row['routenummer'] != NULL){ echo $row['routenummer']; echo '" /><br />';}?> <?php } if ($row['routenummer'] == NULL){ ?> placeholder="Typ hier een routenummer..." /><?php if ($row['routenummer'] != NULL){ echo '<br />'; }}?>
                <?php if ($row['routenummer'] != NULL){ ?>
                 <label class="checkbox">
                    <input type="checkbox" name="standaard"> Maak standaard routenummer.</label>
                     <?php }?>

        </div>
        <div class="modal-footer">
            <input type="hidden" name="opdrachtid" value="<?php echo $row['planning_id']; ?>" />
            <input type="submit" value="<?php if ($row['routenummer'] == ''){ echo 'Invoeren';} else echo 'Wijzigen';?>" class="btn btn-primary" />
            <a href="#" class="btn" data-dismiss="modal">Annuleren</a>
        </div>
  </form>
</div>
4

1 回答 1

1

验证在您的两个示例中都按预期工作......

您的“当任务没有标准路由编号时”示例正在运行：

http://jsfiddle.net/qdX8y/1/

（验证将不允许提交空字段）

您的“当任务确实有标准路由号”示例也有效。但是，它会立即通过验证，因为您在字段中已经有一个满足复合规则要求的值，required并且digits.

<input type="text" name="routenummer" value="21" />

删除value="21"会触发验证消息。

http://jsfiddle.net/qdX8y/

编辑：

根据对 OP 的评论，发现 OP 有多个form元素共享相同的id. 这不仅是无效的 HTML，而且会破坏 Validate 插件，因为它不知道form要定位哪个。

但是，所有form元素都可以共享相同的class名称，然后您可以使用 jQuery.each()将它们全部选中。此示例包含五个重复<form>元素，每个元素都具有class="myform"并假设所有五个form元素共享相同的.validate()选项。

$(document).ready(function () {

    $('.myform').each(function () {
        $(this).validate({ // initialize the plugin on each form
            // your options and rules
        });
    });

});

演示：http: //jsfiddle.net/cWtd6/

于 2013-03-15T17:01:08.340 回答