jQuery - Why the validation rule doesn't support predefined value?
Hello all,
I defined two jQuery validation functions as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
/////////////////////////////////////////////////////
function LessThanValidator(event)
{
var lowID = event.data.lowID;
var highID = event.data.highID;
var formID = event.data.formID;
var lowValue = parseInt( $(lowID).val() );
if ( isNaN(lowValue) ) {
lowValue = 0;
}
$(highID).rules('remove', 'min');
$(highID).rules('add', { min: lowValue });
$(formID).validate().element( highID );
return false;
}
function LargerThanValidator(event)
{
var lowID = event.data.lowID;
var highID = event.data.highID;
var formID = event.data.formID;
var highValue = parseInt( $(highID).val() );
if ( isNaN(highValue) ) {
highValue = 0;
}
$(lowID).rules('remove', 'max');
$(lowID).rules('add', { max: highValue });
$(formID).validate().element( lowID );
return false;
}
$(document).ready( function() {
// validate the #regFormBody form when it is submitted
$("#regFormBody").validate({
debug: true,
errorPlacement: function(error, element) {
error.insertAfter( element.parent() );
},
rules: {
confeelow: { required: true, digits: true, maxlength: 10, max: isNaN(parseInt($("#confeehigh"))) ? 0 : parseInt($("#confeehigh")) },
confeehigh: { required: true, digits: true, maxlength: 10, min: isNaN(parseInt($("#confeelow"))) ? 0 : parseInt($("#confeelow")) }
},
messages: {
confeelow: { max: "Please enter a value less than or equal to To (US$)" },
confeehigh: { min: "Please enter a value greater than or equal to From (US$)" }
}
});
///////////////////////////////////////////////////////////////
$("#confeelow").bind("change", {lowID: "#confeelow", highID: "#confeehigh", formID: "#regFormBody"}, LessThanValidator);
$("#confeehigh").bind("change", {lowID: "#confeelow", highID: "#confeehigh", formID: "#regFormBody"}, LargerThanValidator);
});
</script>
<style type="text/css">
.error
{
color:red;
}
</style>
</head>
<body>
<div id="container">
<div id="mainContent">
<form id="regFormBody" name="regFormBody" method="post" action="">
<fieldset>
<div id="conFeeLowFld" class="row ">
<label for="confeelow" class="label">Desired Consulting Fee From (US$) <span class="asterisk">*</span></label>
<div class="collection">
<input type="text" class="" maxlength="32" size="32" value="" id="confeelow" name="confeelow" />
</div>
<div id="conFeeHighFld" class="row ">
<label for="confeehigh" class="label">To (US$) <span class="asterisk">*</span></label>
<div class="collection">
<input type="text" class="" maxlength="32" size="32" value="" id="confeehigh" name="confeehigh" />
</div>
</fieldset>
<fieldset class="fieldsCollection" id="saveMyProfileFld">
<input type="submit" value="Save My Profile" id="savemyprofile" name="savemyprofile" class="saveprofile"/>
</fieldset>
</form>
</div>
</div>
</body>
</html>
Basically, I use the above functions to make sure that the value of lowID is always less or equal to highID.
I use the following script to set up the validation.
$("#confeelow").bind("change", { lowID: "#confeelow", highID: "#confeehigh", formID: "#profileFormBody" }, LessThanValidator);
$("#confeehigh").bind("change", { lowID: "#confeelow", highID: "#confeehigh", formID: "#profileFormBody" }, LargerThanValidator);
These two functions work pretty well. However, if I predefine the values for #confeehigh and #confeelow, then these fields cannot pass the validation test. I really cannot figure out why. Because without pre-populated values, these validation functions work well.
Here the HTML script that causes the problems:
<input type="text" class="" maxlength="32" size="32" value="12" id="confeelow" name="confeelow" />
<input type="text" class="" maxlength="32" size="32" value="23" id="confeehigh" name="confeehigh" />
In other words, if I manually enter 12 for confeelow and 23 for confeehigh, then the validation works well.
Without predefined value, I don't have any problems:
<input type="text" class="" maxlength="32" size="32" value="" id="confeelow" name="confeelow" />
<input type="text" class="" maxlength="32" size="32" value="" id="confeehigh" name="confeehigh" />
Can anyone give me some hints why it doesn't work for predefined value?
Thank you
///////////////// Update-001 ////////////////////
Some people may have this question for me: Why you have to use a default value if the code works with new entered data. Here is reason
1> First the user will be allowed to enter data
2> Second the user will submit the form and store in DB
3> When next time the user logins again
I have to repopulate the text field by using some code similar as follows:
<input type='text' value='<?php echo $fee; ?>' />
And this default value causes me validation problems.
Thank you