Problem z walidacją w JS.

pytanie zadane 17 lipca 2016 w JavaScript przez Paweł123 Nałogowiec (33,540 p.)

Cześć, mam problem z walidacją w js.

Chodzi o to, że użytkownik musi zaakceptować regulamin i zgodę na przetwarzanie danych. Kiedy zaakceptujemy oba checkboxy to wiadomość zostaje wysłana. Ale kiedy zaakceptujemy oba checkboxy i potem odznaczymy jeden z nich, wiadomość i tak zostanie wysłana. Ktoś wie jak można zrobić, aby walidacja przeszła poprawnie?

Męczę się z tym już parę godzin :/

<script>
        
 $(document).ready(function() {
 
	 
	 
//Walidacja email
 $('#email').on('blur', function() {
 var input = $(this);
 var email = $(this).val();
 if(email){
 input.removeClass("invalid").addClass("valid");
 }
 else{
 input.removeClass("valid").addClass("invalid");
 }
 });
     
 //Walidacja imienia
 $('#imie').on('blur', function() {
 var input = $(this);
 var imie = $(this).val();
 if(imie){
 input.removeClass("invalid").addClass("valid");
 }
 else{
 input.removeClass("valid").addClass("invalid");
 }
 });
 
	
	 
 //Walidacja nazwiska
 $('#nazwisko').on('blur', function() {
 var input = $(this);
 var nazwisko = $(this).val();
 if(nazwisko){
 input.removeClass("invalid").addClass("valid");
 }
 else{
 input.removeClass("valid").addClass("invalid");
 }
 });

	 
 //Walidacja REGULAMIN	
 $('#checkbox1').on('blur', function() {
 var input = $(this);
 var checkbox1 = $(this).val();
 if(checkbox1){
 input.removeClass("invalid").addClass("valid");
 }
 else{
 input.removeClass("valid").addClass("invalid");
 }
 })
	 
	 
	 
 //Po próbie wysłania formularza
 $('button').click(function(event){
 var imie = $('#imie');
 var nazwisko = $('#nazwisko');
 var email = $('#email');
 
 
 if(imie.hasClass('valid') && nazwisko.hasClass('valid') && email.hasClass('valid')){
 
 }
 else {
 event.preventDefault();
swal({   
	title: "Proszę uzupełnić lub poprawić wszystkie pola podświetlone na czerwono.",  
	confirmButtonColor: "#000",
	confirmButtonText: "OK" });  }
 	});
 
});
</script>
		
<script>
        
 $(document).ready(function() {
 
	 
 //Walidacja REGULAMIN	
 $('#checkbox1').on('blur', function() {
 var input = $(this);
 var checkbox1 = $(this).val();
 if(checkbox1){
 input.removeClass("invalid").addClass("valid");
 }
 else{
 input.removeClass("valid").addClass("invalid");
 }
 })
  
 //Po próbie wysłania formularza
 $('button').click(function(event){
 var checkbox1 = $('#checkbox1');
 
 
 if(checkbox1.hasClass('valid')){
 
 }
 else {
 event.preventDefault();
swal({   
	title: "Proszę zaakceptować regulamin.",  
	confirmButtonColor: "#000",
	confirmButtonText: "OK" });  }
 	});
 
});
	
</script>

<script>
        
 $(document).ready(function() {
 
	 
 //Walidacja DANTCH OSOBOWYCH	
 $('#checkbox2').on('blur', function() {
 var input = $(this);
 var checkbox2 = $(this).val();
 if(checkbox2){
 input.removeClass("invalid").addClass("valid");
 }
 else{
 input.removeClass("valid").addClass("invalid");
 }
 })
  
 //Po próbie wysłania formularza
 $('button').click(function(event){
 var checkbox2 = $('#checkbox2');
 
 
 if(checkbox2.hasClass('valid')){
 
 }
 else {
 event.preventDefault();
swal({   
	title: "Proszę zaakceptować zgodę na przetwarzanie moich danych osobowych.",  
	confirmButtonColor: "#000",
	confirmButtonText: "OK" });  }
 	});
 
});
	
</script>

2 odpowiedzi

odpowiedź 17 lipca 2016 przez Comandeer Guru (607,960 p.)
wybrane 17 lipca 2016 przez Paweł123

Najlepsza

Zamiast sprawdzać, czy checkbox ma klasę .valid, sprawdź, czy jest zaznaczony ($( 'checkbox' ).is( ':checked' ) lub $( 'checkbox' )[ 0 ].checked). No i sprawdzaj to przy zdarzeniu change, nie blur (można wysłać formularz BEZ blurowania checkboxa, poprzez Enter!).

komentarz 17 lipca 2016 przez Paweł123 Nałogowiec (33,540 p.)

Nie działa :/

Czy tak powinień wyglądać kod?

