javascript form validation - river meg i håret

[Egil Dybdal]

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 6. oktober 2015 av Egil Dybdal

[JoostR]

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">

[Egil Dybdal]

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? =)

[Egil Dybdal]

Link til skjemaet jeg jobber med:
 

http://www.eyd.no/dev/

[Egil Dybdal]

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 9. oktober 2015 av Egil Dybdal

[Yawa]

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");

[TheHvidsten]

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å.

[Egil Dybdal]

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å.

[nightowl]

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?