MyCity » Web programiranje » PHP, JS i AJAX forma?

PHP, JS i AJAX forma?

Napisano na dan: 10.3.2011

PHP, JS i AJAX forma?
Sledeća strana Pagination

Idi na vrh

Poslao: 10 Mar 2011 16:25
Idi na vrh
offline
  • Pridružio: 06 Jan 2011
  • Poruke: 4

Napravio sam malu test formu za pocetak (samo 2 polja i 1 dugme) cisto da probam da ukapiram kako radi...medutim naisao sam na problem sledece prirode:
Forma funkcionise pristojno u smislu - kada kliknem na polja a ne unesem nista, ona se lepo oboje u crveno, ili kada unesem ispravne podatke u polja, ona se oboje u zeleno...problem je u tome sto kada kliknem na "submit" (bez ikakve interakcije sa poljima-kliktanja na njih, unosa ili sl.), prodje validacija korektno, a to zelim da izbegnem! Dakle, voleo bih da ako korisnik ostavi prazna polja i lupi "submit", da se odradi validacija na svim poljima i da se ona neispravna ofarbaju u crveno...Nadam se da neko moze da pomogne...

Evo koda:

index.html

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
  2. <html>
  3. <head>
  4.  <title>Test Forma</title>
  5.  <script src="validate.js" type="text/javascript"></script>
  6.  <link rel="stylesheet" href="style.css" type="text/css" media="screen">
  7.  <link rel="SHORTCUT ICON" href="/favicon.ico">
  8. </head>
  9.  
  10. <body>
  11.  
  12. <form name="vform" id="vform" method="get" action="index.html">
  13.  
  14.  
  15.  <label for="username">Username: </label>
  16.  <input type="text" name="username" id="username" class="required,username" autocomplete="off">&nbsp;
  17.     <img width="16" height="16" name="username" src="img/blank.gif" alt="">
  18.    <span class="expl">only characters, like abcd</span>
  19.  <br />
  20.  
  21.  <label for="password">Password: </label>
  22.  <input type="text" name="password" id="password" class="required,password" autocomplete="off">&nbsp;
  23.     <img width="16" height="16" name="password" src="img/blank.gif" alt="">
  24.    <span class="expl">numbers and/or characters, like 123abc</span>
  25.  <br />
  26.  
  27.  <br />
  28.  
  29.  <input type="submit" name="submit" id="submit" value="Submit">
  30.  
  31. </form>
  32. </body>
  33. </html>
  34. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


