jQuery在PHP的Twitter Bootstrap模式下進行驗證

Question

我正在使用運輸計划器，並且在我的任務表中，我有一個按鈕來簽署到任務的路線編號。 當一個任務根本沒有路由編號時，該按鈕將調用引導程序模版，為該任務分配一個新的路由編號，該路由編號也將是標准路由編號。

當任務已經有一個路由編號時，該按鈕將調用相同的模態並添加一個新的復選框。 未選中表示僅今天更改路由號，選中表示將插入的路由號設為標准路由號。

我正在使用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>

JQUERY：

$(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>

Answer 1

驗證在兩個示例中均按預期進行...

---

您的“當任務沒有標准路由編號時”示例正在運行：

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

（驗證將不允許提交空白字段）

---

您的“當任務確實具有標准路由號時”示例也正在工作。 但是， 它會立即通過驗證，因為您在該字段中已經具有一個值，該值符合復合規則， required和digits required 。

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

刪除value="21"會觸發驗證消息。

http://jsfiddle.net/qdX8y/

---

編輯 ：

根據對OP的評論，發現OP具有共享相同id多個form元素。 此無效的HTML不僅無效，而且由於不知道要定位的form ，因此破壞了Validate插件。

但是，所有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/