0

Имеется модальное окно, к нему приделана форма, хотелось бы понять, почему не получается прикрутить js проверку полей в модальном окне, они не проходят, пробовал привязывать прям к странице, прописывать асетсах, но js никак не реагирует.

вьюха модального окна

=javascript_include_tag 'autocomplete-rails.js'
#newModal.modal.fade{"aria-hidden" => "true", "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1"}
  .modal-dialog{:role => "document"}
    = simple_form_for Feedback.new,url: feedb_main_index_path, method: 'post' do |f|
      .modal-content
        .modal-header
          %button.close{"aria-label" => "Закрыть", "data-dismiss" => "modal", :type => "button"}
            %span{"aria-hidden" => "true"} ×
          %h4#myModalLabel.modal-title Форма обратной связи

        .modal-body
          .well
            = label :theme_id,'Тема:'
            =f.select :theme_id, options_from_collection_for_select(Theme.order(:id), :id, :name), {include_blank: 'Выберите тему'}, class: 'form-control'
            = label :fio,'ФИО:'
            =f.text_field :fio, placeholder: 'Заполните поле ФИО', class: 'form-control'
            = label :tel,'Телефон:'
            =f.text_field :tel, placeholder: 'Заполните поле телефона', class: 'form-control'
            = label :email,'Email:'
            =f.text_field :email, placeholder: 'Заполните поле электронной почты', class: 'form-control'
            = label :org_id,'Организация:'
            .text-success Введите маленькими буквами свою организацию для поиска её в базе
            =f.autocomplete_field :org_text, autocomplete_organization_name_main_index_path, class: 'form-control', placeholder: 'Заполните поле организации'

            %br
              .g-recaptcha{"data-sitekey" => ""}
        .modal-footer
          = f.submit 'Отправить', class: 'btn btn-primary btn-lg btn-block', id: 'btn_check'

вызов модального окна

  .feedback_foot
    .feedback_footer.text-center{"data-target" => "#newModal", "data-toggle" => "modal"}

js

$(function() {
    $(document).ready(function(){
        if ($('#feedback_tel').val() != '') {
            var pattern_tel = /^[0-9-+()]{6,16}$/;
            if (pattern_tel.test($('#feedback_tel').val())) {
                $('#feedback_tel').css({'border': '1px solid #569b44'});
            } else {
                $('#feedback_tel').css({'border': '1px solid #ff0000'});
                alert('Поле телефона должно содержать минимум 6 цифр');
                return false;
            }
        }else {
            return true;
        }

    });
});

или

$(function() {
    $('#btn_check').click(function () {
        if ($('#feedback_theme_id').val() != 0 || $('#feedback').val() != '' || $('#feedback_email').val() != '' || $('#feedback_tel').val() != '') {
            return false;
        }
        else {
            alert('Заполнено верно нажмите Ок');
            return true;
        }

    });
});

1 ответ 1

0

Сделал вроде сам, все работает, но при обработке запрос уходит, сохраняется в базу, мейлер тоже работает, но в аякс отвечает, что сообщение не доставлено. То есть error. с jquery сам потихоньку учусь. Почему проходит ошибка? и как её можно исправить и возможно, как сократить запись

$(function() {
        $('#new_feedback').submit(function (event) {
        // отменим стандартное действие браузера
          event.preventDefault();
          var form = $('#new_feedback').serialize();
          if ($('#feedback_theme_id').val() != 0 || $('#feedback_email').val() != '' || $('#feedback_tel').val() != '' || $('#feedback_org_text').val() != '' || $('#feedback_fio').val() != '' && $('#feedback_message').val() != '') {
            var pattern_phone = /^[0-9-()+]{6,16}$/;
            var pattern_email = /^[a-z0-9_-]+@[a-z0-9-\.]+\.([a-z]{2,3})?([a-z]{2,3})$/i;
            if(pattern_phone.test($('#feedback_tel').val())){
              $('#feedback_tel').css({'border' : '1px solid #569b44'});
              if(pattern_email.test($('#feedback_email').val())){
                $('#feedback_email').css({'border' : '1px solid #569b44'});
                if ($('#feedback_theme_id').val() != 0){
                  $('#feedback_theme_id').css({'border' : '1px solid #569b44'});
                  if ($('#feedback_fio').val() != ''){
                    $('#feedback_fio').css({'border' : '1px solid #569b44'});
                    if ($('#feedback_org_text').val() != ''){
                      $('#feedback_org_text').css({'border' : '1px solid #569b44'});
                      if ($('#feedback_message').val() != ''){
                        $('#feedback_message').css({'border' : '1px solid #569b44'});
                        $.ajax({
                          type: "POST",
                          url: "/feedback",
                          data: form,
                          success: function (data) {
                            alert('Спасибо за обращение');
                            $("#newModal").modal('hide');
                            console.log('gotov');
                          },
                          error: function (data) {
                            alert('Форма не отправлена');
                            console.log('ne gotov');
                          }
                        });    
                      }
                      else{
                        $('#feedback_message').css({'border' : '1px solid #ff0000'});
                        alert('Поле сообщения не заполнено');
                      }
                    }
                    else{
                      $('#feedback_org_text').css({'border' : '1px solid #ff0000'});
                      alert('Поле организации не заполнено');
                    }
                  }
                  else{
                    $('#feedback_fio').css({'border' : '1px solid #ff0000'});
                    alert('Поле ФИО не заполнено');
                    return false;
                  }
                }
                else {
                  $('#feedback_theme_id').css({'border' : '1px solid #ff0000'});
                  alert('Поле темы не заполнено');
                  return false;
                }
              }
              else {
                $('#feedback_email').css({'border' : '1px solid #ff0000'});
                alert('Поле email заполнено некорректно');
                return false;
              }
            } else {
              $('#feedback_tel').css({'border': '1px solid #ff0000'});
              alert('Поле контактного телефона должно содержать минимум 6 цифр');
              return false;
            }
          }
          else {
            alert('Заполните все поля');
            return false;

          }

        });
      });

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.