JSONレスポンスでシンプルなHTMLフォームを確認する

Question

UXデザイナーとJS dummie/"HTMLコーダー"のメンバーがいます。

フォームが送信される前に、JSON回答者を返す2番目のリクエストによって簡単なHTMLフォームを検証するヒントが必要です。

私は、ユーザーがクーポンコードを入力することができランディングページには本当に簡単な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）にリダイレクトせずにクーポンコードを検証したいとします。 システムはこれのための2番目のURLをすでに提供しています。クーポンコードは、右イマイチ場合

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

：ようなURL：

/checkout/validate.html?tokenCode=12345678 

は、これはのような状況でJSONのanswereを返します。 有効な場合は、

{"error":"null"} 

が返されます。

私が探しているのは、検証URL（validation.html）を最初に「送信」ボタンをクリックしてJSONを解析し、「エラー」が何か他のものであればフォームを送信しないようにする簡単な解決策です"null"よりJSONメッセージ（ "間違ったクーポンコード"）をフォーム入力のすぐ上に表示します。

"error" = "null"の場合、フォームの動作は変更しないでください。パラメータとしてtokenCodeが付加されたhttps://www.xyz/cart.htmlのURLが開きます。以下のようなルックスで始まる/しようと何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); 
    } 
    }); 
}); 

そのほんの始まり、私が知っています。実際の解析部分が失われ、検証が失敗した場合はエラーメッセージが出力され、失敗した場合はリダイレクトが出力されます。

誰かが助けることができますか？ そして先進的な人たち！

小さなヒント：フォームは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に配置する方法を動作します。私も全くtokenCheckが空の場合、Ajaxリクエストをしていない助言する

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

。

Answer 3

Wouldn「tは、ユーザが入力フィールドを離れたとき、クーポンコードをチェックする方が簡単？最初にフォーム全体を送信しているときの例。

$('#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リクエストが実行されます。私はそれがより良いユーザーエクスペリエンスになると思います。

は、だからここのblurイベントリスナー：

<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リクエストを行っているブラーイベントリスナーを配置しました。応答がfalseの場合、setCustomValidityを使用してカスタムエラーが発生します。これは、ネイティブのHTML5制約検証API関数です。 input要素のカスタムエラーが設定されている場合は、フォームを送信できませんでした。ユーザーが別のトークンを入力すると、入力要素を離れると要求が再度実行されます。トークンが有効な場合、カスタムエラーメッセージは削除され、フォームを送信できます。