Avatar billede tuplet Nybegynder
05. oktober 2011 - 11:34 Der er 10 kommentarer og
1 løsning

Huller i min validering

Jeg har en formular, som brugerne kan udfylde med diverse informationer. Valideringen går på at brugeren skal være over 18 år, og hvis personen ikke er det, skal de have deres forældres tilladelse. Jeg bruger WordPress, og har brugt cformsII som plugin til at lave formen. Scriptet nedenfor er lavet som en overlapning til cformsII's valiering.


$j = jQuery.noConflict();

$j(document).ready(function() {

    // TJEK ALDER
    var jVal = {
        'tjekAge': function() {

            var age = 18;
            var dobArr = $j('#cf_field_8').val().split("/");
            var dob = new Date();
            dob.getDate(dobArr[0], dobArr[1] - 1, dobArr[2]);
            d = dobArr[0];
            m = dobArr[1];
            y = dobArr[2];

            var mydate = new Date();
            mydate.setFullYear(y, m - 1, d);

            var currdate = new Date();
            currdate.setFullYear(currdate.getFullYear() - age);

            if (((currdate - mydate) < 0) && ($j("#cf_field_9").is(':checked') === false)) {
                //Brugeren er under 18 og mangler tilladelse
                $j("#li--9").append("<p class='pMsg'>Du er under 18 \u00E5r, og skal derfor have dine for\346ldres tilladelse.</p>");
                return false;
            }
            else if (((currdate - mydate) < 0) && ($j("#cf_field_9").is(':checked') === true)) {
                //Brugeren er ikke gammel nok, men har en tilladelse
                $j("#sendbutton").attr('disabled', false);
                $j("#li--9 p").remove();
                return true;
            }
            else if ((currdate - mydate) > 0) {
                //alert ("Du er gammel nok");
                $j("#sendbutton").attr('disabled', false);
                $j(".pMsg").remove();
                return true;
            }
            else if ((currdate - mydate) === 0) {
                //Brugeren er gammel nok og har endda fødselsdag
                $j("#li--9 p").remove();
                $j("#sendbutton").attr('disabled', false);
                return true;
            }
            else if (mydate == 'Invalid Date') {
                return false;
            }
            else {
                //alert ("Error");
                alert("Fejl - Vi arbejder p\u00E5 sagen!");
                return false;
            }
        }

    };

    $j('#cf_field_8').change(jVal.tjekAge);
    $j('#cf_field_9').change(jVal.tjekAge);

});


I praksis fungerer det oftest fint, men flere har haft problemer med det. Brugerne har oplevet, at selvom de har udfyldt formen korrekt, så får de ikke lov til at sende formen afsted. Dette skyldes:

[code]$j("#sendbutton").attr('disabled', false);[/code]

som fungerer som stopklods, for at cformsII's validering ikke bliver aktiveret, før mit script har tjekket om alder og forældres tilladelse er korrekt.

Mit spørgsmål går så på, om jeg har overset noget i koden. Præcist ved jeg ikke, hvad det er brugerne gør, siden at koden ikke agerer korrekt. Har jeg overset nogle mulige udfald, som ikke er inkluderet i kode, og derfor bliver brugeres informationer ikke valideret korrekt?

Siden kan ses på http://teenarbejdet.dk/lejrtilmelding
Ovenstående kode er dog ikke inkluderet på nuværende tidspunkt, eftersom den laver mere ravage end gavn.

Alle forslag er velkommen!
Avatar billede tuplet Nybegynder
05. oktober 2011 - 11:42 #1
I kan se casen på følgende link:
http://jsfiddle.net/tuplet/nYha5/
Avatar billede jokkejensen Novice
05. oktober 2011 - 12:43 #2
$j("#sendbutton").attr('disabled', 'disabled');

bør være mere korrekt.

$j("#sendbutton").removeAttr('disabled') til at fjerne..

er det årsagen ?
Avatar billede jokkejensen Novice
05. oktober 2011 - 13:57 #3
jeg har noget gammelt noget jeg selv har brugt, det inkludere dog en kalender, men ofte er det skønnere for brugeren at benytte en kalender frem for at tvinge dem til at skrive dato i et bestemt format:

Jeg har lige renset det lidt, så det passer dine behov.

[code]
<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
  <script>
      $(document).ready(function () {
          $("#datepicker").datepicker(
          { changeYear: true,
              yearRange: '1900:2011',
              onSelect: function (dateText, inst) {
                  $(".Error").hide();
                  var userAge = new Date(dateText);
                  var today = new Date();
                  var minAge = new Date();
                  var hasParentAccept = $("input[type=checkbox]:checked").val();
                  minAge.setFullYear(today.getFullYear() - 18, today.getMonth() - 1, today.getDay());

                  if (userAge < minAge) {
                      $(".Accept").show();
                  } else if (userAge > minAge) {
                      $(".toYoungNeedAccept").show();
                  }

              }

          });

          $("input[type=checkbox]").change(function () {
              var isChecked = $(this).is(":checked");
              if (isChecked) {
                  $(".Accept").show();
              } else {
                  $(".Accept").hide();
              }

          });

      });
  </script>
  <style>
  .Error{display:none;}
  </style>
</head>
<body>
Vælg fødselsdag 
<div id="datepicker" style="font-size: 62%"></div>
<div class="Error toYoungNeedAccept">Da du er under 18 år, skal du bekræfte dine forældres tilladelse:<br /> <input type="checkbox" value="true" /><label>Bekræft</label></div>
<div class="Error Accept"><input type="submit" value="Accepter betingelser" /></div>
</body>
</html>
[/code]
Avatar billede jokkejensen Novice
05. oktober 2011 - 13:58 #4
Avatar billede tuplet Nybegynder
05. oktober 2011 - 17:08 #5
Hej Jokke,

Tak for hjælpen!
Jeg afprøver og tilpasser det lige, og vender hurtigst muligt tilbage :)

/Emil
Avatar billede majbom Novice
05. oktober 2011 - 20:36 #6
-> jokke - prøv (pre) i stedet for (code)
Avatar billede tuplet Nybegynder
06. oktober 2011 - 01:52 #7
@Jokke; Har du en idé til, hvordan man kan trigge valideringen, så den også tjekker hvis folk skriver datoen manuelt?

Koden er ved at blive testet af brugerne. Håber det virker :)
Avatar billede jokkejensen Novice
10. oktober 2011 - 10:52 #8
ja, altså hvis du erstatter <div id="datepicker"></div>

Med <input id="datepicker" /> så vil der komme et tekst felt, når brugeren sætter curseren deri, kan han vælge mellem at skrive i tekst feltet, eller benytte kaldenren der dukker frem.


Desuden har kalenderen:
http://jqueryui.com/demos/datepicker/#option-dateFormat

Hvor du kan sætte krav til respons Format fra kalenderen.

for at validere (ikke testet):
(http://docs.jquery.com/Plugins/Validation/Methods)
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

$("form").validate({
  rules: {
    datepicker: {
      required: true,
      date: true
    }
  }

/J
Avatar billede jokkejensen Novice
10. oktober 2011 - 10:53 #9
@splazz > takker :)
Avatar billede tuplet Nybegynder
17. oktober 2011 - 14:31 #10
Der har ikke været nogle problmer pt., så lad os håbe, at det betyder, at scriptet er som det skal være. Smid et svar, Jokke, og tak for din hjælp!
Avatar billede jokkejensen Novice
06. november 2011 - 14:55 #11
Selv tak
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester