Gå til innhold

javascript form validation - river meg i håret

Egil Dybdal

Anbefalte innlegg

Egil Dybdal

Egil Dybdal

Skrevet
Skrevet (endret)

Hallais!

Jeg prøver meg på å få til "live" validering av ​form input data med JavaScript, Ajax og jQuery. Etter et par dager med mye prøving og feiling har jeg endelig fått username input til å kontrollere om brukernavnet er ledig/opptatt mot databasen.

 

Jeg sliter fortsatt mye med å kontrollere resten av opplysningene, da jeg i bunn og grunn ikke forstår bæret av javascripting, nesten synd å si det.

 

Legger ut litt kodesnutter av det som er produsert hittil.

Index.php, utsnitt fra HEAD-tag:

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

// Brukernavn validering, fungerer foreløpig OK
<script type="text/javascript">
 $(document).ready(function() {
  $("#username").keyup(function() {
   var username = $('#username').val();
   if(username=="") {
    $("#alert_username").html("");
   }
   else{
    $.ajax( {
     type: "POST",
     url: "./username_check.php",
     data: "username="+ username ,
     success: function(html) {
      $("#alert_username").html(html);
     }
    });
    return false;
   }
  });
 });
</script>

// E-post validering, fungerer ikke...
<script type="text/javascript">
 $("#email").change(function() { 
  function controle(mail) {
   if (isEmail(mail.val()) == false) {
    $("#alert_email").html('<span class="text-danger">Ugyldig e-post adresse.</span>');
   }
  }
  function IsEmail(email) {
   var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
   if(!regex.test(email)) {
    return false;
   }
   else {
    return true;
   }
  }
 });
</script>

Index.php, FORM-data:
 

<form role="form" method="post">
 <div class="form-group" role="form">
   <input type="text" class="form-control" id="username" name="username" placeholder="brukernavn">
 </div>
 <div class="form-group" role="form"><div id="alert_username"></div></div>
 <div class="form-group" role="form">
  <input type="password" class="form-control" id="pwd" name="password" placeholder="passord">
 </div>
 <div class="form-group" role="form"><div id="alert_password"></div></div>
 ​<div class="form-group" role="form">
  <input type="password" class="form-control" id="pwd_chk" name="pwd_chk" placeholder="gjenta passord">
 </div>​​
 <div class="form-group" role="form"><div id="alert_password_repeat"></div></div>
 <div class="form-group"​ role="form">
​  <input type="email" class="form-control"​ id="email" name="email" placeholder="e-post adresse">
 </div>​
 <div class="form-group" role="form"><div id="alert_email"></div></div>
 <div class="form-group"​ role="form">
​  <select name="sex" id="sex" class="form-control">
   <option value="0">velg kjønn</option>
   <option value="male"​>Mann</option>
   <option value="female">Kvinne</option>
  </select>​
​ </div>​
 <div class="form-gr​oup" role="form">
  <label for="b​day">Fødselsdato:</label>
  <div class="controls form-inline"​ role="form">
   <select name="bday"​ class="form-control">
    <option value="0"​>Dato</option>
    <option value="1"​>1</option>
    <option value="2"​>2</option>
    <opti​on value="3">3</option>
   </select>​​
​   <select name="bmonth" id="bmonth" class="form-control">
    <option value="0​">Måned</option>
    <option value="1">Januar</option>
    <option value="2">Februar</option>
    <option value="3"​>Mars</option>
   </select>​​
   <select name="byear" id="byear" class="form-control"​>
    <option value="0">År</option>
    <option value="​​2000">2000</option>
    ​<option value="1999">1999</option>
    <option value="1998">1998</option>
   </select>​​​
  </di​v>
 </div>​
 <div class="form-group"​ role="form">
  <div class="controls form-inline" role="form">
   <p><input type="checkbox" id="confirmation" name="confirmation" value="1">
     Bekrefter at opplysningene er riktig.</p>
  </div>
 </div>​​​
 <div class="form-group" role="form">
  <button type="submit" class="btn btn-default">Registrer deg</button>
  <button type="button" class="btn btn-default" onClick="window.location='';">Avbryt</button>
 </div>​​
​</form>​

Trenger litt hjelp til å komme i gang videre, helst med et godt eksempel på hvordan man kan kontrollere innholdet i feltene, og hvordan man kan trigge ulike funksjoner ut i fra dette.

