0

Design:

HTML:

<script src='https://www.google.com/recaptcha/api.js'></script>
<div class='panel panel-default'>
  <div class='panel-heading' style="background-color:#e9f6ff;border-bottom: solid 2px #41B1FF">
    <h4 style="text-align:center;">QualityNet Question and Answer Site</h4>
  </div>
     <div class="disclaimer">
    <h4>Submit a Question to Our Support Team. <span class="required-mark" style="    margin-left: 640px;
    font-size: 14px;"><span style="color: red;">* </span>Indicates required field</span></h4>
    </div>
  <div class='container disclaimer'>
    <h3 class="heading_text">Tell us about yourself</h3>
    <div class="row">
      <div class="col-md-4">
        <label>First Name</label><span class="required-mark" style="color:red">*</span>
    <input type="text" class="form-control" placeholder="enter last name (limit 75 chars)"  id="first_name" onchange="firstNameValidation()" ng-model="c.data.model.consumer.first_name" sessionvalue="{{::data.first_name}}" required/>
         </div>
       <div class="col-md-4">
        <label>Last Name</label><span class="required-mark" style="color:red">*</span>
        <input required class="form-control" type="text" placeholder="enter last name (limit 75 chars)" id="last_name" onchange="lastNameValidation()" ng-model="c.data.model.consumer.last_name" sessionvalue="{{::data.last_name}}" required/>
        </div>
      </div>
    <br>
         <div class="row">
      <div class="col-md-4">
        <label>Email Address</label><span class="required-mark" style="color:red">*</span>
           <input required class="form-control" type="text" id="email1" placeholder="enter email address; format joe@domain.com" ng-model="c.data.model.consumer.email" onchange="emailValidationzlength()" required/>
        </div>
            <div class="col-md-4">
        <label>Confirm Email Address</label><span class="required-mark" style="color:red">*</span>
        <input required class="form-control" type="text" id="confemail" placeholder="enter email address again to confirm" ng-model="c.data.model.consumer.confirm_email" onchange="emailValidation()" required/>
        </div>
            <div class="col-md-4">
        <label>Phone Number</label>
              <input required class="form-control" type="text" placeholder="format xxx-xxx-xxxx (ext.)" ng-model="c.data.model.consumer.phone_number"/>
      </div>
           </div>
           <br>
            <h3 class="heading_text">What is your question?</h3>
                      <div class="row">
             <div class="col-xs-4">
               <label>Program</label><span class="required-mark" style="color:red">*</span>
              <input type="text" required class="form-control" id="get_program" placeholder="Program" onchange="showHideFields()" ng-model="c.data.model.u_program" required/>
                  </div>
             </div>
    <br> 
