通過JSON驗證一個簡單的HTML表單

Question

我是一名用戶體驗設計師，以及其中一名JS dummie /「HTML編碼人員」。

我需要幫助或提示來驗證一個簡單的HTML表單通過第二個請求返回一個JSON答案，在表單被髮送之前。

我有一個的LandingPage一個非常簡單的HTML表單，用戶可以輸入優惠券代碼：如果用戶輸入自己的優惠券代碼

<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> 

，並點擊提交按鈕，代碼將被添加到操作URL（https://www.xyz/cart.html），用戶被重定向到cart.html頁面。如果優惠券代碼是正確的，一切都很好。如果沒有，他會在cart.html頁面上收到一條錯誤消息。

到目前爲止這麼好。

但我想驗證優惠券代碼，而不用將用戶重定向到新網站（cart.html）。 系統已經爲此提供了第二個URL。一個網址，如：

/checkout/validate.html?tokenCode=12345678 

這將返回一個JSON的answere與像一個狀態：

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

如果優惠券代碼心不是正確的。 如果它是有效的，如：

{"error":"null"} 

返回。

我在尋找的是一個簡單的解決方案，首先在「提交」按鈕上單擊調用驗證URL（validation.html），解析返回的JSON，防止表單發送，如果「錯誤」是別的比「null」更高，並在表單輸入上方打印JSON消息（「錯誤的優惠券代碼」）。

如果「error」=「null」，表單行爲不應該改變。它應該打開附帶tokenCode作爲參數的https://www.xyz/cart.html URL。

什麼我'試圖/開始看起來像：

$('#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你可以通過一個數據參數發送，它會工作，如何將它放在網址：

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

我也建議不做一個Ajax請求在所有如果tokenCheck是空的。

Answer 3

不會告發「噸是更容易在用戶離開輸入字段來檢查優惠券代碼？首先提交整個表單時的示例。

$('#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請求驗證輸入值。如果請求沒有返回任何錯誤作爲響應，我們只需從表單中解除綁定提交事件偵聽器並再次提交表單。

在我看來，在輸入字段上使用模糊事件偵聽器會更好。結合使用，您可以使用HTML5約束驗證API。所以你不需要提交表單，並且模糊輸入字段就可以完成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發出自定義錯誤。它是一個本地HTML5約束驗證API函數。如果輸入元素上的自定義錯誤已設置，則無法提交表單。如果用戶輸入另一個標記，則在離開輸入元素時再次完成請求。如果令牌有效，則自定義錯誤消息將被刪除，並且可以提交表單。