Ønsket er å:
- kontrollere at brukernavnet er minst 4 tegn og ikke inneholder spesialtegn
- kontrollere at brukernavnet er ledig (det har jeg fått til å fungere)
- kontrollere at passordet er minst 6 tegn og ikke inneholder visse spesialtegn
- kontrollere at passordet er inneholder minst 1 liten bokstav, 1 stor bokstav og minst 1 tall
- kontrollere at epost adressen er gyldig ([email protected])
- kontrollere at man har valgt kjønn og fødselsdato
- kontrollere at checkboks for bekreftelse er huket av

Når alle kriterier er oppfylt skal submit knappen aktiveres slik at skjemaet kan sendes inn.

Er det en feil med noen av kriteriene, ønsker jeg at en DIV skal dukke opp under input-feltet med en feilmelding.

Mye storforlangende greier her. Noen som vil komme med et godt eksempel for et par felter, så kanskje jeg klarer å komme meg noe videre på egenhånd? :)


Edit:
Ryddet opp i kode.​

Endret av Egil Dybdal
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
JoostR

JoostR

Skrevet
Skrevet

Vet ikke om javascript er kravet, men hvis du bare vil ha enkelt validation av input fields kan du prøve HTML5 sin required attribute
Eksempel:

Username:
<input type="text" name="username" required autofocus/>
E-Mail
<input type="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"/>
Password:
<input id="password" type="password" name="password" required pattern=".{6,}" title="Min lenght: 6">
Lenke til kommentar
Egil Dybdal

Egil Dybdal

Skrevet
  • Forfatter
Skrevet

Da er jeg litt videre.

Ajax scriptet kontrollerer nå:
- at brukernavn er mer enn 4 tegn
- at passordet er mellom 6-20 tegn, med minst en stor bokstav, liten bokstav og tall
- at passordene samsvarer
- at e-post adressen er gyldig

<script type="text/javascript">
 $(document).ready(function() {
  $("#username").change(function() {
   var username = $('#username').val();
   if(username=="") {
    $("#alert_username").html("");
    }
   else {
    $.ajax( {
     type: "POST",
     url: "./username_check.php",
     data: "username="+ username ,
     success: function(html) {
      $("#alert_username").html(html);
      }
     });
    return false;
    }
   });
   $("#password").change(function() {
    var password = $('#password').val();
    if(password=="") {
     $("#alert_password").html("");
     }
    else {
     $.ajax( {
      type: "POST",
      url: "./password_check.php",
      data: "password="+ password ,
      success: function(html) {
       $("#alert_password").html(html);
       }
      });
     return false;
     }
    });
   $("#passwordchk").change(function() {
    var passwordchk = $('#passwordchk').val();
    if(passwordchk=="") {
     $("#alert_passwordchk").html("");
     }
    else {
     $.ajax( {
      type: "POST",
      url: "./passwordchk_check.php",
      data: {password: $("#password").val(), passwordchk: $("#passwordchk").val()},
      success: function(html) {
       $("#alert_passwordchk").html(html);
       }
      });
     return false;
     }
    });
   $("#email").change(function() {
    var email = $('#email').val();
     if(email=="") {
      $("#alert_email").html("");
      }
     else{
      $.ajax( {
       type: "POST",
       url: "./email_check.php",
       data: "email="+ email ,
       success: function(html) {
        $("#alert_email").html(html);
        }
       });
      return false;
      }
     });
    });
</script>

Sitter litt fast igjen. Spørsmålet nå er hvordan jeg kan få dette til å aktivere/deaktivere submit knappen...

Anyone? =)

Lenke til kommentar
Egil Dybdal

Egil Dybdal

Skrevet
  • Forfatter
Skrevet (endret)

Det går fremover, sakte men sikkert.

 

Alle funksjoner på plass, kun 1 ting som gjenstår, som jeg ikke helt klarer å se hvordan jeg skal løse foreløpig.

Alle felter blir kontrollert for de ulike kriterier som gjelder for hvert felt. Dersom det er en feil med feltet settes klassen til danger, når alt er OK så settes klassen til success.

 

Spørsmålet er fortsatt, hvordan får jeg submit knappen til å bli aktivert/deaktivert når samtlige kriterier er oppfylt. Jeg klarer fint å styre dette internt i én funksjon, men jeg ser ikke helt hvordan jeg skal få satt opp dette til å fungere på tvers av funksjonene.

 

