Минимальный, полный и проверяемый пример

у отправить HTML-форму через AJAX и проверить ее с помощью плагина jQuery validate. Похоже, что если я не введу какие-либо значения в свои входные данные и нажму "Отправить", проверка jQuery запускается только на последнем входном файле, который является файлом типа ввода (этот вход не определен в разделе правил jQuery). Когда я нажимаю назад, чтобы просмотреть мои предыдущие скрытые элементы, проверка не отображается. Также, если мне нужно выбрать домашнее животное и загрузить изображение, то я нажимаю кнопку отправки, форма позволяет мне успешно отправить без ввода значений в другие поля ввода.

$(document).ready(function() {

  $("#ad_section2").click(function() {
    $("#ad_form_section1").hide();
    $("#ad_form_section2").show();
  });

  $("#back_section1").click(function() {
    $("#ad_form_section1").show();
    $("#ad_form_section2").hide();
  });

  $("#ad_section3").click(function() {
    $("#ad_form_section3").show();
    $("#ad_form_section2").hide();
  });

  $("#back_section2").click(function() {
    $("#ad_form_section2").show();
    $("#ad_form_section3").hide();
  });

  $("#ad_form").validate({
    rules: {
      ad_title: {
        required: true
      },
      description: {
        required: true
      },
      location: {
        required: true
      }
    },
    messages: {
      ad_title: {
        required: "please enter an ad title"
      },
      description: {
        required: "please enter a description"
      },
      location: {
        required: "please enter a location"
      }
    },
    submitHandler: function(form) {
      var petID = $("#pet_ad option:selected").val();
      var addAdUrl = "../../controller/post_ad_process.php?petID=" + petID;

      $(form).ajaxSubmit({
        url: addAdUrl,
        type: "post",
        datatype: 'json',
        success: function(result) {
          if (result.petAd == false) {
            alert("Pet ad already exists!");
          } else {
            alert("Ad posted!");
            $('#image_table').hide();
          }
        },
        error: function(error) {
          alert("Error");
        }
      });
    }
  });
})
#ad_form_section2,
#ad_form_section3 {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

<form id="ad_form" method="post">
  <div id="ad_form_section1">
    <div class="form-group">
      <label for="ad_title">Ad Title</label>
      <input type="text" class="form-control stored" id="ad_title" placeholder="e.g. German Sheperd puppy - 4 months old" name="ad_title" required>
    </div>

    <div class="form-group">
      <label for="description">Describe what you're offering</label>
      <textarea class="form-control stored" id="description" rows="6" placeholder="e.g. Owner supervised visits, minimum 1hr bookings, play with my german sheperd puppy in my backyard" name="description" required></textarea>
    </div>

    <button type="button" id="ad_section2" class="btn btn-primary"> Next </button>

  </div>

  <div id="ad_form_section2">

    <div class="form-group">
      <label for="location"> Location</label>
      <input type="text" id="location_ad" class="form-control stored" placeholder="location" name="location" required/>
    </div>

    <div class="form-group">
      <label for="booking_type">What type of booking is allowed for your pet?</label>
      <select name="booking_type" id="booking_type_ad" class="form-control select" required>
        <option>Owner Supervised</option>
        <option>Private</option>
        <option>Owner Supervised OR Private</option>
      </select>
    </div>

    <div class="form-group">
      <label for="price">Price</label>
      <input type="text" id="price" class="form-control stored" name="price" placeholder="$0.00" required/>
    </div>

    <div class="form-group">
      <div class="form-check">
        <label class="form-check-label" for="optionsRadios">
                      <input type="radio" class="form-check-input stored" name="optionsRadios" id="optionsRadios1" value="Hourly" checked required>
                      Hourly
                    </label>
      </div>
      <div class="form-check">
        <label class="form-check-label" for="optionsRadios">
                      <input type="radio" class="form-check-input stored" name="optionsRadios" id="optionsRadios2" value="Per Person" required>
                      Per Person
                    </label>
      </div>
    </div>

    <button type="button" id="back_section1" class="btn btn-primary"> Back </button>

    <button type="button" id="ad_section3" class="btn btn-primary"> Next </button>
  </div>

  <div id="ad_form_section3">

    <div>
      <label> Select pet pictures</label>
      <input type="file" name="multiple_files[]" id="multiple_files" multiple required/>

      <span id="error_multiple_files"></span>
    </div>
    <br />
    <div id="image_table">

    </div>


    <button type="button" id="back_section2" class="btn btn-primary"> Back </button>

    <input type="hidden" name="action_type" value="add" />

    <input type="submit" id="ad_button" class="btn btn-primary" value="Post ad" />

  </div>

</form>

Ответы на вопрос(0)

Ваш ответ на вопрос