topical media & game development

topical media & game development

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

basic-javascript-16-validate-form.htm / htm


  <html>
  <head>
      <title>Form Field Validation</title>
      <style type="text/css">
          .fieldname
          {
              text-align: right;
          }
          
          .submit
          {
              text-align: right;
          }
      </style>
      <script type="text/javascript" src="HttpRequest.js"></script>
      <script type="text/javascript">
          function checkUsername() 
          {
              var userValue = document.getElementById("username").value;
              
              if (userValue == "") 
              {
                  alert("Please enter a user name to check!");
                  return;
              }
              
              var url = "formvalidator.php?username=" + userValue;
              
              var request = new HttpRequest(url, checkUsername_callBack);
              request.send();
          }
          
          function checkUsername_callBack(sResponseText) 
          {
              var userValue = document.getElementById("username").value;
              
              if (sResponseText == "available") 
              {
                  alert("The username " + userValue + " is available!");
              } 
              else 
              {
                  alert("We're sorry, but " + userValue + " is not available.");
              }
          }
          
          function checkEmail() 
          {
              var emailValue = document.getElementById("email").value;
              
              if (emailValue == "") 
              {
                  alert("Please enter an email address to check!");
                  return;
              }
              
              var url = "formvalidator.php?email=" + emailValue;
              
              var request = new HttpRequest(url, checkEmail_callBack);
              request.send();
          }
          
          function checkEmail_callBack(sResponseText) 
          {
              var emailValue = document.getElementById("email").value;
              
              if (sResponseText == "available") 
              {
                  alert("The email " + emailValue + " is currently not in use!");
              } 
              else 
              {
                  alert("I'm sorry, but " + emailValue + " is in use by another user.");
              }
          }
      </script>
  </head>
  <body>
      <form>
          <table>
              <tr>
                  <td class="fieldname">
                      Username:
                  </td>
                  <td>
                      <input type="text" id="username" />
                  </td>
                  <td>
                      <a href="javascript: checkUsername()">Check Availability</a>
                  </td>
              </tr>
              <tr>
                  <td class="fieldname">
                      Email:
                  </td>
                  <td>
                      <input type="text" id="email" />
                  </td>
                  <td>
                      <a href="javascript: checkEmail()">Check Availability</a>
                  </td>
              </tr>
              <tr>
                  <td class="fieldname">
                      Password:
                  </td>
                  <td>
                      <input type="text" id="password" />
                  </td>
                  <td />
              </tr>
              <tr>
                  <td class="fieldname">
                      Verify Password:
                  </td>
                  <td>
                      <input type="text" id="password2" />
                  </td>
                  <td />
              </tr>
              <tr>
                  <td colspan="2" class="submit">
                      <input type="submit" value="Submit" />
                  </td>
                  <td />
              </tr>
          </table>
      </form>
  </body>
  </html>

[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.