通过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函数。如果输入元素上的自定义错误已设置，则无法提交表单。如果用户输入另一个标记，则在离开输入元素时再次完成请求。如果令牌有效，则自定义错误消息将被删除，并且可以提交表单。