after postback, jquery does not validate controls and allows submitting - php

Question

I'm validating a form using the JQuery validation plugin.
The very first time the page loads, the form is validated perfectly and only submits once all fields have been completed. The form then posts back to itself and when trying to enter details again, the validation does not work but still allows to submit and the data gets successfully sent to the database.
Here is my code:
<form id="formSubmit" method="post" action="post to this page">
<fieldset data-role="fieldcontain">
<p>
<label for="clubSelect">Preferred Club</label>
<select id="clubSelect" name="clubSelect" class="required">
<option value="000">Select a Club</option>
<?php if ($db->num_rows > 0)
{
foreach($results as $result)
{
?>
<option value="<?php echo $result->id;?>"><?php echo $result->name;?></option>
<?php
}
}
?>
</select>
</fieldset>
<fieldset data-role="fieldcontain">
<label for="txtName">Name</label>
<input type="text" id="txtName" name="txtName" class="required"/>
</fieldset>
<fieldset data-role="fieldcontain">
<label for="txtEmail">Email</label>
<input type="text" id="txtEmail" name="txtEmail" class="required email" minlength="5"/>
</fieldset>
<fieldset data-role="fieldcontain">
<label for="txtCell">Contact Number</label>
<input type="tel" id="txtCell" name="txtCell" class="required"/>
</fieldset>
<fieldset data-role="fieldcontain">
<input type="submit" name="submit" value="Submit"/>
</fieldset>
</form>
<script>
$(document).ready(function () {
$("#formSubmit").validate({
rules: {
clubSelect: {
selectcheck: true
},
txtName: {
required: true
},
txtEmail: {
required: true
},
txtCell: {
required: true,
number: true
}
},
messages: {
txtName: {
required: "Please enter your name."
},
txtEmail: {
required: "Please enter your email address."
},
txtCell: {
required: "Please enter your contact number.",
number: "Only numbers are allowed."
}
}
});
jQuery.validator.addMethod('selectcheck', function (value) {
return (value != '000');
}, "Please select a club.");
});
</script>
Basically what I am asking is how to make sure that the validation always works.
Thanks

Answer 1

Replace
$(document).ready(function ()
with
$('#pagID').on('pageshow', function () {
Update: Also, add data-ajax=false to the form div, to avoid posting data using Ajax.
jQuery Mobile Events
Why not to use .ready