For required filed on focus out triggers parleys validator and also iam listening for 'field:validated' parsley event.Inside this event handler i am getting back the focus to this error element.This is working fine for chrome ,but in IE focus is goining to next element and shows two error messages as show here in the below pic.enter image description here
$(document).ready(function(){
$('#person').parsley(); // binding parsley to the form
});
window.Parsley.on('field:validated', function(e) {
// This global callback will be called for any field that fails validation.
if(this.$element.hasClass('parsley-error')){
this.$element.focus();
}
});.div1 {
margin: 0 auto;
border: 1px solid gray;
width: 600px;
height:600px;
}
.par-error ul{
list-style: none;
display: inline;
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="index.css">
<style type="text/css">
.div1{
margin: 0 auto;
border: 1px solid gray;
width: 600px;
height:600px;
}
.par-error ul{
list-style: none;
display: inline;
color: red;
}
</style>
</head>
<body>
<div class="div1" id="div1" data-candy="chaco">
<form id="person" name="person" data-parsley-validate>
<legend>
Person Information
</legend>
<label for="firtsname">First Name</label>
<input type="text" id="firtsname" data-parsley-errors-container="#fname-error" data-parsley-trigger="blur" data-parsley-validate-if-empty="true" data-parsley-required="true" />
<span class="par-error" id="fname-error"></span>
<br>
<label for="lastname">Last Name</label>
<input data-parsley-focus="none" type="text" id="lastname" data-parsley-errors-container="#lname-error" data-parsley-trigger="blur" data-parsley-validate-if-empty="true" data-parsley-required="true" />
<span class="par-error" id="lname-error"></span>
<br>
<label for="email">Email</label>
<input type="text" id="email"/><br>
<label for="dob">DOB</label>
<input type="text" id="dob"/><br>
<input type="submit"></input>
</form>
</div>
<script type="text/javascript" src="jquery-1.12.2.js"></script>
<script type="text/javascript" src="
https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.3.11/parsley.js">
</html>pls need solution for this. Here is the jsbin linkenter link description here
