Hi there,
I have a validate function for the pre-chat registration form.
The function works, however one of the items is a tick-box which is required.
If the customer doesn't tick then they can't start a chat, but it isn't obvious to the customer, e.g. when a customer doesn't fill in their name the box goes red & states 'required' in the input box but this is not the case for the tickbox.
Is there any way I can either highlight the text or have '* this field is required' pop up if they try to start the chat without ticking the box? Or anything that would make it clear to the customer that they need to tick the box to continue?
Our code is below:
{
"id": "cx_webchat_form_sf_searchvalue",
"name": "Custom Field",
"maxlength": "100",
"placeholder": "Custom data placeholder",
"label": "I agree that chats may be monitored and used for training purposes",
"value": "SomeCoolData",
"type": "checkbox",
"checked": false,
"validate": function(event, form, input, label, $, CXBus, Common){
if (input && input.val() && input[0].checked)
{
return true;
} else {
return false;
}
You could possibly manipulate the label content inside the validate function.
I am not sure that generating a window.alert (inside the validate function) would be great, as it is a blocking function (in case some other part of your code - on the webpage - don't like it).
2 comments:
the "name" attribute is what will be used as keyname when submitting this information to Genesys Cloud (participant data attribute name). So I'd recommend to avoid using space here.
when the WebChat registration form is opened for the first time, the validate function is also triggered. But in this case, input is null. So I would manage it as a separate case in the validate function.
Here is what I have tried. There are probably other ways to manipulate style/color of the label. But that one below seemed to work for me.
{
"id": "cx_webchat_form_sf_searchvalue",
"name": "CustomField",
"maxlength": "100",
"placeholder": "Custom data placeholder",
"label": "I agree that chats may be monitored and used for training purposes",
"value": "SomeCoolData",
"type": "checkbox",
"checked": false,
"validate": function (event, form, input, label, $, CXBus, Common) {
if (input) {
if (input.val() && input[0].checked) {
label[0].innerHTML = "I agree that chats may be monitored and used for training purposes";
return true;
} else {
label[0].innerHTML = "<span style=\"color:red\">I agree that chats may be monitored and used for training purposes</span>";
return false;
}
} else {
// first load
return false;
}
}
}