<div class="row">
             <div class="col-xs-4">
               <label>Topic</label><span class="required-mark" style="color:red">*</span>
    <!--sn-record-picker class="form-control input-lg m-t-xl" style="border: 1px dashed red;padding-left: 13px;" placeholder="Program" field="topic" table="'u_rightnow_categories'" display-field="'u_topic'" value-field="'sys_id'" search-fields="'u_topic'" default-query="'u_parentISEMPTY'" page-size="100" width=40%></sn-record-picker-->
     <input class="form-control" id="topic_val" type="text" placeholder="select from the list of provided topics" ng-click="c.openModal()" ng-model="c.data.model.u_topic" required/>
     </div>
             </div>
       <div class="row" id="hospital_ccn">
             <div class="col-xs-12" >
                <label id="hospital_ccn_mandatory">Hospital CCN<span class="required-mark"  style="color:red"> *</span></label>
   <label id="hospital_ccn_mand">Hospital CCN</label>
               <label></label>
                  <!--sn-record-picker class="form-control input-lg m-t-xl" style="border: 1px dashed red;padding-left: 13px;" placeholder="Program" field="topic" table="'u_rightnow_categories'" display-field="'u_topic'" value-field="'sys_id'" search-fields="'u_topic'" default-query="'u_parentISEMPTY'" page-size="100" width=40%></sn-record-picker-->
     <input class="form_custom" type="text" style="width: 21%; margin-left: -2px;" id="hospital_ccn1" placeholder="Hospital CCN"  ng-model="c.data.model.u_hospital_ccn" onchange="ccnhospValidation()" /> <span class="help_text">6 Digit CMS Certification Number, Numeric only. Format: ######</span>
     </div>
             </div>
                    <div class="row" id="rep_quarter">     
        <div class="col-xs-3">
               <label>Reporting Quarter</label>
              <select class="form-control" placeholder="Reporting Quarter"  ng-model="c.data.model.u_reporting_quarter"  required>
      <option value="" disabled hidden selected>Reporting Quarter</option>         
                                                             <option value="Q2 2019">Q2 2019</option>
                 <option value="Q1 2019">Q1 2019</option>
                 <option value="Q4 2018">Q4 2018</option>
                 <option value="Q3 2018">Q3 2018</option>
                 <option value="Q2 2018">Q2 2018</option>
                 <option value="Q1 2018">Q1 2018</option>
                 <option value="Q4 2017">Q4 2017</option>
                 <option value="Q3 2017">Q3 2017</option>
                 <option value="Q2 2017">Q2 2017</option>
                 <option value="Q1 2017">Q1 2017</option>
                 <option value="Q4 2016">Q4 2016</option>
                 <option value="Q3 2016">Q3 2016</option>
                 <option value="Q2 2016">Q2 2016</option>
                 <option value="Q1 2016">Q1 2016</option>
                                             </select>
             </div>
             </div> 
    <div class="row" id="encounter_date"> 
     <div class="col-xs-3">
               <label id="encounter_date_mandatory">Encounter Date <span class="required-mark"  style="color:red">*</span></label>
   <label id="encounter_date_mand">Encounter Date</label>
              <select class="form-control" placeholder="Program" ng-model="c.data.model.u_encounter_date" required>
      <option value="" disabled hidden selected>Encounter Date</option>
                <option value="2Q 19 (03/01 - 06/30)">2Q 19 (03/01 - 06/30)</option>
                <option value="1Q 19 (01/01 - 03/31) ">1Q 19 (01/01 - 03/31) </option>
                <option value="4Q 18 (10/01 - 12/31)">4Q 18 (10/01 - 12/31)</option>
                <option value="3Q 18 (07/01 - 09/30)">3Q 18 (07/01 - 09/30)</option>
                <option value="2Q 18 (03/01 - 06/30)">2Q 18 (03/01 - 06/30)</option>
                <option value="1Q 18 (01/01 - 03/31)">1Q 18 (01/01 - 03/31)</option>
                <option value="4Q 17 (10/01 - 12/31)">4Q 17 (10/01 - 12/31)</option>
                <option value="3Q 17 (07/01 - 09/30)">3Q 17 (07/01 - 09/30)</option>
                <option value="2Q 17 (04/01 - 06/30)">2Q 17 (04/01 - 06/30)</option>
                <option value="1Q 17 (01/01 - 03/31)">1Q 17 (01/01 - 03/31)</option>
                <option value="4Q 16 (10/01 - 12/31)">4Q 16 (10/01 - 12/31)</option>
                <option value="3Q 16 (07/01 - 09/30)">3Q 16 (07/01 - 09/30)</option>
                <option value="2Q 16 (04/01 - 06/30)">2Q 16 (04/01 - 06/30)</option>
                <option value="1Q 16 (01/01 - 03/31)">1Q 16 (01/01 - 03/31)</option>
                       </select>
             </div>
             </div> 
         <div class="row" id="hosp_out">
      <div class="col-xs-12">
        <label>Hospital Outpatient CCN</label>
    <br>
        <input class="form_custom" type="text"  style="width: 21%;" placeholder="Hospital Outpatient CCN" id="ccn" onchange="ccnValidation()" ng-model="c.data.model.u_hospital_outpatient_ccn"/><span class="help_text">6 Digit CMS Certification Number, Numeric only. Format: ######</span>
    </div>
      </div>
      <div class="row" id="asc_npi">
      <div class="col-md-12">
        <label>ASC NPI and CCN</label>
        <br>
    <input required class="form_custom" type="text" style="width: 21%;" placeholder="ASC NPI" id="ccn_npi" ng-model="c.data.model.u_asc_npi_and_ccn_npi" onchange="ccnNpiValidation()"/><span class="help_text"> 10 Digit ASC NPI Number, Numeric only. Format: ##########</span>
    </div>
    </div>
    <div class="row" id="asc_ccn">
      <div class="col-md-12">
        <label>ASC CCN</label>
        <br>
    <input required class="form_custom" type="text" style="width: 21%;" placeholder="ASC CCN" id="asc_ccn1" ng-model="c.data.model.u_asc_ccn" onchange="ascCcnNpiValidation()"/><span class="help_text">10 Digit ASC CCN Number, AlphaNumeric, requires Upper Case "C" as third character. Format: ##C#######</span>
    </div>
    </div>
          <div class="row" id="discharge_period">     
        <div class="col-xs-3">
               <label>Discharge Period</label><span class="required-mark" style="color:red">*</span>
              <select required class="form-control" placeholder="Reporting Quarter" ng-model="c.data.model.u_discharge_period" required>
      <option value="" disabled hidden selected>Discharge Period</option>         
                                                             <option value="N/A">N/A</option>
                 <option value="07/01/2019 - 12/31/2019">07/01/2019 - 12/31/2019</option>
                 <option value="01/01/2019 - 06/30/2019">01/01/2019 - 06/30/2019</option>
                 <option value="07/01/2018 - 12/31/2018">07/01/2018 - 12/31/2018</option>
                 <option value="01/01/2018 - 06/30/2018">01/01/2018 - 06/30/2018</option>
                 <option value="01/01/2017 - 12/31/2017">01/01/2017 - 12/31/2017</option>
                 <option value="07/01/2016 - 12/31/2016">07/01/2016 - 12/31/2016</option>
                 <option value="10/01/2015 - 06/30/2016">10/01/2015 - 06/30/2016</option>
                 <option value="01/01/2015 - 09/30/2015">01/01/2015 - 09/30/2015</option>
                                              </select>
             </div>
             </div> 
          <div class="row" id="discharge_period_ipf">     
        <div class="col-xs-3">
               <label>Discharge Period_IPF</label><span class="required-mark" style="color:red">*</span>
              <select required class="form-control" placeholder="Discharge Period_IPF" id="discharge_periodipf" ng-model="c.data.model.u_discharge_period_ipf" required>
      <option value="" disabled hidden selected>Discharge Period</option>         
                                                             <option value="n_a">N/A</option>
                 <option value="01/01/2019-06/30/2019">01/01/2019-06/30/2019</option>
                 <option value="07/01/2019-12/31/2019">07/01/2019-12/31/2019</option>
                 <option value="01/01/2020-06/30/2020">01/01/2020-06/30/2020</option>
                 <option value="07/01/2020-12/31/2020">07/01/2020-12/31/2020</option>
                                                              </select>
             </div>
             </div> 
     <br>
    <div class="row">
             <div class="col-xs-10">
               <label>Subject</label><span class="required-mark" style="color:red">*</span>
          <!-- <input class="form-control" type="text" placeholder="Summary" ng-model="c.data.model.short_description" required/>-->      
                      <input class="form-control" type="text" style="width: 76%;" placeholder="enter a brief summary of your question (limit 160 chars)" id="summary" ng-model="c.data.model.short_description" onchange="subjectValidation()" required/>
    </div>
             </div>
   <br>
           <div class="row">
             <div class="col-xs-12">
               <label>Question (4000 Characters Max)</label><span class="required-mark" style="color:red">*</span>
          <!-- <input class="form-control" type="text" placeholder="Summary" ng-model="c.data.model.short_description" required/>-->      
                     <textarea  class="form-control" style="width: 97%;" ng-model='c.data.model.u_question' placeholder='enter your question for CMS' maxlength=4000 required></textarea>
         <span ng-if="c.data.model.u_question.length<4000">{{4000 - c.data.model.u_question.length}} characters left</span>
    <span ng-if="c.data.model.u_question.length==4000">You have reached the maximum limit of 4000 characters for this field.</span>
                     </div>
             </div>
    <div class="row">
            </div>
      <div class="col-xs-9">
        <button class='btn btn-primary btn-margin btn-block text-uppercase btn-lg button_design' ng-click='submitTicket()'>Submit Question</button>
         </div>
      </div>
    <!--<div class='big-label'>Add Photos</div>
