Brian J Brian J - 5 months ago 24
Javascript Question

How to call a validation callback function within formValidation plugin?

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>

Answer

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);
Comments