XHRを使用したJavaScriptによるフォーム検証

Question

私はJavaScriptをかなり使い慣れています。私はチュートリアルをオンラインで使っていますが、phpで有効性を確認してJavaScriptを使って警告を出します。私はJavaScriptをいくつかのバリデーションを完了させたいと思っています。それから、PHPで検証します。ここで

は、私は警告メッセージのためのdivを作成したフォームのコード

<form id="booking" action=""> 
       <span class="red">*</span>First Name: 
       <input type="text" name="firstName" id="firstName"> 
       <br> 

       <span class="red">*</span>Last Name: 
       <input type="text" name="lastName" id="lastName"> 
       <br> 

       <span class="red">*</span>Contact Number: 
       <input type="text" name="number" id="number"> 
       <br> 

       Unit Number(optional): 
       <input type="text" name="unit" id="unit"> 
       <br> 

       <span class="red">*</span>Street Number: 
       <input type="text" name="streetNumber" id="streetNumber"> 
       <br> 

       <span class="red">*</span>Street Name: 
       <input type="text" name="streetName" id="streetName"> 
       <br> 

       <span class="red">*</span>Suburb: 
       <input type="text" name="pickupSuburb" id="pickupSuburb"> 
       <br> 

       Destination Suburb<span class="red">*</span>: 
       <input type="text" name="destinationSuburb" id="destinationSuburb"> 
       <br> 
       Pick-Up Date and Time<span class="red">*</span>: 
       <input type="datetime-local" name="dateTime" id="dateTime"> 
       <br> 

       <br> 
       <input type="button" value="Submit" 
         onclick="getData('bookingprocess.php','message', firstName.value, lastName.value, number.value, unit.value, streetNumber.value, streetName.value, pickupSuburb.value, destinationSuburb.value, dateTime.value)"/> 
       <input type="reset" value="Reset"> 

      </form> 

<div id="message"> 
      </div> 

です。ここで

ではJavaScript

// file simpleajax.js 
var xhr = createRequest(); 
function getData(dataSource, divID, firstName, lastName, number, unit, streetNumber, streetName, pickupSuburb, destinationSuburb, dateTime) { 
    if(xhr) { 
     var place = document.getElementById(divID); 
     var requestbody = "firstName="+encodeURIComponent(firstName)+"&lastName="+encodeURIComponent(lastName)+"&number="+encodeURIComponent(number)+"&unit="+encodeURIComponent(unit)+"&streetNumber="+encodeURIComponent(streetNumber)+"&streetName="+encodeURIComponent(streetName)+"&pickupSuburb="+encodeURIComponent(pickupSuburb)+"&destinationSuburb="+encodeURIComponent(destinationSuburb)+"&dateTime="+encodeURIComponent(dateTime); 
     xhr.open("POST", dataSource, true); 
     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
     xhr.onreadystatechange = function() { 
      if (xhr.readyState == 4 && xhr.status == 200) { 
      place.innerHTML = xhr.responseText; 
      } // end if 
     } // end anonymous call-back function 
     xhr.send(requestbody); 
    } // end if 
} // end function getData() 

function checkForm(booking) { 

    var valid = true; 

    if(firstName.value.length <= 0) { 
     window.alert("Name is empty"); 
     booking.firstName.focus(); 
     return valid = false; 
    } 
} 

注意がより検証があるでしょうで、私の質問は、私は、フォームから、または直接のベストプラクティスであるXHRから検証を呼び出すことができる方法ですか？フォームからXHRへの呼び出しが悪い練習とみなされることがあると私は理解しているだけでなく、すべての値をハードコードしましたか？

これを動作させることはかなり厄介なものでしたので、少しホッジpodge場合、謝罪します。

Answer 1

ユーザーにヒントを追加できるので、フォームが塗りつぶされている間（カーソルがフィールドを離れるとき）に妥当性を確認することは理にかなっています。同様に、ユーザーが電子メールを入力した場合、それに@が含まれているかどうかをチェックします。そうでない場合は、電子メール入力に何か問題があることを通知する方がユーザーフレンドリーです（対照的に、フォームは大丈夫ですが、フォームに再度記入する必要があります。これは一種の不満です）。入力がフォーカスを失ったとき

は

<input type="text" onblur="alert('out!');" /> 

この火災を試してみてください。さて、あなたは、そのような処理の他の場所で定義された関数をどのように使用するのか疑問に思うかもしれません。つまり、このように、例えば、行うことができます。

JS：

window.myHandler = function(input,event) { ... }; 

HTML：HTMLでonblur属性eventが「事前に定義されていることを

<input type="text" onblur="window.myHandler(input,event);" /> 

注意を"イベントオブジェクト" instance "を含む変数ですが、IEの旧バージョンの場合は

を使用してください

window.myHandler = function(input,event) { 
    event = event || window.event; // elder IE store the Event object in window.event 
    // input is your DOM element. You can use input.value to get the value 
    // or this.classList to add some class which indicates (via CSS) that the input is wrong 
    ... 
};