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 :)