<div class="modal-header bg-dark">
  <h4 class="modal-title font-weight-light">Registrar nueva Membresia</h4>
  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<form action="" id="FormRegMembresia">
  <div class="modal-body row">
    <div class="form-group col-md-12">
      <label for="">Descripción</label>
      <input type="text" class="form-control" id="descripcion" name="descripcion">
    </div>
    <div class="form-group col-md-12">
      <label for="">Costo</label>
      <input type="number" class="form-control" id="costo" name="costo">
    </div>
 
  </div>
  <div class="modal-footer justify-content-between">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
    <button type="submit" class="btn btn-primary" id="guardar">Guardar</button>
  </div>
</form>


<script>
  $(function() {
    $.validator.setDefaults({
      submitHandler: function() {
        RegMembresia()
      }
    })
    $(document).ready(function() {
      $("#FormRegMembresia").validate({
        rules: {
          descripcion: {
            required: true,
            minlength: 3
          },
          costo: {
            required: true,
          }
        },
        errorElement: 'span',
        errorPlacement: function(error, element) {
          error.addClass('invalid-feedback')
          element.closest('.form-group').append(error)
        },

        highlight: function(element, errorClass, validClass) {
          $(element).addClass('is-invalid')
        },

        unhighlight: function(element, errorClass, validClass) {
          $(element).removeClass('is-invalid')
        }

      })
    })

  })

  $('.select2bs4').select2({
    theme: 'bootstrap4'
  })
</script>