jQuery append ones and remove
Ik loop weer vast met jQuery. Ik heb het volgende om aan te geven welke velden moeten worden ingevuld.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
$( '#frmPersonaldata :input' ).each(function(n,element){
if ( $( element ).val() == '' && $( element ).attr( 'required' ) ) {
$( element ).closest( ':input' ).addClass( 'error' ).before( '<span class="error">Gelieve dit veld in te vullen</span>' );
$( '.status' ).text( 'Niet alle verplichte velden zijn ingevuld' );
hasError = true;
}
});
if ( $( element ).val() == '' && $( element ).attr( 'required' ) ) {
$( element ).closest( ':input' ).addClass( 'error' ).before( '<span class="error">Gelieve dit veld in te vullen</span>' );
$( '.status' ).text( 'Niet alle verplichte velden zijn ingevuld' );
hasError = true;
}
});
Dit werkt prima bij 1 input veld per element, maar bij 2 input velden (straat+huisnummer, postcode+woonplaats) wordt 2x de span toegevoegd. Hoe voorkom ik dat? Heb al geprobeerd met find e.d. om te kijken of ie al bestaat, maar tot nu toe zonder resultaat.
Vervolgens heb ik het volgende om de span weer te verwijderen, maar hij verwijdert ze allemaal i.p.v. alleen de dichtstbijzijnde.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
$( ':input' ).on( 'blur keyup', function( e ){
//var id = $( this ).attr( 'id' );
if( $( this ).val() == '' && $( this ).attr('required') ){
$( this ).addClass( 'error' );
hasError = true;
} else {
$( this ).removeClass( 'error' ).parent().find( 'span' ).remove();
}
});
//var id = $( this ).attr( 'id' );
if( $( this ).val() == '' && $( this ).attr('required') ){
$( this ).addClass( 'error' );
hasError = true;
} else {
$( this ).removeClass( 'error' ).parent().find( 'span' ).remove();
}
});
Ik heb het geprobeerd met closest e.d., maar zonder resultaat.
Ook raar vind ik, wanneer ik begin te typen wordt de class error verwijdert, maar de span verdwijnt al gelijk op het moment dat ik op de input klik. Hoezo kan die actie anders zijn?
Bvd
Er zijn nog geen reacties op dit bericht.