custom error message with parsley

custom error message with parsley

by Bob Marley

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.7.0/parsley.min.js"></script>
<form class="ui form" method="post" name="Edit" enctype="multipart/form-data">
  <div class="field">
  <label>Password</label>
    <input type="text" name="password" id="password" value="" required>
  </div>
  <div class="field">
  <label>Username</label>
   <input type="text" name="username" id="username" value="" >
  </div>
  <input type="submit" class="ui submit button" value="Submit">
</form>

CSS

body {
  margin: 20px;
}
.field.error {
  color: red;
}

JavaScript

$.extend(window.Parsley.options, {
	 excluded: 'input[type=button], input[type=submit], input[type=reset], .search, .ignore, .input-mini',
  // inputs: 'input, textarea, select, input[type=hidden], :hidden',
   //trigger:'input change blur',
   triggerAfterFailure: 'input change',
   errorsContainer: function (element) {
	 if (element.$element.attr('type') === 'radio' || element.$element.attr('type') === 'checkbox'){
		return element.$element.closest('.segment').parent();
	  }else{
		//console.log('errorsContianer:',element.$element,element.$element.closest('.field'));
		return element.$element.closest('.field'); 
	  }
    },
	classHandler: function ( element ) {
	  if (element.$element.attr('type') === 'radio' || element.$element.attr('type') === 'checkbox'){
		return element.$element.closest('.segment').parent();
	  }else{
		 //console.log('classHandler:',element.$element,element.$element.closest('.field'));
		return element.$element.closest('.field'); 
	  }
	  
    },
   errorTemplate: '<div class="ui basic yellow pointing prompt label transition scale in"></div>',
   errorsWrapper: '<div></div>',
   errorClass: 'error',
   successClass: 'success'
});
 

$('.ui.form').parsley();

window.Parsley.on('field:validate', function(ParsleyField) {
var $field = ParsleyField;
var $ele = $($field.$element);
var $result = $field.validationResult;
var $name = $ele.attr('name');
console.log(' ');
console.log('%c' + 'Before Validate for: ','color:blue;font-weight:bold;',$name,$result);
});
window.Parsley.on('field:error', function(ParsleyField) {
var $field = ParsleyField;
var $ele = $($field.$element);
var $result = $field.validationResult;
var $name = $ele.attr('name');
 console.log('%c' +'Error for: ','color:red;font-weight:bold;',$name,$result);
});
window.Parsley.on('field:success', function(ParsleyField) {
var $field = ParsleyField;
var $ele = $($field.$element);
var $result = $field.validationResult;
var $name = $ele.attr('name');
console.log('%c' +'Success for:...