Skip to content

Javascript Rendering

albertmoreno edited this page Aug 11, 2015 · 10 revisions

This package uses Jquery Validation Plugin to validate forms and show error messages.

This JQuery plugin is initialized when JsValidator instance is converted to String or render method is called.

A View is used to render de Javascript initialization code. By default used view is defined in the config file but you can choose dynamically the View used to initialize the Javascript using render method.

JsValidator::make(['name'=>'required'])->render('mycustomvalidation');

You can customize the view used for the Javascript initialization. The JsValidator data is passed to view to provide ready to use parameters for Jquery Validation Plugin. Refer the documentation for more information.

You can look the resources/views/vendor/jsvalidation/bootstrap.php for reference

<script>
    jQuery(document).ready(function(){

        $("<?php echo $validator['selector']; ?>").validate({
            highlight: function (element) { // hightlight error inputs
                $(element)
                        .closest('.form-group').addClass('has-error'); // set error class to the control group
            },
            unhighlight: function (element) { // revert the change done by hightlight
                $(element)
                        .closest('.form-group').removeClass('has-error'); // set error class to the control group
            },
            errorElement: 'span', //default input error message container
            errorClass: 'help-block help-block-error', // default input error message class
            focusInvalid: false, // do not focus the last invalid input
            ignore: "",  // validate all fields including form hidden input
            errorPlacement: function(error, element) {
                if (element.attr("type") == "radio") {
                    error.insertAfter(element.parents('div').find('.radio-list'));
                } else {
                    if(element.parent('.input-group').length) {
                        error.insertAfter(element.parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            },
            success: function (label) {
                label
                        .closest('.form-group').removeClass('has-error'); // set success class to the control group
            },
            rules: <?php echo json_encode($validator['rules']); ?> 
        })
    })
</script>
Clone this wiki locally