Подтвердите простую форму HTML через JSON answere

Question

Я создатель UX и один из этих парней Jummy/«HTML coder».

Мне нужна помощь или подсказка для проверки простой формы HTML через второй запрос, который возвращает ответ JSON, перед отправкой формы.

У меня есть очень простая форма HTML на LandingPage, где пользователь может ввести код купона:

<form id="tokensubmit" method="GET" action="https://www.xyz/cart.html"> 
     <div class="form-group"> 
      <input type="text" name="tokenCodeAdd" id="tokenCodeAdd" size="25" value="" class="form-control input-lg" placeholder="Please enter Coupon Code"> 
     </div> 
     <input id="input_id" type="submit" class="btn btn-lg btn-warning btn-block" value="Submit"> 
    </form> 

Если пользователь вводит свой купон и нажмите кнопку отправки, код будет добавлен к (https://www.xyz/cart.html), и Пользователь перенаправляется на эту страницу cart.html. Если код купона правильный, все в порядке. Если нет, он получает сообщение об ошибке на странице cart.html.

Пока все хорошо.

НО: Я хочу подтвердить код купона, не перенаправляя пользователя на новый сайт (cart.html). Система предлагает второй URL для этого уже. URL-адрес, как:

/checkout/validate.html?tokenCode=12345678 

Это возвращает JSON answere со статусом, как:

{"error":"Wrong Coupon Code."} 

если код купона разве право. Если это действительно так:

{"error":"null"} 

возвращается.

То, что я ищу, - это простое решение для вызова URL-адреса проверки (validation.html) сначала при нажатии кнопки «отправить», разбора возвращаемого JSON, предотвращения отправки формы, если «ошибка» - это что-то еще чем «null» и распечатать сообщение JSON («Неверный код купона») прямо над вводом формы.

Если «error» = «null», поведение форм не должно изменяться. Он должен просто открыть URL-адрес https://www.xyz/cart.html с привязкой tokenCode в качестве параметра.

Что I'am пытается/начиная с выглядит как:

$('#tokensubmit').submit(function(event){ 
    event.preventDefault(); 
    var tokenCheck = $(this).find('input[id="tokenCodeAdd"]').val(); 
    $.ajax({ 
    url: '/checkout/validate.html'+tokenCheck, 
    type: 'GET', 
    success: function(data){ 
     var jsonData = $.parseJSON(data); 
    } 
    }); 
}); 

Сво только начало, я знаю. Отсутствует реальная часть синтаксического анализа, и сообщение об ошибке выводится, если проверка не выполняется, или перенаправление, если нет.

Кто может помочь? И thx в продвинутом!

Небольшой совет: форма размещена на целевой площадке WordPress, поэтому PHP и JQuery являются опцией.

Answer 1

код у вас есть для получения проверки является почти правильно:

$('#tokensubmit').submit(function(event){ 
    event.preventDefault(); 
    var tokenCheck = $(this).find('input[id="tokenCodeAdd"]').val(); 
    $.ajax({ 
    // either attach the parameter like you are trying to do directly to the url, 
    // but in this way: 
    url: '/checkout/validate.html?tokenCode='+tokenCheck, 
    // or give the URL parameter(s) as data object to jQuery: 
    data: { 
     tokenCode: tokenCheck 
    } 
    type: 'GET', 
    // if you specify the dataType you want to receive as json, 
    // jQuery will parse it for you already 
    dataType: 'json', 
    success: function(data){ 
     // now you can check the data for error or not, for example like: 
     if(data.error == null){ 
      // do something (most likely REALLY submit the form now?)    
     }else{ 
      alert('tokenCode invalid'); 
     } 
    } 
    }); 
}); 

Answer 2

С JQuery вы можете отправить через параметр данных и он будет работать, как поместить его в URL:

$.ajax({ 
    url: '/checkout/validate.html', 
    type: 'GET', 
    data: {"tokenCode": tokenCheck} 
    success: function(data){ 
     var jsonData = $.parseJSON(data); 
    } 
}); 

Я также хотел бы посоветовать не делать запрос Ajax на всех, если tokenCheck пуст.

Answer 3

Wouldn «т это будет легче проверить код купона, когда пользователь покидает поле ввода? Сначала пример при отправке всей формы.

$('#tokensubmit').on('submit', function(event) { 
    event.preventDefault(); 

    var validationSuccess = false; 

    $.ajax({ 
     url : '/checkout/validate.html', 
     type : 'GET', 
     data : { tokenCode : $('#tokeninput').val() } 
     success : function(response) { 
      var data = $.parseJSON(response); 
      if (data.error === null) { 
       validationSuccess = true; 
      } 
     } 

     if (validationSuccess === true) { 
      $('#tokensubmit').off('submit').submit(); 
     } 
    }); 

Итак, что мы здесь сделали? Слушатель отправки сообщения - это почти то же самое, что вы сделали. Мы предотвращаем отправку формы по умолчанию и делаем запрос ajax для проверки входного значения. Если запрос не возвращает ошибки в качестве ответа, мы просто отвязываем прослушиватель событий отправки из формы и снова отправляем форму.

На мой взгляд, было бы лучше работать с прослушивателем событий размытия в поле ввода. В комбинации вы можете использовать API проверки ограничений HTML5. Поэтому вам не нужно отправлять форму, и запрос ajax будет сделан при размывании поля ввода. Я думаю, что это будет лучший пользовательский интерфейс.

Так вот то, что слушатель размытость событие:

<input type="text" name="the-input-field" id="the-input-field" value="" required> 

$('#the-input-field').on('blur', function(event) { 
    var element = this; 
    $.ajax({ 
     url : '/checkout/validate.html', 
     type : 'GET', 
     data : { tokenCode : element.val() } 
     success : function(response) { 
      var data = $.parseJSON(response); 
      if (data.error !== null) { 
       element.setCustomValidity('Your input is invalid!'); 
       // place some error message elsewhere in the markup 
      } else { 
       element.setCustomValidity(''); 
      } 
     } 
    }); 
}); 

Сначала мы поставили необходимый атрибут во входном элементе. Он помечает входной элемент по мере необходимости. Поэтому, если он пуст, вы не можете отправить форму. Затем мы разместили прослушиватель событий размытия, который выполняет запрос ajax. Если ответ неверный, мы поместим пользовательскую ошибку с помощью setCustomValidity. Это встроенная функция API проверки ограничений HTML5. Если пользовательская ошибка на элементе ввода установлена, вы не можете отправить форму. Если пользователь вводит другой токен, запрос выполняется снова при выходе из входного элемента. Если токен действителен, пользовательское сообщение об ошибке будет удалено, и форма может быть отправлена.