CODEWITHSUNDEEP
jquery
user597014
user597014

Reputation: 1

jQuery Validate 'required' - when losing focus or pressing keys only last modified element validates before submit

I am attempting to validate a form using the jQuery Validate framework. We will not have a submit button on this form and want keypress/onblur style validation. In my simplest example I have three form fields, all marked as 'required'. When I change one field, click out of it, then click back in and remove the characters it validates immediately, this is the behavior I expect.

The problem comes when I add text to the first field and then add text to the second field. If I attempt to remove the contents of the first field it will not validate. If I remove the contents of the second, the second field validates. Pretty much if you add text fields, all required, only the last one will validate. The odd thing is that when I add a submit button and click submit, then try these tests, it works pefectly. The examples all do the same thing- where am I going wrong?

Javascript code:

$("#testForm").validate({ submitHandler: function() { } });

Html:

<form id='testForm' class='testEditor'>
        <div>
            <input type='text' name='firstField' id='firstField' class='required' /><br />
            <input type='text' name='secondField' id='secondField' class='required' /><br />
            <input type='text' name='thirdField' id='thirdField' class='required' /><br />
            <hr width="100%" />
            <input type='Submit' value='Show View Model' id='unbind' />
        </div>

Upvotes: 0

Views: 5704

Answers (1)

tkt986
tkt986

Reputation: 1028

This should do the job.

$("#testForm").validate();
     $('input').blur(function(){
         if(!$(this).valid()){
             $(this).focus();
             return false;
         }
     });

Upvotes: 3

Related Questions