<aaq-attachment-list template='aaq_AttachmentList'></aaq-attachment-list>-->
    <!-- <input type="button" value="Test" ng-click="c.checkCap()" /> -->
      <script> 
  setTimeout(function(){  document.getElementById("first_name").value=document.getElementById("first_name").getAttribute("sessionvalue");
                       }, 1000);
    function ccnhospValidation()
  {
    var ccn = document.getElementById("hospital_ccn1").value
            if(ccn.length>6)
    {
       document.getElementById("hospital_ccn1").value="";
            alert('Length is not more than 6 characters');
    }
  }
function showHideFields()
  {
    document.getElementById("topic_val").value="";
  var program = document.getElementById("get_program").value;
    document.getElementById("encounter_date_mandatory").style.display = "none";
    document.getElementById("encounter_date_mand").style.display = "none";
     document.getElementById("hospital_ccn_mandatory").style.display = "none";
    document.getElementById("hospital_ccn_mand").style.display = "none";
     if(program=="9671cb13dbaab30092d5365e7c9619fd")
    {
      document.getElementById("discharge_period_ipf").style.display = "block";
      document.getElementById("discharge_period_ipf").style.marginTop = "19px";
    }
    else{
      document.getElementById("discharge_period_ipf").style.display = "none";
      document.getElementById("discharge_period_ipf").style.marginTop = "0px";
    }
     if(program=="9a71cb13dbaab30092d5365e7c9619ff" || program=="d6718b13dbaab30092d5365e7c961913" || program=="9671cb13dbaab30092d5365e7c9619fd" || program=="52710f13dbaab30092d5365e7c961929" || program=="16710f13dbaab30092d5365e7c96192e" || program=="9a71cb13dbaab30092d5365e7c9619fb" || program=="e6710f13dbaab30092d5365e7c96195a")
   {
   document.getElementById("hospital_ccn_mand").style.display = "block";
   }
   if(program=="27710f13dbaab30092d5365e7c9619f7")
   {
     document.getElementById("encounter_date_mand").style.display = "block";
     document.getElementById("hospital_ccn_mandatory").style.display = "block";
   }
    else if(program=="ee710f13dbaab30092d5365e7c961940" || program=="e6710f13dbaab30092d5365e7c961944" || program=="9a710f13dbaab30092d5365e7c96192f")
    {
       document.getElementById("encounter_date_mandatory").style.display = "block";
    }
     if(program=="ee710f13dbaab30092d5365e7c961940" || program=="e6710f13dbaab30092d5365e7c961944" || program=="9a710f13dbaab30092d5365e7c96192f" || program=="27710f13dbaab30092d5365e7c9619f7")
   {
           document.getElementById("rep_quarter").style.display = "block";
     document.getElementById("rep_quarter").style.marginTop = "19px";
     document.getElementById("rep_quarter").style.marginBottom = "19px";
      document.getElementById("hosp_out").style.display = "block";
     document.getElementById("hosp_out").style.marginTop = "19px";
     document.getElementById("hosp_out").style.marginBottom = "19px"
       document.getElementById("encounter_date").style.display = "block";
   }
    else{
    document.getElementById("rep_quarter").style.display = "none";
      document.getElementById("rep_quarter").style.marginTop = "0px";
     document.getElementById("rep_quarter").style.marginBottom = "0px";
         document.getElementById("hosp_out").style.display = "none";
       document.getElementById("hosp_out").style.marginTop = "0px";
     document.getElementById("hosp_out").style.marginBottom = "0px";
      document.getElementById("encounter_date").style.display = "none";
    }
   if(program=="ee710f13dbaab30092d5365e7c961940" || program=="e6710f13dbaab30092d5365e7c961944" || program=="9a710f13dbaab30092d5365e7c96192f")
   {
          ;
         document.getElementById("asc_npi").style.display = "block";
    document.getElementById("asc_ccn").style.display = "block";
     document.getElementById("asc_ccn").style.marginTop = "19px";
   }
    else{
                    document.getElementById("asc_npi").style.display = "none"; 
      document.getElementById("asc_ccn").style.display = "none";
       document.getElementById("asc_ccn").style.marginTop = "0px";
    }
    if(program=="d6718b13dbaab30092d5365e7c961913")
   {  
         document.getElementById("discharge_period").style.display = "block";
     document.getElementById("discharge_period").style.marginTop = "19px";
         }
         else{
             document.getElementById("discharge_period").style.display = "none";
      document.getElementById("discharge_period").style.marginTop = "0px";
          }
           if(program=="16710f13dbaab30092d5365e7c96192e" || program=="9a71cb13dbaab30092d5365e7c9619ff" || program=="52710f13dbaab30092d5365e7c961929" || program=="9671cb13dbaab30092d5365e7c9619fd" || program=="9a71cb13dbaab30092d5365e7c9619fb" || program=="d6710f13dbaab30092d5365e7c96192b" || program=="d6718b13dbaab30092d5365e7c961913" || program=="27710f13dbaab30092d5365e7c9619f7" || program=="e6710f13dbaab30092d5365e7c96195a")
   {  
   document.getElementById("hospital_ccn").style.display = "block";
     document.getElementById("hospital_ccn").style.marginTop = "19px";
   }
    else{
      document.getElementById("hospital_ccn").style.display = "none";
      document.getElementById("hospital_ccn").style.marginTop = "0px";
    }
  }
    function ascCcnNpiValidation()
  {
     var numbers = /^[0-9]{0,2}[C][0-9]+$/;
 var val=document.getElementById("asc_ccn1").value;
      if(val.match(numbers) && val.length<11)
       {
           }
    else{
       document.getElementById("asc_ccn1").value="";
            alert("ASC CCN field requires 10 Digit ASC CCN Number, AlphaNumeric, requires Upper Case 'C' as third character. Format: ##C#######");
    }
              }
  function ccnNpiValidation()
  {
  var ccn = document.getElementById("ccn_npi").value
            if(ccn.length>10)
    {
       document.getElementById("ccn_npi").value="";
            alert('Length is not more than 10 characters');
    }
  }
   function ccnValidation()
  {
  var ccn = document.getElementById("ccn").value
            if(ccn.length>6)
    {
       document.getElementById("ccn").value="";
            alert('Length is not more than 6 characters');
    }
  }
  function emailValidation()
  {
  var email = document.getElementById("email1").value
        var confemail = document.getElementById("confemail").value
        if(email.toLowerCase() != confemail.toLowerCase()) {
          document.getElementById("confemail").value="";
            alert('The confirmation email must match your email');
        }
     if(confemail.length>100)
    {
       document.getElementById("confemail").value="";
            alert('Length is not more than 100 characters');
    }
  }
  function emailValidationzlength()
  {
    var email = document.getElementById("email1").value
     if(email.length>100)
    {
       document.getElementById("email1").value="";
            alert('Length is not more than 100 characters');
    }
  }
  function lastNameValidation()
  {
    var last_name=document.getElementById("last_name").value
   if(last_name.length>75)
    {
       document.getElementById("last_name").value="";
            alert('Length is not more than 75 characters');
    }
  }
   function subjectValidation()
  {
    var summary=document.getElementById("summary").value
   if(summary.length>160)
    {
       document.getElementById("summary").value="";
            alert('Length is not more than 160 characters');
    }
  }
  function firstNameValidation()
  {
    var first_name=document.getElementById("first_name").value
   if(first_name.length>75)
    {
       document.getElementById("first_name").value="";
            alert('Length is not more than 75 characters');
    }
  }
    </script>

