example script for Assistly email form demonstrating additional validation

gistfile1.txt

<div id='breadcrumbs'>
  <a href='{{home_link}}'>Home</a> &rsaquo; Email Us
</div>
<div id='support-main'>
  <div class='support-body'>
    <div class='content'>
      <h3>Email Us</h3>
      <div id='form'>
        {{form_begin}}
          {% if current_user.is_guest %}
            <div class='input-block'>
              <span class='label'>
                Your first and last name <span>(required)</span>
              </span>
              <div>
                <em>(first name)</em> <input class="default l" type="text" name="customer[first_name]" id="customer_first_name"><br>
                <em>(last name)</em> <input class="default l" type="text" name="customer[last_name]" id="customer_last_name">
                
        
              </div>
            </div>
            <div class='input-block'>
              <span class='label'>
                Your email address <span>(required)</span>
              </span>
              <div>
                <input value='{{ interaction.email }}' id='interaction_email' maxlength='100' name='interaction[email]' type='text' />
              </div>
            </div>
          {% endif %} 
          <div class='input-block'>
            <span class='label'>
              Subject <span>(required)</span>
            </span>
            <div>
              <input id='email_subject' maxlength='100' name='email[subject]' type='text' value='{% if search_term and search_term != '' %}{{search_term}}{% else %}{{email.subject}}{%endif%}'/>
            </div> 
          </div> 
          <div class='input-block'>
            <span class='label'>
              Message <span>(required)</span>
            </span>
            <div>
              <textarea id='email_body' name='email[body]'>{{email.body}}</textarea>
            </div>
          </div>
          <div class='input-block'>
            <span class='label'>
              File Attachment
            </span>
            <div>
              <input name="case_attachment[attachment]" size="84" type="file"/>
            </div>
          </div><br/>
          <div class='input-button'>
            <input id='email_submit' name='commit' type='submit' value='Send Email' />
            <img alt='Ajax-loader-small' id='email_submit_spinner' src='{{ "/images/ajax-loader-small.gif" | portal_image_url: image_asset_host }}' style='display: none; margin: 7px 0 0 5px; position: absolute;' />
          </div>
        {{form_end}}
        <script type='text/javascript'>
          //<![CDATA[

          $('#email_body').textarea_maxlength();
          $('#new_email').validate({
            submitHandler: function(form) {
              $('#email_submit').attr('disabled',true);
              //$('#new_email').attr('action','/customer/portal/emails'); //use this line optionally to bypass the "Pre-Create" page

              $('#email_submit').addClass('disabled');
              $('#email_submit_spinner').show();
              form.submit();
            },
            messages:{
       
              'interaction[email]':{
                'required':'Email address is required.',
                'email':'Invalid email address'
              },

              'email[subject]':{
                'required':'Subject is required.'
              },
              'email[body]':{
                'required':'Message is required.',
                'maxlength':'Exceeding max length of 5KB'
              }
            },
            rules:{
              'interaction[name]':{
                'required':true
              },

              'interaction[email]':{
                'required':true,
                'email':true
              },
              'email[subject]':{
                'required':true,
                'invalidchars':''
              },
              'email[body]':{
                'required':true,
                'maxlength':5000,
                'invalidchars':''
              }
            },
            errorClass:'invalid'
          });


jQuery(document).ready(function() {



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


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




});



          //]]>
        </script>
      </div>
    </div>
  </div>
  <!--
  ***************
  The following attribution needs to remain as is in terms of wording with the appropriate link back to Assistly as per our terms of service: http://www.assistly.com/terms
  If you would like, you may change the location or the styling to better match your site, but the content and the link must remain in the template and visible to end users.
  ****************
  -->
  <div id='footer'>
    {{ footer_content }}
    <br/>
    <a href='http://www.assistly.com'>Customer service software</a> powered by Assistly Inc.
  </div>
</div>