JQuery validate within a Twitter Bootstrap modal with PHP - 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:
<?php if ($row['routenummer'] != ''){ echo $row['routenummer']; } if ($row['routenummer'] == ''){ ?><i class="icon-plus"></i><?php }?>
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">×</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" />
Annuleren
</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">×</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" />
Annuleren
</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">×</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" />
Annuleren
</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">×</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" />
Annuleren
</div>
</form>
</div>

Answer 1

Validation is working as intended in both of your examples...
Your "When a task doesn't have a standard routenumber" example is working:
http://jsfiddle.net/qdX8y/1/
(Validation will not allow submission of an empty field)
Your "When a task does have a standard routenumber" example is also working. However, it passes validation immediately because you already have a value in the field that meets the requirements of the compound rule, required and digits.
<input type="text" name="routenummer" value="21" />
Removing value="21" causes a validation message to be triggered.
http://jsfiddle.net/qdX8y/
EDIT:
As per comments on OP, it was discovered that the OP has multiple form elements sharing the same id. Not only is this invalid HTML, but it breaks the Validate plugin since it does not know which form to target.
However, all form elements can share the same class name and then you can use a jQuery .each() to select them all. This example contains five duplicate <form> elements, each with class="myform" and assumes all five form elements share the same .validate() options.
$(document).ready(function () {
$('.myform').each(function () {
$(this).validate({ // initialize the plugin on each form
// your options and rules
});
});
});
DEMO: http://jsfiddle.net/cWtd6/