0

У меня есть форма с текстовым полем и двумя кнопками (Перва - отправляет сообщение, вторая - очищает текущий список). Пример работы показан по ссылке на jsfeedle. Форма отправляется, если я нажимаю на кнопку "Отправить", или когда нажимаю Enter, если нахожусь на поле ввода.

Я хочу проверять значение поля на непустоту. Сейчас если я нажимаю на Enter, то поле валидируется, но если нажимаю на кнопку - то нет. Как мне добавить валидацию и при нажатии на кнопку "Отправить", и при нажатии на Enter?

Спасибо!

P.S. Приведу ниже часть кода, так как система не дает отправлять ссылку без сопровождения кодом.

<form action="" method="post" id="chatbot-form">
        <div class="input-group">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
          <input required type="text" class="form-control" placeholder="Введи сообщение" name="messageText" id="messageText" autocomplete="off">
          <div class="input-group-append" id="button-addon4">
            <button class="btn btn-primary" type="button" id="chatbot-form-btn">Отправить</button>
            <button class="btn btn-info" type="button" id="chatbot-form-btn-clear">Очистить</button>
          </div>
        </div>
      </form>
2
  • 1
    И совершенно правильно система не даёт, потому что примеры должны быть целиком в тексте вопроса без ссылок на сторонние ресурсы
    – andreymal
    29 мая 2019 в 9:37
  • самое легкое поменять type на submit и задать inputам аттрибут required. На js прописать form.onsubmit ваш аякс и вконце обработчика return false чтобы форма не отправлялась не по ajaxe 29 мая 2019 в 9:40

1 ответ 1

0

1) Меняем type="button" на type="submit"

2) Убираем обработчик клика (либо с нутри его вытри submit)

$(function() {

  $('#chatbot-form-btn-clear').click(function(e) {
    e.preventDefault();
    $('.mesgs').find('.msg_history').html('');
  });

  $('#chatbot-form').submit(function(e) {
    e.preventDefault();
    var message = $('#messageText').val();
    $(".msg_history").append('<div class="outgoing_msg"><div class="sent_msg question"><p>' + message + '</p></div></div>');
    var csrf_token = "{{ csrf_token() }}";
    $.ajaxSetup({
      headers: {
        'X-Csrf-Token': csrf_token
      }
    });
    $.ajax({
      type: "POST",
      url: "/ask",
      data: $(this).serialize(),
      success: function(response) {
        $('#messageText').val('');
        var answer = response.answer;
        const chatPanel = document.getElementById("chatPanel");
        $('.feedbackDiv').remove();
        $(".msg_history").append('<div class="incoming_msg">' +
          '<div class="incoming_msg_img"> <img src="static/chatbot_avatar.png"> </div>' +
          '<div class="received_msg">' +
          '<div class="received_withd_msg answer">' +
          '<p>' + answer + '</p>' +
          '</div>' +
          '</div>' +
          '</div>' +
          '<div class="feedbackDiv"> (Оценить ответ: ' +
          '<div class="btn-group btn-group-sm" role="group">' +
          '<button class="btn btn-secondary" type="button" id="bad-ans-btn" onclick="AnswerFunc(this.id)">' +
          '<i class="fa fa-thumbs-o-down fa-border" aria-hidden="true"></i>' +
          '</button>' +
          '<button class="btn btn-primary" type="button" id="good-ans-btn" onclick="AnswerFunc(this.id)">' +
          '<i class="fa fa-thumbs-o-up fa-border" aria-hidden="true"></i>' +
          '</button>' +
          '</div>' +
          ') </div>' +
          '</div>');
        $(".msg_history").stop().animate({
          scrollTop: $(".msg_history")[0].scrollHeight
        }, 1000);
      },
      error: function(error) {
        console.log(error);
      }
    });
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-10 offset-md-1">
  <div class="inbox_msg">

    <div class="mesgs">
      <div class="msg_history">

      </div>
      <form action="" method="post" id="chatbot-form">
        <div class="input-group">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
          <input required type="text" class="form-control" placeholder="Введи сообщение" name="messageText" id="messageText" autocomplete="off">
          <div class="input-group-append" id="button-addon4">
            <button class="btn btn-primary" type="submit" id="chatbot-form-btn">Отправить</button>
            <button class="btn btn-info" type="button" id="chatbot-form-btn-clear">Очистить</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

Ваш ответ

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

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