php - JQuery validate within a Twitter Bootstrap modal with PHP

Question

I'm working on a transport planner and in my tasks table I have a button to sign a routenumber to a task. When a task haven't got a routenumber at all, the button will call a bootstrap modal to assign a new routenumber to that task which will also be the standard routenumber.

When a task already has a routenumber, the button will call the same modal with a new checkbox added. Unchecked means, change the routenumber only today, checked means, make the inserted routenumber the standard routenumber.

I'm using JQuery for the validation but nothings happend and the form is submitted without validation. What am I doing wrong..?

LINK TO CALL THE MODAL:

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

MODAL:

<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."
            }
        },
    });
});

EXAMPLE IMAGE

EDIT

RENDERED HTML

When a task doesn't have a standard routenumber:

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

When a task does have a standard routenumber:

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

EDIT

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

EDIT

MODAL

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

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

削除するvalue="21"と、検証メッセージがトリガーされます。

http://jsfiddle.net/qdX8y/

---

編集：

OP に関するコメントによると、OP にはform同じid. これは無効な HTML であるだけでなく、Validate プラグインが対象を特定できないため、Validate プラグインを壊しますform。

ただし、すべてのform要素が同じ名前を共有classできるため、jQuery.each()を使用してそれらをすべて選択できます。この例には 5 つの重複<form>要素が含まれており、それぞれが5 つの要素すべてで同じオプションを共有している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/