Wie füge ich ein Validierungsformular in meine Funktion ein?

Question

Ich habe hier eine dynamische Form zum Hinzufügen und Aktualisieren innerhalb von Modal. Ich versuche, eine formvalidation mit Bootstrap FormValidation von formvalidation.io hinzufügen. in meine Funktion hinzufügen/aktualisieren. Das Problem war, dass die Validierung nicht gut funktioniert, sie wird weiterhin in meiner Datenbank gespeichert, auch wenn die Formulareingabe leer war. Wie kann ich diese Formvalidierung in meine Funktion einbauen?

Jede Hilfe wird zu schätzen wissen.

$(document).ready(function() { 

function add_division() 
{ 
    save_method = 'add'; 
    $('#form')[0].reset(); // reset form on modals 
    $('.form-group').removeClass('has-error'); // clear error class 
    $('.help-block').empty(); // clear error string 
    $('#modal_form').modal('show'); // show bootstrap modal 
    $('.modal-title').text('Add Division'); // Set Title to Bootstrap modal title 
} 

function edit_division(id) 
{ 
    save_method = 'update'; 
    $('#form')[0].reset(); // reset form on modals 
    $('.form-group').removeClass('has-error'); // clear error class 
    $('.help-block').empty(); // clear error string 

    //Ajax Load data from ajax 
    $.ajax({ 
     url : "<?php echo site_url('division/ajax_edit/')?>/" + id, 
     type: "GET", 
     dataType: "JSON", 
     success: function(data) 
     { 

      $('[name="id"]').val(data.id); 
      $('[name="divisionName"]').val(data.division_name); 
      //$('[name="divisionCode"]').val(data.division_code); 
      $('[name="divisionAcro"]').val(data.division_acro); 
      //$('[name="dob"]').datepicker('update',data.dob); 
      $('#modal_form').modal('show'); // show bootstrap modal when complete loaded 
      $('.modal-title').text('Edit Division'); // Set title to Bootstrap modal title 

     }, 
     error: function (jqXHR, textStatus, errorThrown) 
     { 
      alert('Error get data from ajax'); 
     } 
    }); 
} 

function reload_table() 
{ 
    table.ajax.reload(null,false); //reload datatable ajax 
} 

function save() 
{ 
    $('#btnSave').text('saving...'); //change button text 
    $('#btnSave').attr('disabled',true); //set button disable 
    var url; 

    if(save_method == 'add') { 
     url = "<?php echo site_url('division/ajax_add')?>"; 
    } else { 
     url = "<?php echo site_url('division/ajax_update')?>"; 
    } 

    // ajax adding data to database 
    $.ajax({ 
     url : url, 
     type: "POST", 
     data: $('#form').serialize(), 
     dataType: "JSON", 
     success: function(data) 
     { 

      if(data.status) //if success close modal and reload ajax table 
      { 
       $('#modal_form').modal('hide'); 
       reload_table(); 
      } 

      $('#btnSave').text('save'); //change button text 
      $('#btnSave').attr('disabled',false); //set button enable 


     }, 
     error: function (jqXHR, textStatus, errorThrown) 
     { 
      alert('Error adding/update data'); 
      $('#btnSave').text('save'); //change button text 
      $('#btnSave').attr('disabled',false); //set button enable 

     } 
    }); 
} 

$(document).ready(function() { 
    $('#form').formValidation({ 
     framework: 'bootstrap', 
     excluded: ':disabled', 
     icon: { 
      valid: 'glyphicon glyphicon-ok', 
      invalid: 'glyphicon glyphicon-remove', 
      validating: 'glyphicon glyphicon-refresh' 
     }, 
     fields: { 
      divisionName: { 
       validators: { 
        notEmpty: { 
         message: 'The username is required' 
        } 
       } 
      }, 
      divisionAcro: { 
       validators: { 
        notEmpty: { 
         message: 'The password is required' 
        } 
       } 
      } 
     } 
    }); 
}); 

Answer 1

Hoffnung das wird Ihnen helfen:

HINWEIS: NICHT Namen verwenden = "submit" oder id = "submit" -Attribut für den Absenden-Button. Andernfalls kann das Formular nicht nach der Validierung eingereicht werden unser Formular Struktur

<form id="myform"> 
    <div class="form-group"> 
    <input type="text" class="form-control" name="username" placeholder="Username" /></div> 

      <div class="form-group"> 
     <input type="password" class="form-control" name="password" placeholder="Password" /> 
      </div> 

     <!-- Do NOT use name="submit" or id="submit" for the Submit button --> 
     <button type="submit" class="btn btn-primary">Sign in</button> 
     </form> 

Ihr Formular Validationn Skript gehen hier:

<script> 
$(document).ready(function() { 
$('#myform').formValidation({ 
    framework: 'bootstrap', 
    icon: { 
     valid: 'glyphicon glyphicon-ok', 
     invalid: 'glyphicon glyphicon-remove', 
     validating: 'glyphicon glyphicon-refresh' 
    }, 
    fields: { 
     username: { 
      validators: { 
       notEmpty: { 
        message: 'The username is required' 
       }, 
       stringLength: { 
        min: 6, 
        max: 30, 
        message: 'The username must be more than 6 and less than 30 characters long' 
      }, 
     password: { 
      validators: { 
       notEmpty: { 
        message: 'The password is required' 
       } 
      } 
     } 
    } 
    }); 
}); 
</script>