Skip to content

Javascript Rendering

Pe Ell edited this page Jul 10, 2017 · 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 the 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 view method.

JsValidator::make(['name'=>'required'])->view('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>