Server Script:

(function() {
    /* populate the 'data' object */
    /* e.g., data.table = $sp.getValue('table'); */
     data.first_name = gs.getSession().getClientData('firstname');
    data.last_name = gs.getSession().getClientData('lastname');
    data.topic = [];
      var createCase = function(case_data) {
        gs.getSession().putClientData('firstname', case_data.consumer.first_name);
        gs.getSession().putClientData('lastname', case_data.consumer.last_name);
        var grNewCase = new GlideRecord('incident');
         grNewCase.initialize();
         grNewCase.short_description = case_data.short_description;
        grNewCase.priority = case_data.priority;
        grNewCase.u_discharge_period = case_data.u_discharge_period;
        grNewCase.u_asc_ccn = case_data.u_asc_ccn;
        grNewCase.u_hospital_outpatient_ccn = case_data.u_hospital_outpatient_ccn;
        grNewCase.u_encounter_date = case_data.u_encounter_date;
        grNewCase.u_reporting_quarter = case_data.u_reporting_quarter;
        grNewCase.u_hospital_ccn = case_data.u_hospital_ccn;
        grNewCase.u_asc_npi_and_ccn_npi = case_data.u_asc_npi_and_ccn_npi;
        grNewCase.u_program = "qualitynet_qa";
        grNewCase.u_discharge_period_ipf = case_data.u_discharge_period_ipf;
           grNewCase.insert();
        data.case_number = grNewCase.number.toString();
         if (case_data.attachments.files.length) {
            var grAttach = new GlideRecord('sys_attachment');
            grAttach.addEncodedQuery('table_name=sp_portal^table_sys_id=' + case_data.attachments.guid);
            grAttach.query()
            grAttach.setValue("table_name", 'incident');
            grAttach.setValue("table_sys_id", data.new_id);
            grAttach.updateMultiple();
        }
        //gs.addInfoMessage('New Case has been submitted');
        data.success = true;
        //return data.case_number;
    }
      if (input.action === 'newCase') {
        var case_data = input.case_data;
        //var id = findConsumer(case_data.consumer);
        //var contact=findContact(case_data.consumer);
        try {
            //if(id){
            //case_data.consumer.id = id;
            //}else{
            //id = createConsumer(case_data.consumer);
            //case_data.consumer.id = id;
            //}
            //case_data.contact=contact;
            createCase(case_data);
            data.success = true;
        } catch (e) {
            data.err = e;
            data.success = false;
        }
    }
      data.model = {
        contact_type: 'public_qa',
        priority: '4',
        //contact : 'fd62f9b3db59f740fdd290c7db9619ec',
        short_description: '',
        comments: '',
        work_notes: '',
        consumer: {
            last_name: '',
            first_name: '',
            email: ''
        }
    };
      var m = data.msgs = {};
    m.dialogTitle = gs.getMessage("Delete Attachment");
    m.largeAttachmentMsg = gs.getMessage("Attached files must be smaller than {0} - please try again", "24MB");
    m.renameSuccessMsg = gs.getMessage("Attachment renamed successfully");
    m.deleteSuccessMsg = gs.getMessage("Attachment deleted successfully");
    data._attachmentGUID = gs.generateGUID();
})();

