0

Не работает required когда отправляю ajax, когда стоит метод click страничка отправляется всё гуд но не работает required, а если метод submit то работает required но перезагружается страничка и не отправляются данные

Ниже пример кода Html,Ajax

<script>
   jQuery(document).ready(function(){
       jQuery('#ajaxSubmit').click(function(e){
           e.preventDefault();
           $.ajaxSetup({
               headers: {
                   'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
               }
           });
           jQuery.ajax({
               url: "{{ route('addbank') }}",
               method: 'post',
               data: {
                   name: jQuery('#name').val(),
                   city: jQuery('#city').val(),
                   phone: jQuery('#phone').val(),
                   bank: jQuery('#bank').val()
               },
               success: function(result){
                   jQuery('.alert').show();
                   jQuery('.alert').html(result.success);

               }},$( '#myForm' ).each(function(){
               this.reset();
           }));
       });
   });

 <div class="col-lg-8">
           <!-- Contact Form -->
           <div class="contact-form parsley-validate-wrap mt-60" data-animate="fadeInUp" data-delay=".4">
               <div class="alert alert-success" style="display:none"></div>

               <form id="myForm" >
                   @csrf
                   <div class="row">
                       <div class="col-md-6">
                           <div class="form-field">
                               <input type="text" id="name" class="theme-input-style" placeholder="Ваше имя" required>
                           </div>
                       </div>
                       <div class="col-md-6">
                           <div class="form-field">
                               <input type="text" id="city" class="theme-input-style" placeholder="Ваш Город" required>
                           </div>
                       </div>
                       <div class="col-md-6">
                           <div class="form-field">
                               <input type="text" id="phone" class="theme-input-style" placeholder="Ваш телефон" data-parsley-pattern="^[\d\+\-\.\(\)\/\s]*$" required>
                           </div>
                       </div>
                       <div class="col-md-6">
                           <div class="form-field">
                               <input type="number" id="bank" class="theme-input-style" placeholder="Сумма займа" data-parsley-pattern="^[\d\+\-\.\(\)\/\s]*$" required>
                           </div>
                       </div>

                   </div>

                   <button type="submit"  id="ajaxSubmit" class="btn">Отправить</button>
               </form>
           </div>
           <!-- End of Contact Form -->
       </div>
   </div>

3
  • аттрибут required не работает при отправке через javascript. Вы же просто получаете значения элементов формы. О других аттрибутах ваш скрипт не подозревает. 3 апр 2019 в 17:58
  • А как мне сделать чтобы сработал атрибут required именно html required ? 3 апр 2019 в 18:01
  • Если повесите событие не на нажатие кнопки, а на отправку формы (on submit), то отработает проверка заполненности полей средствами html.
    – n.osennij
    4 апр 2019 в 7:20

1 ответ 1

1

Перед отправкой можно перебрать все поля формы с атрибутом required и проверить их заполненность

jQuery(document).ready(function() {
  jQuery('#ajaxSubmit').click(function(e) {
    e.preventDefault();

    var hasEmpty = false;
    // Перебираем все поля формы
    $('form#myForm').find('input').each(function() {
      if ($(this).prop('required')) {
        // если поле обязательное, но пустое, то hasEmpty становится true
        hasEmpty = hasEmpty || !$(this).val();
      }
    });

    if (hasEmpty) {
      jQuery('.alert').show();
      jQuery('.alert').html('Не заполнены обязательные поля');
    } else {
      // Здесь делаем отправку
      jQuery('.alert').show();
      jQuery('.alert').html('Все заполнено');
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-8">
  <!-- Contact Form -->
  <div class="contact-form parsley-validate-wrap mt-60" data-animate="fadeInUp" data-delay=".4">
    <div class="alert alert-success" style="display:none"></div>

    <form id="myForm">
      @csrf
      <div class="row">
        <div class="col-md-6">
          <div class="form-field">
            <input type="text" id="name" class="theme-input-style" placeholder="Ваше имя" required>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-field">
            <input type="text" id="city" class="theme-input-style" placeholder="Ваш Город" required>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-field">
            <input type="text" id="phone" class="theme-input-style" placeholder="Ваш телефон" data-parsley-pattern="^[\d\+\-\.\(\)\/\s]*$" required>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-field">
            <input type="number" id="bank" class="theme-input-style" placeholder="Сумма займа" data-parsley-pattern="^[\d\+\-\.\(\)\/\s]*$" required>
          </div>
        </div>

      </div>

      <button type="submit" id="ajaxSubmit" class="btn">Отправить</button>
    </form>
  </div>
  <!-- End of Contact Form -->
</div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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