jQuery scriptet så langt. Det begynner å bli langt og komplisert, og kunne helt sikkert vært gjort på en mye enklere måte. Dette er mitt første jQuery script, og det var ikke så mye hjelp å få her, så alt er selvlært - med Google som min beste venn for tiden.

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
  $('#register').attr("disabled", true).addClass("btn btn-default disabled");
  $("#username").change(function() {
   var username = $("#username").val();
   $.ajax( {
    type: "POST",
    url: "username_check.php",
    data: "username="+ username,
    success: function(userchk) {
     if(userchk > 0) {
      if(userchk > 1) {
       $("#username").removeClass("form-control alert-success");
       $("#username").addClass("form-control alert-danger");
       $("#alert_username").html('<p class="text-danger" style="color:#eb3838;"><span class="glyphicon glyphicon-exclamation-sign"></span>  Brukernavn for kort.</p>');
       }
      else {
       $("#username").removeClass("form-control alert-success");
       $("#username").addClass("form-control alert-danger");
       $("#alert_username").html('<p class="text-danger" style="color:#eb3838;"><span class="glyphicon glyphicon-exclamation-sign"></span>  Brukernavn er opptatt.</p>');
       }
      }
     else {
      $("#alert_username").html('');
      $("#username").removeClass("form-control alert-danger");
      $("#username").addClass("form-control alert-success");
      $('#register').attr("disabled", false).removeClass("btn btn-default disabled");
      $('#register').attr("enabled", true).addClass("btn btn-default");
      }
     }
    });
    return false;
   });
  $("#password").change(function() {
   var password = $('#password').val();
   $.ajax( {
    type: "POST",
    url: "./password_check.php",
    data: "password="+ password ,
    success: function(pwdchk) {
     if(pwdchk > 0) {
      $("#password").removeClass("form-control alert-success");
      $("#password").addClass("form-control alert-danger");
      $("#alert_password").html('<p class="text-danger" style="color:#eb3838;"><span class="glyphicon glyphicon-exclamation-sign"></span>  For svakt eller ugyldig passord.</p>');
      }
     else {
      $("#alert_password").html('');
      $("#password").removeClass("form-control alert-danger");
      $("#password").addClass("form-control alert-success");
      }
     }
    });
   return false;
   });
  $("#passwordchk").change(function() {
   var passwordchk = $('#passwordchk').val();
   $.ajax( {
    type: "POST",
    url: "./passwordchk_check.php",
    data: {password: $("#password").val(), passwordchk: $("#passwordchk").val()},
    success: function(pwdchkchk) {
     if(pwdchkchk > 0) {
      $("#passwordchk").removeClass("form-control alert-success");
      $("#passwordchk").addClass("form-control alert-danger");
      $("#alert_passwordchk").html('<p class="text-danger" style="color:#eb3838;"><span class="glyphicon glyphicon-exclamation-sign"></span>  Passordkontroll samsvarer ikke.</p>');
      }
     else {
      $("#alert_passwordchk").html('');
      $("#passwordchk").removeClass("form-control alert-danger");
      $("#passwordchk").addClass("form-control alert-success");
      }
     }
    });
   return false;
   });
  $("#email").change(function() {
   var email = $('#email').val();
   $.ajax( {
    type: "POST",
    url: "./email_check.php",
    data: "email="+ email ,
    success: function(emailchk) {
     if(emailchk > 0) {
      if(emailchk > 1) {
       $("#email").removeClass("form-control alert-success");
       $("#email").addClass("form-control alert-danger");
       $("#alert_email").html('<p class="text-danger" style="color:#eb3838;"><span class="glyphicon glyphicon-exclamation-sign"></span>  Du må oppgi en gyldig e-post adresse.</p>');
       }
      else {
       $("#email").removeClass("form-control alert-success");
       $("#email").addClass("form-control alert-danger");
       $("#alert_email").html('<p class="text-danger" style="color:#eb3838;"><span class="glyphicon glyphicon-exclamation-sign"></span>  E-post adressen er allerede i bruk.</p>');
       }
      }
     else {
      $("#alert_email").html('');
      $("#email").removeClass("form-control alert-danger");
      $("#email").addClass("form-control alert-success");
      }
     }
    });
    return false;
   });
  $("#sex").change(function() {
   var sexchk = $('#sex').val();
   if(sexchk > 0) {
    $("#alert_sex").html('');
    $("#sex").removeClass("form-control alert-danger");
    $("#sex").addClass("form-control alert-success");
    }
   else {
    $("#sex").removeClass("form-control alert-success");
    $("#sex").addClass("form-control alert-danger");
    $("#alert_sex").html('<p class="text-danger" style="color:#eb3838;"><span class="glyphicon glyphicon-exclamation-sign"></span>  Du må angi kjønn.</p>');
    }
   return false;
   });
  $("#bday").change(function() {
   var bdaychk = $('#bday').val();
   if(bdaychk > 0) {
    var bmonthchk = $('#bmonth').val();
    if(bmonthchk > 0) {
     var byearchk = $('#byear').val();
     if(byearchk > 0) {
      $("#alert_bday").html('');
      }
     }
    $("#bday").removeClass("form-control alert-danger");
    $("#bday").addClass("form-control alert-success");
    }
   else {
    $("#bday").removeClass("form-control alert-success");
    $("#bday").addClass("form-control alert-danger");
    $("#alert_bday").html('<p class="text-danger" style="color:#eb3838;"><span class="glyphicon glyphicon-exclamation-sign"></span>  Du må angi fødselsdato.</p>');
    }
   return false;
   });
  $("#bmonth").change(function() {
   var bmonthchk = $('#bmonth').val();
   if(bmonthchk > 0) {
    var bdaychk = $('#bday').val();
    if(bdaychk > 0) {
     var byearchk = $('#byear').val();
     if(byearchk > 0) {
      $("#alert_bday").html('');
      }
     }
    $("#bmonth").removeClass("form-control alert-danger");
    $("#bmonth").addClass("form-control alert-success");
    }
   else {
    $("#bmonth").removeClass("form-control alert-success");
    $("#bmonth").addClass("form-control alert-danger");
    $("#alert_bday").html('<p class="text-danger" style="color:#eb3838;"><span class="glyphicon glyphicon-exclamation-sign"></span>  Du må angi fødselsdato.</p>');
    }
   return false;
   });
  $("#byear").change(function() {
   var byearchk = $('#byear').val();
   if(byearchk > 0) {
    var bdaychk = $('#bday').val();
    if(bdaychk > 0) {
     var bmonthchk = $('#bmonth').val();
     if(bmonthchk > 0) {
      $("#alert_bday").html('');
      }
     }
    $("#byear").removeClass("form-control alert-danger");
    $("#byear").addClass("form-control alert-success");
    }
   else {
    $("#byear").removeClass("form-control alert-success");
    $("#byear").addClass("form-control alert-danger");
    $("#alert_bday").html('<p class="text-danger" style="color:#eb3838;"><span class="glyphicon glyphicon-exclamation-sign"></span>  Du må angi fødselsdato.</p>');
    }
   return false;
   });
  $("#confirmation").change(function() {
   });
  });
