Parsley Advanced Example

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/parsley.js/1.2.2/parsley.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.6.0/parsley.js"></script>
<div id="parsley-div">
  <div class="form-group">
    <label for="city">
        City
        <input type="text" name="city" id="city"
           data-parsley-required
        />
    </label>
    </div>
  <div class="form-group">    
    <label for="address">
        Address
        <textarea name="address" id="address"
           data-parsley-required
           ></textarea>
    </label>    
    </div>
  <div class="form-group">    
    <label for="address">
        Country
        <select name="country" id="country"
           data-parsley-required
           ><option></option><option value="1">Some Country</option></select>
    </label>    
    </div>    
    <button type="button">Submit</button>
</div>

CSS

.parsley-error-list { color: red; }
button {
    display: block;
    margin-top: 20px;
}
#moreFields {
    display: none;
}

JavaScript

$('#parsley-div').find('button').click(function() {
    $("#parsley-div").wrap("<form id='parsley-form'></form>");
    $('#parsley-form').parsley().validate();
    $("#parsley-div").unwrap();
});





























/*
$('#form').parsley('addListener', {
    onFieldValidate: function ( elem ) {
        return !$(elem).is(':visible');
    }
});
*/