私の機能に検証フォームを追加するには？

Question

私はここで、モーダル内部の追加と更新のための動的フォームを持っています。私は、formvalidation.ioからのブートストラップformValidationを使用してformvalidationを追加しようとしています。私の機能に追加/更新します。問題は検証がうまくいかず、フォーム入力が空であってもデータベースに保存し続けることです。このformvalidationを自分の関数にどのように追加できますか？

ご了承ください。

$(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

希望これはあなたを助ける：

注：= "提出" またはID = submitボタンの属性を "提出" 名を使用しないでください。それ以外の場合は、検証 後に提出することはできません、フォーム、フォームの構造

<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> 

フォームValidationnスクリプトは、ここに行く：

<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>