I am developing a form in which I have some validation I am using the bValidation Plugin to validate field.I want to validate each field one by one.But I want the validation to be done when user clicks the next box in dom and also if validation fails the focus should be on the previous box and not navigate to the next box on which I have clicked.

I have designed something which am sharing any type of help would be appreciated

This is the Jquery code

$(document).ready(function () {

        $($("form:first :input")[0]).focus();
        var options = {

        errorClass:"txtbox-error",
        validClass:"txtbox-success",
        validateOn:"blur",
        onValidateFail: function(element){
           var elt=element.attr('id'); 
          setTimeout(function() { $("#" + elt).focus();},100);  

    });

            }


            };


    $('#fValidation').bValidator(options);
     $('#name').focus(function(){

     });
});

U can see i have specified validateOn:blur but I want to validate on focus of next element. Also on ValidateFail I have used setTimeout(function() { $("#" + elt).focus();},100); but in reality when am trying to get back the focus the blur() event of second element is called therefore the validation of second element also happens which I dont want to happen.

I will also share the html code with you

Please provide your name, email address (won't be published) and a comment

Name:

Email Id:

Last Name

                <p>
                <select id="ddl1">
                <option value="0">title</option>
                <option value="1">Mr</option>
                <option value="2">Mrs.</option>
                </select>
                </p>
                <p>
                <label for=""><input type="radio" name="gender" >Male</input></label>
                <label for=""><input type="radio" name="gender" >Female</input></label>
                </p>
                <p>
                <input type="submit" name="btnSubmit" value="Submit Data" id="btnSubmit" >
                </p>



        </fieldset>
    </form>
</div>

and the CSS classes that I have used

.txtbox-success { border:1px solid green; } .txtbox-error { border:1px solid red; }

Thanks in advance :)

link|flag
Just one thing to say: annoying as hell. Simply restrict submitting the form instead of locking the user into a single field. – ThiefMaster 2 hours ago

Know someone who can answer? Share a link to this question via email, twitter, or facebook.

Your Answer

 
or
required, but never shown

Browse other questions tagged or ask your own question.