i have a form with some input fields , i want to make client side validation using jquery validation plugin, it works fine but only notification input filed doesnt show the error message when it is empty, i dont knw what's wrong . here is my code
my form input fields
<div class="well">
<form id="register-form" class="form-horizontal" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<legend>Adding new products </legend>
<?php if(!empty($_SESSION['success'])){
echo '<div class="alert alert-success">'.$_SESSION['success'].'</div>'; unset($_SESSION['success']);} ?>
<div class="control-group">
<label class="control-label">Name</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-ban-circle"></i></span>
<input type="text" class="input-xlarge" id="name" name="name" placeholder="Name of the product"
value="<?php echo htmlspecialchars($name); ?>">
</div>
<span class="error"><?php echo $nameErr;?></span>
</div>
</div>
<div class="control-group ">
<label class="control-label">Category</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-pills"></i></span>
<input type="text" class="input-xlarge" id="category" name="category" placeholder="Computer,Tv, Phone etc"
value="<?php echo htmlspecialchars($category)?>">
</div>
<span class="error"><?php echo $categoryErr;?></span>
</div>
</div>
<div class="control-group">
<label class="control-label">Quantity</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-ban-circle"></i></span>
<input type="text" id="quantity" class="input-mini" name="quantity" placeholder="Quantity"
value="<?php echo htmlspecialchars($quantity);?>">
</div>
<select class="selectpicker remove-example" name="per" id="per" selected="true">
<?php if(isset($_POST['submit'])){ ?>
<option value="<?php echo $_POST['per']; ?>" selected="selected"><?php echo $_POST['per']; ?></option>
<?php }else{ ?>
<option value="">Choose amount</option>
<?php } ?>
<option value="" disabled="disabled"> -------------------- </option>
<option value="unit">unit</option>
<option value="dozen">dozen</option>
<option value="box">box</option>
</select>
<span class="error"><?php echo $quantityErr.$perErr;?></span>
</div>
</div>
<div class="control-group">
<label class="control-label">Buying Price</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-dollars"></i></span>
<input type="text" class="input-small" id="buying_price" name="buying_price" placeholder="Product Price"
value="<?php echo htmlspecialchars($buying_price); ?>">
</div>
<span id="per_text" style="color:#F96;"></span>
<span class="error"><?php echo $buy_priceErr; ?></span>
</div>
</div>
<div class="control-group">
<label class="control-label">Selling Price</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-dollars"></i></span>
<input type="text" class="input-small" id="selling_price" name="selling_price" placeholder="Selling Price"
value="<?php echo htmlspecialchars($selling_price); ?>">
</div>
<span id="per_text1" style="color:#F96;"></span>
<span class="error"><?php echo $sell_priceErr; ?></span>
</div>
</div>
**<div class="control-group">
<label class="control-label">Notification amount</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-arrow-down"></i></span>
<input type="text" class="input-large" id="notify" name="notify" placeholder="notify me when amount is"
value="<?php echo htmlspecialchars($notify); ?>">
</div>
<span id="per_text2" style="color:#F96;"></span>
<span class="error"><?php echo $notifyErr; ?></span>
</div>
</div>**
<div class="control-group">
<label class="control-label">Expire Date</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-time"></i></span>
<td><input type="text" name="date" id="date" class="span2" placeholder="Expire date"
value="<?php echo htmlspecialchars($date); ?>"/>
</div>
<span class="error"><?php echo $dateErr.$dateInvalid; ?></span>
</div>
</div>
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<button type="submit" class="btn btn-success" name="submit" >Add</button>
</div>
</div>
</form>
</div>
my Jquery validation file
(function($,W,D)
{
var JQUERY4U = {};
JQUERY4U.UTIL =
{
setupFormValidation: function()
{
//form validation rules
$("#register-form").validate({
rules: {
name: "required",
category: "required",
buying_price: "required",
selling_price: "required",
quantity: "required",
per: "required",
datu: "required",
notify: "required",
date: "required",
});
}
}
//when the dom has loaded setup form validation rules
$(D).ready(function($) {
JQUERY4U.UTIL.setupFormValidation();
});
})(jQuery, window, document);
any help guys?