Валидация полей формы ajax

100
14 января 2021, 15:10

У меня есть форма с текстовым полем и двумя кнопками (Перва - отправляет сообщение, вторая - очищает текущий список). Пример работы показан по ссылке на 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>
Answer 1

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>

READ ALSO
Блок выходит за границы родителя

Блок выходит за границы родителя

Делаю сайт с 100% по высоте страницамиЕсть 2 вопроса

90
Алгоритм не начинается сначала

Алгоритм не начинается сначала

Имеется вот такой код

100
subline text 3 разделения вкладок

subline text 3 разделения вкладок

Подскажите пожалуйста, как сделать так, чтоб в ST3 на одном экране отображались сразу 2 окна, чтоб не постоянно не переключаться между ними

96
Как добавить массив в Dictionary C#

Как добавить массив в Dictionary C#

Есть Dictionary такого типа:

125