Question

我是一名用户体验设计师，也是这些JS dummie /“HTML编码人员”之一。

在发送表单之前，我需要帮助或提示通过第二个请求验证简单的HTML表单，该请求返回JSON应答。

我在目标网页上有一个非常简单的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>

如果用户输入优惠券代码并点击提交按钮，代码将添加到操作网址（https://www.xyz/cart.html），用户将被重定向到此cart.html页面。如果优惠券代码是正确的，一切都很好。如果没有，他会在cart.html页面上收到错误消息。

到目前为止一切顺利。

但是：我想验证优惠券代码，而无需将用户重定向到新网站（cart.html）。系统已经为此提供了第二个URL。一个网址：

/checkout/validate.html?tokenCode=12345678

这将返回一个状态为：

的JSON回复

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

如果优惠券代码不正确。如果它是有效的，例如：

{"error":"null"}

回报。

我正在搜索的是一个简单的解决方案，首先单击“提交”按钮调用验证URL（validation.html），解析返回的JSON，如果“错误”不是别的，则阻止表单发送“null”并在表单输入正上方打印JSON消息（“Wrong Coupon Code。”）。

如果“error”=“null”，则表单行为不应更改。它只需打开https://www.xyz/cart.html URL并附加tokenCode作为参数。

我尝试/开始的内容如下：

$('#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);
    }
  });
});

我知道，这只是一个开始。缺少真正的解析部分，如果验证失败则输出错误消息，如果没有则重定向。

任何可以提供帮助的人？而且先进了！

小提示：表单放在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);
    }
});

如果tokenCheck为空，我还建议不要执行Ajax请求。

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('');
            }
        }
    });
});

首先，我们将所需的Attribute放在input元素中。它根据需要标记输入元素。所以，如果它是空的，你就无法提交表格。然后我们放置了模糊事件监听器，它正在执行ajax请求。如果响应为false，我们会通过setCustomValidity发出自定义错误。它是本机HTML5约束验证API函数。如果设置了input元素的自定义错误，则无法提交表单。如果用户输入另一个令牌，则在离开输入元素时再次完成请求。如果令牌有效，则将删除自定义错误消息并提交表单。

通过JSON answere验证简单的HTML表单

3 个答案: