Validacija forme + ajax

[mslavko]

Treba da napravim obicnu formu za dodavanje podataka u bazu + validacija istih. Za validaciju koristim parsley biblioteku.

Imam HTML:

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-success">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h2 class="modal-title" id="myModalLabel">Nova aktivnost</h2>
      </div>
      <div class="modal-body">
        
        <form id="myForm" class="form-horizontal" data-parsley-validate>
<fieldset>
<!-- Select Basic -->
<div class="form-group">
  <label class="col-md-4 control-label" for="status">Status aktivnosti</label>
  <div class="col-md-4">
    <select id="status" name="status" class="form-control">
      <option value="U planu">U planu</option>
      <option value="U toku">U toku</option>
      <option value="Zavrseno">Zavrseno</option>
    </select>
  </div>
</div>
<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="naziv">Naziv aktivnosti</label>  
  <div class="col-md-4">
  <input id="naziv" name="naziv" type="text" placeholder="naziv" class="form-control input-md" required/>
    
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="parcele">Parcela</label>  
  <div class="col-md-4">
  <input type="hidden" id="parcele" name="parcele" class="form-control select2-container select2-container-multi" required/>
    
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="vrsta_rada">Vrsta aktivnosti</label>  
  <div class="col-md-4">
    <input type="hidden" id="vrsta_rada" name="vrsta_rada" class="form-control select2-container select2-container-multi"   required/>
  </div>
</div>

<!-- Textarea -->
<div class="form-group">
  <label class="col-md-4 control-label" for="opis">Opis zadatka</label>
  <div class="col-md-4">                     
    <textarea class="form-control" id="opis" Placeholder="Opis aktivnosti/zadatka" name="opis"></textarea>
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="datum">Datum: Od</label>  
  <div class="col-md-3">
<input id="pocetak" name="pocetak" data-date-format="yyyy-mm-dd" class="form-control" placeholder="Datum" type="text" required>
  </div>
  <div class="col-md-3">
<input id="zavrsetak" name="zavrsetak" data-date-format="yyyy-mm-dd" class="form-control" placeholder="Datum" type="text" required>
  </div>
</div>




        
      </div>
      <div class="modal-footer bg-dark">
        <button type="button" class="btn btn-default" data-dismiss="modal">Zatvori</button>
        <button type="button" id="dodaj" class="btn btn-primary">Dodaj zadatak</button>
      </div>
      </fieldset>
</form>
    </div>
  </div>
</div>

A napisao sam i kod koji bi trebalo da nakon sto se klikne na dugme sa ID dodaj da proveri da li je forma ispravna i ako jeste da pokrene ajax kod...

$("#dodaj").click(function() {
$('#myForm').parsley( {
    success: function (){
    var zemljiste = "";			
zemljiste = $("#parcele").select2("data").naziv;
var id_parcele = 0;
id_parcele = $("#parcele").select2("data").id;
var vrsta_rada = "";
vrsta_rada = $("#vrsta_rada").select2("data").text;

        $.ajax({
            url: "insertAkt.php",
            type: "POST",
            async: true, 
            data: { naziv:$("#naziv").val(),parcele:zemljiste,vrsta_rada:vrsta_rada,opis:$("#opis").val(),pocetak:$("#pocetak").val(),zavrsetak:$("#zavrsetak").val(),status:$("#status").val(),id_parcele:id_parcele,}, //your form data to post goes here as a json object
            dataType: "json",

            success: function(data) {
                $('#myModal').modal('hide');
				drawVisualization(); 
				console.log(data);  
            }, 
            error: function (data) {
            console.log(data)
            } 
      
    
});
    }
} );

});

Medjutim niti dobijam neku gresku niti se pokrene ajax? Sta bi moglo da bude problem ovde?

[mslavko]

Probao sam da integrisem i ovaj kod sa zvanicnog sajta:

$("#dodaj").click(function() {
$(function() {
$('#myFrom').parsley().subscribe('parsley:form:validate', function (formInstance) {
formInstance.submitEvent.preventDefault(); //stops normal form submit
if (formInstance.isValid() == true) { // check if form valid or not
 //code for ajax event here
var zemljiste = "";			
zemljiste = $("#parcele").select2("data").naziv;
var id_parcele = 0;
id_parcele = $("#parcele").select2("data").id;
var vrsta_rada = "";
vrsta_rada = $("#vrsta_rada").select2("data").text;

        $.ajax({
            url: "insertAkt.php",
            type: "POST",
            async: true, 
            data: { naziv:$("#naziv").val(),parcele:zemljiste,vrsta_rada:vrsta_rada,opis:$("#opis").val(),pocetak:$("#pocetak").val(),zavrsetak:$("#zavrsetak").val(),status:$("#status").val(),id_parcele:id_parcele,}, //your form data to post goes here as a json object
            dataType: "json",

            success: function(data) {
                $('#myModal').modal('hide');
				drawVisualization(); 
				console.log(data);  
            }, 
            error: function (data) {
            console.log(data)
            } 
      
    
});
}});
});
});

ali onda dobijam: Uncaught TypeError: Cannot read property 'subscribe' of undefined

[robi-bobi]

ne bih ti preporucio da koristis srpski za naziv promenjiva/komentare i slicno

recimo: resis jednog dana da sve outsorsujes nekom iz druge zemlje - kako ce se on snaci

[mslavko]

Sad gotovo Imacu na umu prilikom izrade sledeceg projekta

Inace kod sam resio ovako s tim da mi probem prave select2 polja koja ne mogu da validiram sa parsleyJS, pa sam uradio ovo:

$(function() { 
    $('#myForm').submit(function(e) { 
        e.preventDefault();
		
        if ( $(this).parsley('validate') ) {
			
			if ($("#parcele").select2("data")== null || $("#vrsta_rada").select2("data")== null) {
		$('#parerror').show();
		console.log('nema dalje');
	} else {
			
            var zemljiste = $("#parcele").select2("data").naziv;
	        var id_parcele = $("#parcele").select2("data").id;
            var vrsta_rada = $("#vrsta_rada").select2("data").text;


        $.ajax({
            url: "insertAkt.php",
            type: "POST",
            async: true, 
            data: { naziv:$("#naziv").val(),parcele:zemljiste,vrsta_rada:vrsta_rada,opis:$("#opis").val(),pocetak:$("#pocetak").val(),zavrsetak:$("#zavrsetak").val(),status:$("#status").val(),id_parcele:id_parcele,}, //your form data to post goes here as a json object
            dataType: "html",

            success: function(data) {
                $('#myModal').modal('hide');
				drawVisualization();
				console.log('USPEH'); 
				console.log(data);  
            }, 
            error: function (data) {
            console.log(data);
			console.log('GRESKA NEKA');
            } 
      
		
});      
        }
	}
    });
});

Ovo radi ali ne prikazuje u istom trenutku sve greske vec najpre one sa obicnim input poljima a nakon toga kada je sve uredu sanjima, prikaze i greske ako ih ima sa select2 poljima...

Ima li neko ideju kako ovo da resim? Kako da se sve prikaze od jednom?