Parsley 2.0.3 Not Working With Boostrap 3

i am trying to use parsely.js on my html page to validate input box. currently this html page contains one input box and one submit button. the structure is created using bootstrap

Solution 1:

A few things first:

1. Parsley allows you to bind it to a field, so you won't have a problem without the form element (see docs);

2. The classHandler function recieves an object of the type ParsleyField. With this object, you can access the input element with el.$element (for example: alert(el.$element.attr('id'));

I have made the following changes to your validateInput function:

<scripttype="text/javascript">functionvalidateInput() {
        $("input[name='fullName']").parsley({
            successClass: "has-success",
            errorClass: "has-error",
            classHandler: function (el) {
                return el.$element.closest('.form-group'); //working
            },
            errorsWrapper: "<span class='help-block'></span>",
            errorTemplate: "<span></span>",
        });

        // Returns true / false if the field has been validated. Does not affect UI.//$("input[name='fullName']").parsley().isValid());// validate field and affects UI
        $("input[name='fullName']").parsley().validate();
    }
</script>

With this code, the message is presented correctly, and the successClass and errorClass are appended to the div form-group.

See the following working jsfiddle