</script>

 

Endret av Egil Dybdal
Lenke til kommentar
Yawa

Yawa

Skrevet
Skrevet

Jeg ville satt et flagg til hvert kritierie som indikerer "success" eller "danger".

 

Forhåndsette registreringsknappen til "disabled":

<button type="submit" class="btn btn-default" id="submit">Registrer deg</button>
$(#submit).attr('disabled','disabled');

Nvis alle kritieriene har blitt flagget med "success":

$(#submit).removeAttr("disabled");
Lenke til kommentar
TheHvidsten

TheHvidsten

Skrevet
Skrevet

Vel og bra med klientsidevalidering av skjema, men ikke glem å valider serverside og når dataene som skal lagres faktisk kommer inn. Hvis brukere har deaktivert javascript (eller manuelt sender HTTP-data til serveren din) så kan du aldri være helt sikker på at dataene som faktisk kommer inn til serveren er helt riktig uten å sjekke der også.

Lenke til kommentar
Egil Dybdal

Egil Dybdal

Skrevet
  • Forfatter
Skrevet

Alle data vil bli validert på serverside før registrering i database. Hensikten med validering på klientside var for å øke brukervennligheten, i stedet for å sende brukeren i retur til skjemaet for hver "feil" som må rettes opp. :) Første gang jeg prøver meg på akkurat dette, og det har tatt noe tid å finne frem til en god løsning som fungerer sømløst på alle platformer. Ser ut til at jeg begynner å nærme meg mål nå. :)

Lenke til kommentar
nightowl

nightowl

Skrevet
Skrevet

Siden du ikke forstår bæret av JavaScript (som du selv sier), hadde det vært langt enklere å heller returnere skjemaet med de dataene som faktisk lar seg validere også vise feilmeldinger for resten. De fleste har i dag tross alt ganske rask tilkobling hvor sending/henting av noe skarve KB ekstra ikke har så mye å si. Du eksponerer også serversiden med database mot mulig misbruk.

 

Men det handler kanskje mer om å prøve noe nytt, fremfor å lage noe som skal tas i bruk så fort som mulig?

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...