Verkorte code

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Yoeri Achterbergen

Yoeri Achterbergen

21/10/2015 20:35:46
Quote Anchor link
Beste Leden,

Ben zojuist bezig geweest om jquery beter onder de knie te krijgen.
Nu heb ik een error functie gemaakt maar vroeg me af of ik dit misschien in een korte code kon maken

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function error(){
$("#send").click(function(e){
if(!$("#dataeen").val()){
     $("#dataeen").css("border-bottom-color", "#FF0000");  
    }else{
     $("#dataeen").css("border-bottom-color", "#CCCCCC");  
    }

if(!$("#datatwee").val()){
     $("#datatwee").css("border-bottom-color", "#FF0000");  
    }else{
     $("#datatwee").css("border-bottom-color", "#CCCCCC");  
    }

e.preventDefault();
});
}


als ik nu 10 input velden heb word het een behoorlijk lange code.
Zou ik hier met een each functie kunnen werken zodat jquery het rijtje afgaat?

Gr. Yoeri
 
PHP hulp

PHP hulp

18/10/2018 01:54:54
 
Peter K

Peter K

21/10/2015 21:09:10
Quote Anchor link
Je zou een functie kunnen maken die je de veldnaam en de gewenste kleur meegeeft?

b.v.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
function vak_inkleuren(veldnaam, kleurcode)
{
if(!$(veldnaam).val()){
     $(veldnaam).css("border-bottom-color", kleurcode);  
    }else{
     $(veldnaam).css("border-bottom-color", kleurcode);  
    }
}


Deze functie roep je dan x keer aan bijvoorbeeld.
 
Wouter J

Wouter J

21/10/2015 22:04:10
Quote Anchor link
Laat ik eerst beginnen met 2 algemene JavaScript best-practices:
  • Probeer zo min mogelijk styling te doen, laat dat over aan CSS. Gebruik bijv. classes
  • Probeer zo min mogelijk de hele DOM tree door te zoeken


Wanneer we de eerste best-practice toepassen maken we bijvoorbeeld 2 CSS classes aan:
Code (css)
PHP script in nieuw venster Selecteer het PHP script
1
2
.field--error   { border-bottom-color:#ff0000; }
.field--default { border-bottom-color:#cccccc; }


Nu kunnen we deze toevoegen met jQuery:
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
if (!$('#dataeen').val()) {
    $('#dataeen').removeClass('field-default').addClass('field-error');
}
else {
    $('#dataeen').removeClass('field-error').addClass('field-default');
}

Dit kunnen we versimpelen door jQuery's toggleClass() functie te gebruiken:
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
// class wordt toegevoegd wanneer het 2e argument true is en wordt verwijderd wanneer dit false is
// dit betekend dat border-bottom-color:#cccccc; de default border-bottom kleur van de veldjes moet worden

$('#dataeen').toggleClass('field-error', !$('#dataeen').val());


Nu zie je dat we 2 keer $('#dataeen') hebben. Dit betekend dat JavaScript 2 maal alle elementen van de pagina (DOM tree) moet doorzoeken om een element te vinden. Je kan begrijpen dat dit met een grote pagina best wat tijd kan kosten. Het is dus beter om dit element op te slaan in een variabele en deze dan te gebruiken:
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
var dataeenElem = $('#dataeen');

dataeenElem.toggleClass('field-error', !dataeenElem.val());


Nu kunnen we dit nog beter maken, omdat de functie nu alsnog elke keer dat het wordt aangeroepen opzoek moet gaan naar de elementen. Dus kun je beter deze variabele globaal opslaan: (globaal is eigenlijk niet goed, maar dit lokaal maken gaat nu nog een beetje te ver)
Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
var dataeenElem = $('#dataeen');
var datatweeElem = $('#datatwee');

$('#send').click(function (e) {
    e.preventDefault();

    dataeenElem.toggleClass('field--error', !dataeenElem.val());
    datatweeElem.toggleClass('field--error', !datatweeElem.val());
});


Nu zie je dat je alsnog 2 regels hebt die nagenoeg hetzelfde zijn. Dit zou je ook weer kunnen abstraheren in een nieuwe functie, maar dat lijkt me een tikkeltje overkill.

Kijk trouwens eens naar het onsubmit event (.submit()). Dat is iets beter dan het click event op een submit button.
Gewijzigd op 21/10/2015 22:04:38 door Wouter J
 
Ivo P

Ivo P

22/10/2015 09:24:44
Quote Anchor link
Het lijkt me gemakkelijker om alle elementen die je wilt controleren dezelfde class te geven.
Daarmee bereik je dat je niet elke id apart hoeft te vermelden:

je maakt een lus die door alle elementen met class="nietleeg" loopt en als zo'n element dan leeg is, geef je daar de opmaak class field-error aan. (oj juist niet aks gevuld)
 
Yoeri Achterbergen

Yoeri Achterbergen

22/10/2015 16:32:40
Quote Anchor link
Dank voor de reactie's.

Dit is wat ik nu heb jsfiddle
Is deze codering beter?
 
Frank Nietbelangrijk

Frank Nietbelangrijk

22/10/2015 16:44:15
Quote Anchor link
Ziet er zeker al gezond uit. Vraag me enkel af waarom je de class Default weghaalt? de class Error toevoegen of weghalen is al voldoende:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
!$(this).val() ? $(this).addClass("error") : $(this).removeClass("error");
Gewijzigd op 22/10/2015 16:44:28 door Frank Nietbelangrijk
 
Ivo P

Ivo P

22/10/2015 16:46:20
Quote Anchor link
ik zou regel 10 zonder ! doen, en dan de 2 gevolgen omdraaien.

Scheelt je een (kleine) handeling voor javascript.

Je script stopt nu sowieso, ook als er wel alle velden ingevuld zijn. Is dat de bedoeling?

ik zou het schrijven als:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
$("#data").on('submit',function() {
  $('.field').each(function(){
    $(this).val() ?  $(this).addClass("default").removeClass("error") : $(this).addClass("error").removeClass("default");
  });
  if($('.error').length > 0) {
     return false;
   }
});  
  
 
Yoeri Achterbergen

Yoeri Achterbergen

22/10/2015 19:43:04
Quote Anchor link
Bedankt voor de reacties!

@ivo

Wat bedoel je precies met:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
if($('.error').length > 0) {
     return false;
   }


Betekend dat als de waarde meer dan 0 is dat hij de code niet weer opnieuw hoeft uit te voeren?
Of betekend "return false iets anders?
 
Ivo P

Ivo P

23/10/2015 09:13:39
Quote Anchor link
Aan het einde van de functie kijk ik of er uiteindelijk elementen aanwezig zijn met de class "error".
Als dat het geval is, zijn er dus elementen die leeg zijn en dus mogen we niet door met het submitten.

vergelijkbaar met preventDefault(). Maar jouw preventDefault gaat volgens mij altijd af.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.