validate.js

  1. // Load the getForm function while page is loading
  2. window.onload = getForm;
  3.  
  4. // Set this to your validation PHP script, default is "validate.php?value="
  5. var vUrl = "validate.php?value=";
  6.  
  7. // Set this to your form's id
  8. var formid = "vform";
  9.  
  10. // This is the array for error handling
  11. var vError =  [];
  12.  
  13.                
  14. // We attach to every input field a little js
  15. function getForm() {
  16.    
  17.    
  18.    // Important: Our form has to got the "vform" id
  19.    var form = document.getElementById(formid);
  20.  
  21.  
  22.    if (document.getElementsByTagName) {
  23.       var vInput = document.getElementsByTagName("input");
  24.       for (var vCount=0; vCount<vInput.length; vCount++)
  25.          vInput[vCount].onblur = function() { return validateIt(this); }
  26.          
  27.    }
  28.    
  29. }
  30.  
  31. // Refers to the function
  32. http = getHTTPObject();
  33.  
  34. function getHTTPObject() {
  35.  
  36.   var xmlhttp;
  37.  
  38.   /*@cc_on
  39.  
  40.   @if (@_jscript_version >= 5)
  41.     try {
  42.       xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  43.     }catch(e){
  44.       try{
  45.       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  46.     }catch(E){
  47.       xmlhttp = false;
  48.     }
  49.   }
  50.   @else
  51.     xmlhttp = false;
  52.   @end @*/
  53.  
  54.   if(!xmlhttp && typeof XMLHttpRequest != 'undefined'){
  55.     try {
  56.       xmlhttp = new XMLHttpRequest();
  57.     }catch(e){
  58.       xmlhttp = false;
  59.     }
  60.   }
  61.  
  62.   return xmlhttp;
  63.  
  64. }
  65.  
  66. // The main validation-function
  67. function validateIt(vInput) {
  68.    
  69.    // Each input field's id
  70.    vId = vInput.id;
  71.    vValue = vInput.value;
  72.  
  73.    // Separate the class attr of each input field
  74.    getValue = vInput.className;
  75.    if(getValue.indexOf(",") == -1 ) {
  76.       vType = getValue;
  77.       vRequired = "";
  78.    } else {
  79.       vRules = vInput.className.split(",");
  80.       vRequired = vRules[0];
  81.       vType = vRules[1];
  82.    }
  83.  
  84.    // The whole URL
  85.    var url = vUrl + (vValue) + "&required=" + (vRequired) + "&type=" + (vType);
  86.  
  87.    // And finally we send it to the url we specified
  88.    http.open("GET", url, true);
  89.  
  90.    // The handleHttpResponse is the function we call, when we have an
  91.    // answer back from the PHP script
  92.    http.onreadystatechange = handleHttpResponse;
  93.    http.send(null);
  94.  
  95. }
  96.  
  97. // A function to handle the response from the PHP script
  98. function handleHttpResponse() {
  99.    
  100.    if(http.readyState == 4) {
  101.    
  102.       // Refering to the PHP script, for every validation we'll get
  103.       // either true or false and apply some visual changes in order to
  104.       // get the user focusing on each field whether it's ok or not
  105.       // If one of the input fields contains an error, the submit button
  106.       // will be disabled, until the error (that means all errors) are
  107.       // solved
  108.       if(http.responseText == "false") {
  109.  
  110.          var sInput = document.getElementById(vId);
  111.          var vButton = document.getElementById("submit");
  112.  
  113.          document[vId].src = "img/false.png";
  114.          sInput.style.border = "1px solid #d12f19";
  115.          sInput.style.background = "#f7cbc2";
  116.          vButton.disabled = true;
  117.          vError.push(vId);
  118.  
  119.       }
  120.  
  121.       if(http.responseText == "true") {
  122.  
  123.          var sInput = document.getElementById(vId);
  124.          
  125.          document[vId].src = "img/true.png";
  126.          sInput.style.border = "1px solid #338800";
  127.          sInput.style.background = "#c7f7be";
  128.  
  129.          // We do a check if our element is in the error array, and if
  130.          // so, we can delete it from the array
  131.          if(vError.indexOf(vId) != -1) {
  132.             var aId = vError.indexOf(vId);
  133.             vError.splice(aId, 1);
  134.             if(vError.length > 0) {
  135.                var vButton = document.getElementById("submit");
  136.                vButton.disabled = true;
  137.             } else {
  138.                var vButton = document.getElementById("submit");
  139.                vButton.disabled = false;
  140.             }
  141.          }
  142.       }
  143.  
  144.       if(http.responseText == "none") {
  145.  
  146.          var sInput = document.getElementById(vId);
  147.          var vButton = document.getElementById("submit");
  148.  
  149.          document[vId].src = "img/blank.gif";
  150.          sInput.style.border = "1px solid #aaa";
  151.          sInput.style.background = "#ffffff";
  152.          vButton.disabled = false;
  153.  
  154.       }
  155.  
  156.    }
  157. }

