black_belt black_belt - 1 year ago 155
jQuery Question

jquery numberOfInvalids( ) function is not working

I am using jquery validation plugin 1.9.0 . I have downloaded the plugin from here: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

I have copied the following code from this link http://docs.jquery.com/Plugins/Validation/Validator/numberOfInvalids
to find out the number of errors I have in my form. But it is not working.

$(document).ready(function() {
$('a.delete').click(function() {
invalidHandler: function() {
$("#summary").text(validator.numberOfInvalids() + " field(s) are invalid");
}
});
});


And then

<div id="summary" class="summary"> </div>
<a href="#" class="delete">click</a>


My form head looks like this:

<form class="uniform" autocomplete="off" id="myForm" enctype="multipart/form-data" action="<?echo base_url();?>addteacher_salary/add " method="post" name="myForm">


I don't call any validation function in my form, I just load the validation plugin inside head tag and the validation works.

Could you please tell me what is wrong with the code?

Edit



My Complete form looks like following:

<form class="uniform" autocomplete="off" id="myForm" enctype="multipart/form-data" action="<?echobase_url();?>addteacher_salary/add " method="post" name="myForm">

<fieldset>
<legend>Select A Teacher</legend>
<dl class="inline">


<dt><label for="teachername">Teacher Name <span class="hello">*</span></label></dt>
<dd>
<?php echo form_dropdown('teacherid', $dropdown_teacher,'', 'class="medium required" id="teacherid"' ); ?>



</dd>

<dt><label for="salary_month">Month of Salary <span class="hello">*</span></label></dt>
<dd>
<?php $month_options = array(
'' => 'Select',
'January' => 'January',
'February' => 'February',
'March' => 'March',
'April' => 'April',
'May' => 'May',
'June' => 'June',
'July' => 'July',
'August' => 'August',
'September' => 'September',
'October' => 'October',
'November' => 'November',
'December' => 'December',
);


echo form_dropdown('salary_month', $month_options,'', 'class="medium required"' );?>

</dd>

<dt><label for="salary_year"> Year of Salary <span class="hello">*</span></label></dt>
<dd>



<?php
$year_options = array(
'' => 'Select',
'2010' => '2010',
'2011' => '2011',
'2012' => '2012',
'2013' => '2013',
'2014' => '2014',

'2015' => '2015',
'2016' => '2016',
'2017' => '2017',
'2018' => '2018',
'2019' => '2019',
'2020' => '2020',
'2021' => '2021',
'2022' => '2022',
'2023' => '2023',
'2024' => '2024',
'2025' => '2025',
'2026' => '2026',
'2027' => '2027',
'2028' => '2028',
'2029' => '2029',
'2030' => '2030',
);


echo form_dropdown('salary_year', $year_options,'', 'class="medium required"' );?>

</dd>

<dt><label for="salary_disbursement_date">Salary Disbursement Date <span class="hello">*</span></label></dt>
<dd>
<input type="text" name="salary_disbursement_date" id="datepicker2" maxlength="10" class="medium required" />

</dd>



<dt><label for="salaryamount">Salary Amount <span class="hello">*</span></label></dt>
<dd>
<input type="text" name="salary_amount" id="salary_amount" value="" class="medium required number" />

</dd>




</dl>

<div class="buttons">
<button id="submit_item" name="submit_item" type="submit" class="button">Submit Button</button>

</div>

</fieldset>
</form>

Answer Source

Be sure to call valid on the form before calling numberOfInvalids:

$(document).ready(function() {
    $('a.delete').click(function() {
        $("#myForm").valid(); // Make validate calculate the number of invalid fields.
        var numInvalid = $("#myForm").numberOfInvalids();

        $("#summary").text(numInvalid + " field(s) are invalid");
    });
});     

Example: http://jsfiddle.net/UURz2/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download