<script>
        
 $(document).ready(function() {
 
	 
 //Walidacja REGULAMIN	
 $('#checkbox1').on('change', function() {
 var input = $(this);
 var checkbox1 = $(this).val();
 if(checkbox1){
 $( 'checkbox1' ).is( ':checked' )
 }
 else{

 }
 })
  
 //Po próbie wysłania formularza
 $('button').click(function(event){
 var checkbox1 = $('#checkbox1');
 
 
 if(checkbox1.hasClass(':checked')){
 
 }
 else {
 event.preventDefault();
swal({   
	title: "Proszę zaakceptować regulamin.",  
	confirmButtonColor: "#000",
	confirmButtonText: "OK" });  }
 	});
 
});
	
</script>

komentarz 17 lipca 2016 przez Comandeer Guru (607,960 p.)

Masz złe selektory dla checkboxów.

komentarz 17 lipca 2016 przez Paweł123 Nałogowiec (33,540 p.)

Nie rozumiem :/

komentarz 17 lipca 2016 przez Comandeer Guru (607,960 p.)

#checkbox1 vs checkbox1 – widzisz różnicę?

komentarz 17 lipca 2016 przez Paweł123 Nałogowiec (33,540 p.)

Teraz tak, ale nadal nie wiem, jak to zrobić. Coś takiego napisałem, ale coś mi nie wychodzi.

<script>
        
 $(document).ready(function() {
 
	 
 //Walidacja REGULAMIN	
 $('#checkbox1').change(function(){
 var checkbox1 = .is(':checked');
 if(checkbox1)
 {
 
 }
 else
 {

 }
 })
 //Po próbie wysłania formularza
 $('button').click(function(event){
 var checkbox1 = $('checkbox1');
 if(checkbox1.hasClass(':checked')){
 
 }
 else 
 {
 event.preventDefault();
 swal({   
	title: "Proszę zaakceptować regulamin.",  
	confirmButtonColor: "#000",
	confirmButtonText: "OK" });  }
 	});
 
});
	
</script>

komentarz 17 lipca 2016 przez Comandeer Guru (607,960 p.)

Ale po co tak kombinujesz…? Napisałem: "zły selektor". Porównaj mój kod z tym, co masz obecnie

komentarz 17 lipca 2016 przez Paweł123 Nałogowiec (33,540 p.)

Nadal nie działa. Chociaż poprawiłem selektor.

<script>
         
 $(document).ready(function() {
  
      
 //Walidacja REGULAMIN  
 $('#checkbox1').on('change', function() {
 var input = $(this);
 var checkbox1 = $(this).val();
 if(checkbox1){
 $( 'checkbox1' ).is( ':checked' )
 }
 else{
 
 }
 })
   
 //Po próbie wysłania formularza
 $('button').click(function(event){
 var checkbox1 = $('checkbox1');
  
  
 if(checkbox1.hasClass(':checked')){
  
 }
 else {
 event.preventDefault();
swal({   
    title: "Proszę zaakceptować regulamin.",  
    confirmButtonColor: "#000",
    confirmButtonText: "OK" });  }
    });
  
});
     
</script>

komentarz 17 lipca 2016 przez Paweł123 Nałogowiec (33,540 p.)

Ktoś pomoże? Proszę

komentarz 17 lipca 2016 przez Paweł123 Nałogowiec (33,540 p.)

Udało się :) Wszystko działa, ale nie wiem, czy dobrze to zrobiłem.


<script>
        
 $(document).ready(function() {
 
	 
 //Walidacja REGULAMIN	
 $('#checkbox1').on('blur', function() {
 var input = $(this);
 var checkbox1 = $(this).is(':checked');
 if(checkbox1){
 input.removeClass("invalid").addClass("valid");
 }
 else{
 input.removeClass("valid").addClass("invalid");
 }
 })
	 
	 
	 
 //Po próbie wysłania formularza
 $('button').click(function(event){
 var checkbox1 = $('#checkbox1');
 
 
 if(checkbox1.hasClass('valid')){
 
 }
 else {
 event.preventDefault();
swal({   
	title: "Proszę zaakceptować regulamin.",  
	confirmButtonColor: "#000",
	confirmButtonText: "OK" });  }
 	});
 
});
	
</script>

<script>
        
 $(document).ready(function() {
 
	 
 //Walidacja DANTCH OSOBOWYCH	
 $('#checkbox2').on('blur', function() {
 var input = $(this);
 var checkbox2 = $(this).is(':checked');
 if(checkbox2){
 input.removeClass("invalid").addClass("valid");
 }
 else{
 input.removeClass("valid").addClass("invalid");
 }
 })
  
 //Po próbie wysłania formularza
 $('button').click(function(event){
 var checkbox2 = $('#checkbox2');
 
 
 if(checkbox2.hasClass('valid')){
 
 }
 else {
 event.preventDefault();
swal({   
	title: "Proszę zaakceptować zgodę na przetwarzanie moich danych osobowych.",  
	confirmButtonColor: "#000",
	confirmButtonText: "OK" });  }
 	});
 
});
	
</script>