You need to sign in to do that
Don't have an account?
Jose Nogueira Rodrigues
pre chat form component validation
Hi
I created a component for the Pre chat form and following the examples in the Developer Guide 18, it basically creates the inputs from the custom Pre chat form by collecting them as arrays. It all is inserted just fine in the pre chat form but, the values of the inputs, such as name, are assumed as valid when they are empty which should not be a valid input specially since they are "required" as part of their attributes.
I have been searching for a solution for this and the only solution that makes sence in my mind would be to add an external script that would validate the customer inputs, so in other words that script would be part of the Static Resources and I would call it with this method "embedded_svc.settings.externalScripts = ['validation']", although this script is being ignore for some reason and the custom"prechat.js" from Live agent keep giving me this message: Validation passed, firing chat request event.
Is there a better way to validate the inputs for them not to be empty before starting a live chat? Is there a particular reason as to why my script that is a Static Resource is being ignored?
I created a component for the Pre chat form and following the examples in the Developer Guide 18, it basically creates the inputs from the custom Pre chat form by collecting them as arrays. It all is inserted just fine in the pre chat form but, the values of the inputs, such as name, are assumed as valid when they are empty which should not be a valid input specially since they are "required" as part of their attributes.
I have been searching for a solution for this and the only solution that makes sence in my mind would be to add an external script that would validate the customer inputs, so in other words that script would be part of the Static Resources and I would call it with this method "embedded_svc.settings.externalScripts = ['validation']", although this script is being ignore for some reason and the custom"prechat.js" from Live agent keep giving me this message: Validation passed, firing chat request event.
Is there a better way to validate the inputs for them not to be empty before starting a live chat? Is there a particular reason as to why my script that is a Static Resource is being ignored?
Greetings to you!
Please refer to the below links which might help you further with the above requirement.
https://salesforce.stackexchange.com/questions/107749/on-a-live-agent-pre-chat-form-how-can-i-make-a-field-mandatory
https://help.salesforce.com/articleView?id=snapins_chat_customize_prechat_form.htm&type=5
https://rajvakati.com/2017/11/02/live-agent-pre-chat-forms-with-validations/
I hope it helps you.
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.
Thanks and Regards,
Khan Anas
https://rajvakati.com/category/snap-ins/
I don't know if you ever figured this out. I had a similar requirement; the Case Subject field can't be null. This is what I ended up doing: In the above function, Case Subject was the 4th item on the PreChat form. So, with array notation, this becomes: if(fields[3].value) which will return true as long as that field has something in it. Hope this helps!
Can you please help me with soulation, i am looking same validation in liveagent side.
Sorry I only now noticed your comment, I did manage to solve it but not quite the way that I wanted, it’s not clean code but it does more or less the trick, it might look a bit confusing to be honest, as soon as I notice it was working I just left it as it is. In sum the function that helped me the most is in the “Helper” section and the function is the following:
onStartButtonClick: function(cmp) {
var prechatFieldComponents = cmp.find("prechatField");
var apiNamesMap = this.createAPINamesMap(cmp.find("prechatAPI").getPrechatFields());
var fields;
// Make an array of field objects for the library.
fields = this.createFieldsArray(apiNamesMap, prechatFieldComponents);
var badInputs = new Array;
for(var i = 0; i< fields.length; i++){
var emailVal = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
if(i === 2){
emailVal.test(fields[i].value) ? fields[i].value : badInputs.push(i);
}
if(fields[i].value == undefined || fields[i].value == ''){
badInputs.push(i);
}
}
// If the prechat fields pass validation, start a chat.
if(cmp.find("prechatAPI").validateFields(fields).valid && badInputs.length == 0){
cmp.find("prechatAPI").startChat(fields);
} else {
console.warn("Prechat fields did not pass validation!");
return badInputs;
}
}