ask/app/views/asks/index.html.erb

<% data = action_data
	@ask_question = data["ask_question"]
	@categories = data["categories"]
  @tags = data["tags"]
	@module_app = data["module_app"]
  @switch_form = data["switch_form"]
  ask_setting = data["ask_setting"]
  set_input_name_for_ask('ask_question')
  @default_ask_setting = data['default_ask_setting']
  email_regex = data['email_regex']
%>
<% if data['layout_type'] != 'index' %>
  <%= render template: "asks/#{data['layout_type']}",:locals => { :data => data, :ask_setting => ask_setting } %>
<% else %>
<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;
    align-items: center;
  }
  .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;
    overflow: hidden;
    position: relative;
    min-width: 10em;
    max-width: 25em;
    padding-left: 0;
    padding: 0.5em;
  }
  .ask-question .single-col.form-horizontal .control-group{
    width: 100%;
  }
  .ask-question .single-col.form-horizontal .control-group .controls{
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .ask-question .ask-question-form.multi-col.form-horizontal div[data-list="fields"]{
    float: left;
  }
  .ask-question .ask-question-form.multi-col.form-horizontal .form-actions{
    float: left;
    width: 100%;
  }
  .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>
<%# javascript_include_tag "/assets/lib/jquery-ui-1.12.1/jquery-ui.min" %>
<%# stylesheet_link_tag "/assets/lib/jquery-ui-1.12.1/jquery-ui.min" %>
<%= stylesheet_link_tag "custom_field" %>
<%# stylesheet_link_tag "jquery-ui-timepicker-addon" %>
<script type="text/javascript">
  /*
  $(document).ready(function(){
    $('select[name="ask_question[category_id]"]').change(function(){
      var category_id = $(this).val()
      $(this).parents('.ask-question').eq(0).find('select[name="ask_question[category_id]"]').val(category_id)
      var id
      if ($('form#'+category_id).length != 0){
        id = category_id
      }
      else{
        id = 'ask-default-form'
      }
      if (id != $(this).parents('form').eq(0).attr('id')){
        $(this).parents('.ask-question').eq(0).find('form').hide()
        $(this).parents('.ask-question').eq(0).find('form#'+id).show()
      }
    })
  })*/
      
  
  var datepicker_fn = $.fn.datepicker
  var datepicker = $.datepicker
  $(document).ready(function(){
    $('input:file').change(function(e){
      var fileName = e.target.files[0].name;
      $(this).parents(".file-selector").eq(0).find('.filename').html(fileName);
    })
  })
</script>
<%# javascript_include_tag "lib/bootstrap-datetimepicker" %>
<%# javascript_include_tag "jquery.ui.datepicker.monthyearpicker" %>
<%= javascript_include_tag 'validator' %>
<link href="/assets/ask/ask.css" media="screen" rel="stylesheet">
<div id="new-ask-question" class="ask-question">
  <%= @switch_form.html_safe %>
</div>

<script type='text/javascript'>
  // $(function(){
  //   $("#button-mail").click(function(){
  //     if( $("#ask_question_name").val()!='' ) $("#ask_question_name").css('border','');
  //     if( $("#ask_question_email").val()!='' ) $("#ask_question_email").css('border','');
  //     if( $("#ask_question_title").val()!='' ) $("#ask_question_title").css('border','');
  //     if( $("#ask_question_content").val()!='' ) $("#ask_question_content").css('border','');

  //     if( $("#ask_question_name").val()=='' ) $("#ask_question_name").css('border','1px solid #F00');
  //     if( $("#ask_question_email").val()=='' ) $("#ask_question_email").css('border','1px solid #F00');
  //     if( $("#ask_question_title").val()=='' ) $("#ask_question_title").css('border','1px solid #F00');
  //     if( $("#ask_question_content").val()=='' ) $("#ask_question_content").css('border','1px solid #F00');
  //   });

    $('.ask-question .required').each(function() {
      var text = $(this).text()
      if (text[0]!='*'){
        $(this).text('*' + text);
      }
    });

  //   $('#new-ask-question form') .submit(function() {
  //     $.post($(this).attr('action'), $(this).serializeArray());
  //     return false;
  //   });
  // });
$(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;
      }
  }

  // fv.validate_functions.test_function = function(value, element){

  // }
})
$(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>
<% end %>