I'm using the formValidation plugin from / in a HTML5 form to perform validation on the form inputs.

The standard checks such as notEmpty work as expected on the input. But now I have a case where the input needs to validated against a list. I've already coded the function checkEMIDExists() to do that but haven't figured out how to call it from within the formValidation plugin.

This is the example I've followed in order to try an implement the callback function. But during run-time the call back function doesn't fire when filling out the EM input value.

I've set an alert within the callback that does trigger every time I change input value. I also verified that checkEMIDExists() works by triggering it on the change event and it does work.

It seems that the way I'm returning the bool validation result isn't correct.

Question:

How can I call a callback function within formValidation plugin?

Code: (gist)

EM input element -

  <input id="EscID" name="EM" maxlength="10" type="text" data-error="EM already exists or none supplied" placeholder="(If Applicable)" class="form-control">

Script -

<script>

    //List EM input is validated against
    var escHistoryList = @Html.Raw(Json.Encode(Model.EscHistory));


    $(document).ready(function () {


        var $createForm = $('#createForm');


        //Validate the required input fields to prevent submit if not 
        //valid input.
        $('#createForm').formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: 
                Application: {
                    validators: {
                        notEmpty: {
                            message: 'The Application name field is required'
                        }
                    }
                },
                EM: {
                    validators: {
                        callback: {
                            message: 'A record with this EPRID already exists!',
                            callback: function (value, validator, $field) {
                                // Determine if the input EPRID already exists
                                var emidVal = $('#EscalationID').val();
                                alert("IN VALIDATOR CALLBACK");
                                var isEMIDMatch = false;

                                isEMIDMatch = checkEMIDExists(emidVal);

                                if(isEMIDMatch)
                                return true;
                            }
                        }
                    }
                } 
            }


        });



        //Determineif input EMID exists in list
        function checkEMIDExists(emidVal){

            var isMatch = false;
            for(var i=0;i<escHistoryList.length;i++){
                if(escHistoryList[i]["EM"].indexOf(emidVal) > -1){
                    isMatch = true;
                    break;
                }

            }

            return isMatch;
        }









    });//end $(document).ready


</script>

I'm using the formValidation plugin from http://formvalidation.io/examples/ in a HTML5 form to perform validation on the form inputs.

The standard checks such as notEmpty work as expected on the input. But now I have a case where the input needs to validated against a list. I've already coded the function checkEMIDExists() to do that but haven't figured out how to call it from within the formValidation plugin.

This is the example I've followed in order to try an implement the callback function. But during run-time the call back function doesn't fire when filling out the EM input value.

I've set an alert within the callback that does trigger every time I change input value. I also verified that checkEMIDExists() works by triggering it on the change event and it does work.

It seems that the way I'm returning the bool validation result isn't correct.

Question:

How can I call a callback function within formValidation plugin?

Code: (gist)

EM input element -

  <input id="EscID" name="EM" maxlength="10" type="text" data-error="EM already exists or none supplied" placeholder="(If Applicable)" class="form-control">

Script -

<script>

    //List EM input is validated against
    var escHistoryList = @Html.Raw(Json.Encode(Model.EscHistory));


    $(document).ready(function () {


        var $createForm = $('#createForm');


        //Validate the required input fields to prevent submit if not 
        //valid input.
        $('#createForm').formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: 
                Application: {
                    validators: {
                        notEmpty: {
                            message: 'The Application name field is required'
                        }
                    }
                },
                EM: {
                    validators: {
                        callback: {
                            message: 'A record with this EPRID already exists!',
                            callback: function (value, validator, $field) {
                                // Determine if the input EPRID already exists
                                var emidVal = $('#EscalationID').val();
                                alert("IN VALIDATOR CALLBACK");
                                var isEMIDMatch = false;

                                isEMIDMatch = checkEMIDExists(emidVal);

                                if(isEMIDMatch)
                                return true;
                            }
                        }
                    }
                } 
            }


        });



        //Determineif input EMID exists in list
        function checkEMIDExists(emidVal){

            var isMatch = false;
            for(var i=0;i<escHistoryList.length;i++){
                if(escHistoryList[i]["EM"].indexOf(emidVal) > -1){
                    isMatch = true;
                    break;
                }

            }

            return isMatch;
        }









    });//end $(document).ready


</script>

• javascript
• jquery
• validation
• twitter-bootstrap-3
• callback

1 Answer 1

Your callback method should also return false in case the validation fails. A null return value is ignored.

Change your callback return statement to:

return isEMIDMatch;

or perhaps even more succinctly albeit less readable:

return checkEMIDExists(emidVal);