asiaH3/modules/ask/_ask_widget_form.html.erb

<div class="widget-ask widget1">
  <style type="text/css">
    #new-ask-question .form-horizontal .control-group > *{
      font-size: 1.125em;
    }
    .default_picker label{
      display: none;
    }
    .ask-question .control-group{
      flex-wrap: wrap;
      display: flex;
      width: 100%;
      align-items: flex-start;
    }
    .ask-question .controls > *{
      display: block;
    }
    .ask-question .controls > script{
      display: none;
    }
    .ask-question .form-horizontal .control-label{
      width: 24%;
      max-width: 15em;
      min-width: 7em;
      padding: 0;
      text-align: center;
    }
    .ask-question .form-horizontal .control-group .controls{
      margin: 0;
      display: inline-flex;
      align-items: flex-start;
      overflow: hidden;
      position: relative;
      min-width: 10em;
      max-width: 25em;
      padding-left: 0;
      width: 100%;
      padding: 0.5em;
      justify-content: flex-start;
    }
    .ask-question .form-horizontal input[type="text"],.ask-question  .form-horizontal select{
      width: 97%;
    }
    .ask-question .form-horizontal input[type="text"].hasDatepicker{
      width: auto;
    }
    .ask-question .form-horizontal .form-actions{
      position: relative;
      padding: 1em 0 0 0;
      text-align: center;
    }
    .ask-question .controls > input[type="radio"]:not(:first-child) {
      margin-left: 0.5em;
    }
  </style>
  <link href="/assets/custom_field.css" media="screen" rel="stylesheet">
  <script src="/assets/validator"></script>
  <link href="/assets/ask/ask.css" media="screen" rel="stylesheet">
  <h3 class="widget-title">
    <span>{{widget-title}}</span>
  </h3>
  <div id="new-ask-question" class="ask-question">
    {{switch_form}}
  </div>
  <script type='text/javascript'>
    $('.ask-question .required').each(function() {
      var text = $(this).text()
      if (text[0]!='*'){
        $(this).text('*' + text);
      }
    });
    $(function(){
      var fv = new FormValidator($("#new_ask_question"));
      fv.validate_functions.check_email = function(value){
        reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9])+$/;
        if (reg.test(value)) {
          return true;
        }else{
          return false;
        }
      }
    })
    $(document).ready(function(){
      function scrollIntoView(selector, offset = 0) {
        window.scroll(0, document.querySelector(selector).offsetTop - offset);
      }
      var email_regex = "{{email_regex}}";
      if(email_regex.length != 0){
        email_regex = new RegExp(email_regex);
        var submit_flag = false;
        $(".ask-question-form").each(function(i, form){
          var $form = $(form);
          var email_field = $form.find('#ask_question_mail');
          if($form.length != 0 && email_field.length != 0){
            $form.submit(function(){
              if(!submit_flag){
                submit_flag = true;
                if(email_regex.test(email_field.val())){
                  submit_flag = false;
                }else{
                  email_field.css("border", "2px solid red");
                  scrollIntoView('#ask_question_mail');
                  alert("<%=t('ask.please_check_email_format')%>");
                  email_field.one("input",function(){
                    email_field.css("border", "");
                  })
                  submit_flag = false;
                  return false;
                }
              }
            })
          }
        })
      }
    })
  </script>
</div>