Example chat widget with custom case field validation and custom customer field validation

gistfile1.txt

Chat Widget Header with Custom Field Example and Validation

Header section:

<title>{{ site.company_name }}</title>

<link rel="icon" type="image/vnd.microsoft.icon" href='{{ "/favicon.png" | portal_image_url: image_asset_host }}' />

<link rel="icon" type="image/png" href='{{ "/favicon.png" | portal_image_url: image_asset_host }}' />

<style type="text/css">

.customer_inner_widget

{

padding-top:0px;

padding-bottom:20px;

padding-right:20px;

padding-left:20px;

}

</style>

<script type='text/javascript'>
          //<![CDATA[

   
jQuery(document).ready(function() {



$("#customer_first_name").rules("add", {
    required:true,
    messages: {
      required: "! required"
}
    });


$("#ticket_custom1").rules("add", {
    required:true,
    messages: {
      required: "your custom field value is required"
}
    });



$("#customer_last_name").rules("add", {
    required:true,
    messages: {
      required: "! required"
}
    });

$("#interaction_email").rules("add", {
    required:true,
    messages: {
      required: "! required",
      email: "! invalid"
}
    });

$("#chat_subject").rules("add", {
    required:true,
    messages: {
      required: "! required"
}
    });


});

          //]]>
        </script>

Body:

<div id="customer_widget_main" class="customer_widget">

<div class="inside_title" style="font-size:25px">{{site.company_name}} Help Center</div>

<div class="inside_desc">CHAT SUPPORT</div>

<div class="customer_inner_widget" >


<div class="input"><span class="form_label">Your name:</span>

  
first: <input class="default l" type="text" name="customer[first_name]" id="customer_first_name">
last: <input class="default l" type="text" name="customer[last_name]" id="customer_last_name">
</div>

<div class="input">

<span class="form_label">Your email address:</span>

{{ interaction_email }}

</div>
  
<div class="input"><span class="form_label">My Test Field:</span>

{{ ticket_custom_mytestfield }}

</div>
  

<div class="input"><span class="form_label">Question:</span>

{{ chat_subject }}

</div>

{{hidden_parameters }}

{{ submit_button }}

{{ interaction_info }}

</div><!--customer_inner_widget-->

</div><!--customer_widget_main-->

how can i use this..?
it's give me a error to save this code..

me, too