validate.php

  1. <?php
  2.  
  3. /*
  4.  * This is the PHP script to validate the form over AJAX
  5.  */
  6.  
  7.  
  8. // Start the main function
  9. StartValidate();
  10.  
  11. function StartValidate() {
  12.    
  13.    // Assign some var's for the requests
  14.    $required = $_GET["required"];
  15.    $type = $_GET["type"];
  16.    $value = $_GET["value"];
  17.  
  18.    // This is the function to check if a field is even required or not
  19.    // So it's useful if you only want to check if it isn't empty
  20.    validateRequired($required, $value, $type);
  21.  
  22.    switch ($type) {
  23.       case 'password':
  24.          validatePassword($value);
  25.          break;
  26.       case 'username':
  27.          validateUsername($value);
  28.          break;
  29.       
  30.    }
  31. }
  32.  
  33. // The function to check if a field is required or not
  34. function validateRequired($required, $value, $type) {
  35.    if($required == "required") {
  36.  
  37.       // Check if we got an empty value
  38.       if($value == "") {
  39.          echo "false";
  40.          exit();
  41.       }
  42.    } else {
  43.       if($value == "") {
  44.          echo "none";
  45.          exit();
  46.       }
  47.    }
  48. }
  49.  
  50. // I use regular expressions in order to check a field's input, you can
  51. // get most of them at the Regex Library at http://www.regexlib.com
  52. // There you can check your own regular expressions, too
  53.  
  54.  
  55. // Validation of characters
  56. function validateUsername($value) {
  57.    if(ereg("^[a-zA-Z]+$", $value, $regs)) {
  58.       echo "true";
  59.    } else {
  60.       echo "false";
  61.    }
  62. }
  63.  
  64. // Validation of characters and numbers
  65. function validatePassword($value) {
  66.    if(ereg("^[a-zA-Z0-9]+$", $value, $regs)) {
  67.       echo "true";
  68.    } else {
  69.       echo "false";
  70.    }
  71. }
  72.  
  73.  
  74. ?>



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
Poslao: 10 Mar 2011 21:47
Idi na vrh
offline
  • Pridružio: 21 Apr 2007
  • Poruke: 98

Nemam vremena da gledam ceo kod, ali vidim da ti funkcije nisu baš dobre.

Umesto:

  1. if(ereg("^[a-zA-Z0-9]+$", $value, $regs)) {

Koristi
  1. if (ctype_alnum($value)) {
Za proveru korisničkog imena i lozinke.

[Link mogu videti samo ulogovani korisnici]

Primer:
  1. function validateUsername($value) {
  2.    if (ctype_alnum($value)) {
  3.       return true;
  4.    } else {
  5.       return false;
  6.    }
  7. }


Reši prvo PHP deo koda, pa posle ajax.
Samo znakovi:
[Link mogu videti samo ulogovani korisnici]
Znakovi i brojevi:
[Link mogu videti samo ulogovani korisnici]

Ne treba ti regex za to, pogotovo ereg funkcija koja se više ne koristi.



MyCity » Web programiranje » PHP, JS i AJAX forma?

Ko je trenutno na forumu
 

Ukupno su 1157 korisnika na forumu :: 63 registrovanih, 4 sakrivenih i 1090 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 3466 - dana 01 Jun 2021 17:07

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: Albin0, blatruc82, Boroš, Botovac, Cigi, DavidA, dearg, Demi87, djboj, drimer, dusan.l, Feller, gale48, gasha, Gogi_avio, hyla, jackreacher011011, jalos, jarovitt, Jaz, jodzula, JOntra, Još malo pa deda, Kubovac, laurusri, Lazarus, loon123, lord sir giga, lucko1, mango, Metanoja, milikonst, mitja2512, nekdo, Nikolaa11, Panter, pceklic, Pilipenda, Polifon, Posmatrac77OKB, RAKITNICA, Relixiran, rodoljub, ruma, SamostalniReferent, Sarmat, sasovsky, Shadows1, skvara, Skywhaler, stokssone, Tafocus, tajvankanasta, tamno.nebo, umpah-pah, Vlada78, vukajlo71, vukovi, vuksa72, W123, zmajbre, Zorge, 1107