Как сделать проверку отправляемых данных формы при помощи ajax?

Question

[Владислав Васильев]

Здравствуйте! Есть код:

grecaptcha.render('recaptcha', {
         sitekey: '6LczEggUAAAAAIJO_3615WTVdqAm7QTjVy6b32D-',
         callback: function(response) {
                       $('#resp').attr('value', response);  //в скрытый input передаю ответ recaptcha
            }
 });

Данный код находится в ajax и генерирует капчу. Ответ, который я получил от recaptcha, я передаю в скрытый input формы, для дальнейшей отправки на сервер. После того, как получил его на сервере, я отдаю на скачивание файл. Если результат успешный, файл скачивается на текущий странице(т.е без перехода на новую) - это хорошо, это мне и надо. Но если, допустим, не была введена капча или отправлена повторно, php-скрипт, как ему и полагается, выдает ошибку. Проблем в том, что делает он это на новой странице, а мне нужно, чтобы на текущей. Оно и понятно, почему так происходит, я же отправляю в "action" формы страницу. От этого у меня возникает вопрос: как мне сделать так, чтобы когда я нажал на "submit" формы, произошел запрос к серверу и в случае верной капчи отдал на скачивание файл, а при ошибке вывел ошибку, но текущей странице, без обновления. Как мне запретить нажимать submit, если не введена капча, если капча была уже введена и кто-то нажимает снова на submit. На php всё реализовано, а вот как сделать всё при помощи ajax - я не понимаю.
Т.е, по сути, как я понял, мне нужно, чтобы когда я нажал на submit, отправлялся ajax-запрос с полученным ответом капчи php-скрипту.

Я напишу тут полный код, который отправляет ajax-запрос к серверу, получает данные с него в виде json-массива и выводит их в div. В этот div кладется - некоторые данные, форма, капча. Прошу, пожалуйста, не пугаться увиденным кодом, я в javascript первый день и никак не могу сориентироваться, после php и других ЯП.

function Download() {
  var hash = $('#Download').attr('data-hash'); //получаю id файла
  $.ajax({
    type: 'GET',
    url: '../Data/Icecast/GetTrackInfo.php',
    data:'track_hash=' + hash, //формирую запрос
    async: true,
    jsonpCallback: 'parse',
    contentType: "application/json",
    dataType: 'json', //получаю json
    success: function(json) {
      var track_name = json['track_name'], track_author = json['track_author'], track_bitrate = json['track_bitrate'], track_downloads = json['track_downloads'],  track_size = json['track_size'],  track_album = json['track_album'],  album_hash = json['album_hash'], track_playtime = json['track_playtime'], track_hash = json['track_hash']; //получаю данные
      $('#latest-tracks').html('<div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title" id="name">'+track_author+' - '+track_name+'</h3></div><div class="panel-body" style="padding-top: 25px;"><div class="row"><div class="col-md-6"><p><strong>Автор:</strong> <span id="author">'+track_author+'</span></p><p><strong>Альбом:</strong> <span id="album">'+track_album+'</span></p><p><strong>Качество:</strong> <span id="bitrate">'+track_bitrate+'</span> kbps</p></div><div class="col-md-6"><div style="width: 100% !important; padding-left: -5px !important;" id="recaptcha"></div></div></div></div><div class="panel-footer"><form action="../../Page/download_file.php?id='+track_hash+'" method="POST"><input id="resp" name="response" value="" style="display: none;"></input><button type="submit" id="download" data-down="" name="download" style="width: 100%;" class="btn btn-sm btn-info"><i style="color: #fff;" class="fa fa-download" aria-hidden="true"></i> Download</button></form></div></div>'); //Вывожу данные в div, отедльный код form, приведен ниже
      //Вызываю REcapatcha
      grecaptcha.render('recaptcha', {
        sitekey: 'мой sitekey',
        callback: function(response) {
          $('#resp').attr('value', response); //вывожу ответ в скрытый input формы, которая написана выше, чтобы отправить данные формой на сервер
          $('#download').attr('disabled', false); //по умолчанию submit выключен, чтобы не было нажатия без введеной капчи, тут я его наоборот включаю, так как капча введена
        }
      });
    },
    error: function(e) {
      console.log(e.message)
    }
  })
}

Код формы:

<form action="../../Page/download_file.php?id='+track_hash+'" method="POST">
  <input id="resp" name="response" value="" style="display: none;"></input>
  <button type="submit" id="download" data-down="" name="download" style="width: 100%;" class="btn btn-sm btn-info"><i style="color: #fff;" class="fa fa-download" aria-hidden="true"></i> Download</button>
</form>

Боюсь, я криво и непонятно описал то, что мне нужно, поэтому, пожалуйста, если что-то непонятно, спрашивайте. Спасибо!

Answer 1

[Vitaliy Orlov]

давай по-порядку

>> каптча
1) выводишь каптчу и поле для ввода каптчи
2) выводишь тригер проверки каптчи, чаще всего это какая-нибудь кнопка (например "Скачать трек")
3) в момент нажатия кнопки (или исполнения тригера), проверяешь каптчу. Тригером может быть что угодно, например event "blur", который срабатывает, когда теряется фокус с поля ввода каптчи..
4) если плохой результат показываешь ошибку
5) если все ок, значит делаешь действие

>> как мне сделать так, чтобы когда я нажал на "submit" формы, произошел запрос к серверу и в случае верной капчи отдал на скачивание файл а при ошибке вывел ошибку, но текущей странице, без обновления.

1) делаешь кнопку (можно без формы), пусть это будет "Скачать"

2) на кнопку вешаешь функцию:

$('#btn').click(function(){
....
// проверка каптчи
// показ ошибки или скачивание файла
....
});

3) при нажатии на кнопку проверяешь каптчу
4) если ошибка, показываешь сообщение, обновляешь каптчу и выходишь из функции:

$('#btn').click(function(){
....
if (!valid_captcha()) return false;
// показ ошибки или скачивание файла
....
});

function valid_captcha(){
var ret = false;
// проверка каптчи
return ret;
}

5) делаешь ajax запрос к скрипту на php, например к file.php , передаешь параметры какие-надо
скрипт возвращает тебе путь к файлу на который ты переходишь с помощью метода:

при отдаче файла, посылаешь заголовоки вида:
Content-Type application/octet-stream
чтобы форсировать вызов диалога "Сохранить как"
сделатьэто можно как на стороне php так и на стороне веб-сервера, если редирект будет напрямую на mp3 файл

>> Как мне запретить нажимать submit, если не введена капча, если капча была уже введена и кто-то нажимает снова на submit.

P.S. Если все таки решил делать в форме, то тогда в случае ошибок ты можешь остановить выполнение вернув false в submit event-е, т.е.:

<form action="http://google.com">
<input type="submit">
</form>

<script>
$('form').first().submit(function(){
    if (!confirm('Submit form?')) return false;
});
</script>