Client Controller

function($uibModal, $scope, $rootScope, $element, $window, $location, $anchorScroll, $timeout, $http, $q, nowAttachmentHandler, spUtil) {
    /* widget controller */
     var c = this;
    //$window.obj={field:{displayValue:"",name:"topic",value:""}, newValue: "", displayValue: ""};
    $window.obj = '';
    $rootScope.$on('customEvent', function(event, obj) {
        $scope.category = obj;
        $scope.c.data.model.u_topic = $scope.category.displayValue;
        $scope.c.data.model.u_topic_sys_id = $scope.category.value;
    });
     this.openModal = function(url) {
        $window.obj = $scope.c.data.model.u_program;
        //$scope.modurl='/sp?id=approval&table=sysapproval_approver&sys_id=ffe907714f4392048eca97dd0210c76d';
        $scope.modurl = url;
        this.modalInstance = $uibModal.open({
            templateUrl: 'modalTemplate',
            scope: $scope
        });
    };
     this.closeModal = function() {
        this.modalInstance.close();
    };
     $scope.required = true;
     //--Attachment Handler Start
    $scope.$on('dialog.upload_too_large.show', function(e) {
        $log.error($scope.m.largeAttachmentMsg);
        spUtil.addErrorMessage($scope.m.largeAttachmentMsg);
    });
     $scope.m = $scope.data.msgs;
    $scope.submitButtonMsg = $scope.m.submitMsg;
    var ah = $scope.attachmentHandler = new nowAttachmentHandler(setAttachments, appendError);
     function appendError(error) {
        spUtil.addErrorMessage(error.msg + error.fileName);
    }
     ah.setParams('sp_portal', $scope.data._attachmentGUID, 1024 * 1024 * 24);
     function setAttachments(attachments, action) {
        $scope.attachments = attachments;
        if (action === "added")
            $scope.setFocusToAttachment();
        if (action === "renamed")
            spAriaUtil.sendLiveMessage($scope.m.renameSuccessMsg);
        if (action === "deleted")
            spAriaUtil.sendLiveMessage($scope.m.deleteSuccessMsg);
    }
     $scope.attachmentHandler.getAttachmentList();
     $scope.confirmDeleteAttachment = function(attachment, $event) {
        $rootScope.$broadcast("dialog.delete_attachment.show", {
            parms: {
                ok: function() {
                    $scope.attachmentHandler.deleteAttachment(attachment);
                    $rootScope.$broadcast("dialog.delete_attachment.close");
                },
                cancel: function() {
                    $rootScope.$broadcast("dialog.delete_attachment.close");
                },
                details: attachment.name
            }
        });
    };
    //--Attachment Handler Stop
     /**
     * c.checkCap should be called via ng-click, and will return a boolean value,
     * indicating whether the user is indeed validated to not be some sort of mechanized
     * button-pushing device.
     * If the user has performed no such validation, then an alert is shown, admonishing
     * them for attempting to take over the human race.
     */
    c.checkCap = function() {
        var defer = $q.defer();
        try {
            c.data.captchaSession = grecaptcha.getResponse();
            if (!c.data.captchaSession) {
                alert('Nice try, robot. \nYour mighty microchips are no match for our CAPTCHA technology!');
                resp = false;
            }
            c.server.get({
                action: 'captcha',
                captchaSession: c.data.captchaSession
            }).then(function(response) {
                defer.resolve(response.data.captchaResponse);
            });
        } catch (e) {
            defer.reject(false);
        }
        grecaptcha.reset();
        return defer.promise;
    }
     $scope.submitTicket = function() {
        var program = document.getElementById("get_program").value;
        var program_con = true;
        alert(c.data.model.consumer.first_name)
        if (program == "ee710f13dbaab30092d5365e7c961940" || program == "e6710f13dbaab30092d5365e7c961944" || program == "9a710f13dbaab30092d5365e7c96192f") {
            if (document.getElementById("first_name").value != '' && document.getElementById("first_name").value != undefined && c.data.model.consumer.last_name != '' && c.data.model.consumer.last_name != undefined && c.data.model.consumer.email != '' && c.data.model.consumer.email != undefined && c.data.model.u_topic != '' && c.data.model.u_sub_topic != '' && c.data.model.short_description != '' && c.data.model.short_description != undefined && c.data.model.u_program != undefined && c.data.model.u_topic != undefined && c.data.model.u_encounter_date != undefined && c.data.model.u_question != '' && c.data.model.u_question != undefined && c.data.model.consumer.confirm_email != '' && c.data.model.consumer.confirm_email != undefined && c.data.model.consumer.confirm_email != "") {
                program_con = true;
            }
        } else if (program == "27710f13dbaab30092d5365e7c9619f7") // validation
        {
             if (c.data.model.consumer.first_name != '' && c.data.model.consumer.first_name != undefined && c.data.model.consumer.last_name != '' && c.data.model.consumer.last_name != undefined && c.data.model.consumer.email != '' && c.data.model.consumer.email != undefined && c.data.model.u_topic != '' && c.data.model.u_sub_topic != '' && c.data.model.short_description != '' && c.data.model.short_description != undefined && c.data.model.u_program != undefined && c.data.model.u_topic != undefined && c.data.model.u_question != '' && c.data.model.u_question != undefined && c.data.model.consumer.confirm_email != '' && c.data.model.consumer.confirm_email != undefined && document.getElementById("hospital_ccn1").value != undefined && document.getElementById("hospital_ccn1").value != "") {
                program_con = true;
            }
        } else if (program == "9671cb13dbaab30092d5365e7c9619fd") {
              if (c.data.model.consumer.first_name != '' && c.data.model.consumer.first_name != undefined && c.data.model.consumer.last_name != '' && c.data.model.consumer.last_name != undefined && c.data.model.consumer.email != '' && c.data.model.consumer.email != undefined && c.data.model.u_topic != '' && c.data.model.short_description != '' && c.data.model.short_description != undefined && c.data.model.u_program != undefined && c.data.model.u_topic != undefined && c.data.model.u_question != '' && c.data.model.u_question != undefined && c.data.model.consumer.confirm_email != '' && c.data.model.consumer.confirm_email != undefined && c.data.model.u_discharge_period_ipf != '' && c.data.model.u_discharge_period_ipf != undefined)
             {
                program_con = true;
            }
        } else if (program == "d6718b13dbaab30092d5365e7c961913") {
            if (c.data.model.consumer.first_name != '' && c.data.model.consumer.first_name != undefined && c.data.model.consumer.last_name != '' && c.data.model.consumer.last_name != undefined && c.data.model.consumer.email != '' && c.data.model.consumer.email != undefined && c.data.model.u_topic != '' && c.data.model.u_sub_topic != '' && c.data.model.short_description != '' && c.data.model.short_description != undefined && c.data.model.u_program != undefined && c.data.model.u_topic != undefined && c.data.model.u_question != '' && c.data.model.u_question != undefined && c.data.model.u_discharge_period != undefined && c.data.model.consumer.confirm_email != '' && c.data.model.consumer.confirm_email != undefined && c.data.model.consumer.confirm_email != "") {
                program_con = true;
            }
        } else {
             if (c.data.model.consumer.first_name != '' && c.data.model.consumer.first_name != undefined && c.data.model.consumer.last_name != '' && c.data.model.consumer.last_name != undefined && c.data.model.consumer.email != '' && c.data.model.consumer.email != undefined && document.getElementById("topic_val").value != '' && c.data.model.u_sub_topic != '' && c.data.model.short_description != '' && c.data.model.short_description != undefined && c.data.model.u_program != undefined && c.data.model.u_question != '' && c.data.model.u_question != undefined && c.data.model.consumer.confirm_email != '' && c.data.model.consumer.confirm_email != undefined) {
                program_con = true;
            }
        }
        if (program_con) {
            //$scope.c.data.model.u_program=$window.obj.field.value;
            c.checkCap().then(function(response) {
                 c.data.model.attachments = {
                    guid: c.data._attachmentGUID,
                    files: $scope.attachments
                };
                c.server.get({
                    action: 'newCase',
                    case_data: c.data.model
                }).then(function(response) {
                     var number = response.data.case_number;
                    //alert(number);
                    $window.case_submitted = number;
                     //$rootScope.$broadcast('case_submitted',number);
                    $location.url('?id=index');
                 });
             });
        } else {
            alert("Required fields can not be empty ")
        }
    }
     function isThisTrueOrWhat(b) {
        return ((typeof b == 'string') ? (b.toLowerCase() == 'true') : (b == true)); //all this just to properly return a bool in JS. THERE'S GOT TO BE A BETTER WAY!
    }
}

Output

Service Portal widget code of Custom form design with Mandatory fields ServiceNow
Working Code Asked question July 7, 2023