Register modal

<div class="modal-header">

  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <div class="text-center error-messages"></div>

  <?php echo form_open('', 'class="customForm" id="userRegister"'); ?>
  <input type="hidden" name="name" value="">
  <div class="row">
    <div class="col-lg">
      <div class="form-group input-group-sm">
        <select name="userGroupInput" id="userGroupInput" class="form-control" required>
          <option value="">-- Account type --</option>
          <option value="1">Group</option>
          <option value="2">Individual</option>
        </select>
      </div>
    </div>
    <div class="col-lg mx-0">
      <div class="form-group input-group-sm">
        <select class="form-control" name="cityInput" required>
          <option value="">City</option>
          <?php foreach($cities as $city) : ?>
            <option value="<?php echo $city['city_id'] ?>"><?php echo $city['city_name'] ?></option>
          <?php endforeach; ?>
        </select>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg">
      <div class="form-group input-group-sm">
        <input type="text" class="form-control" name="screenNameInput" id="screenNameInput" placeholder="Screen name" autocomplete="off" required>
      </div>
    </div>
    <div class="col-lg">
      <div class="form-group input-group-sm">
        <input type="number" class="form-control" name="phoneInput" id="phoneInput" placeholder="Phone number" autocomplete="off" required>
      </div>
    </div>
  </div>
  <div class="row moreInfo hidden">
    <div class="col-lg">
      <div class="form-group input-group-sm">
        <input type="text" class="form-control" name="websiteInput" id="websiteInput" placeholder="Website url">
      </div>
    </div>

  </div>

  <div class="row">
    <div class="col-md">
      <div class="form-group input-group-sm">
        <input type="email" class="form-control" name="email" id="email" placeholder="Your email" autocomplete="off" required>
        <small class="text-danger text-center"><span id="email_result"></span></small>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg">
      <div class="form-group input-group-sm password">
        <input type="password" class="form-control" name="passInput" minlength="4" id="passInput" placeholder="Password" autocomplete="off" required>
      </div>
    </div>
    <div class="col-lg">
      <div class="form-group input-group-sm password">
        <input type="password" class="form-control" name="passInput2" minlength="4" id="passInput2" equalTo="#passInput" placeholder="Password verify" autocomplete="off" required>
      </div>
    </div>
  </div>
  <div class="col-md-12">
    <div class="form-group input-group-sm form-check">
      <input type="checkbox" class="form-check-input" id="show_pass">
      <label class="form-check-label" for="show_pass">Show pass</label>
    </div>
  </div>
  <div class="row">
    <div class="col-4 mt-3">
      <button type="reset" form="userRegister" class="btn btn-danger btn-sm btn-block"><i class="fas fa-broom fa-sm"></i> </button>
    </div>
    <div class="col mt-3 pl-0">
      <button type="submit" class="btn btn-custom btn-sm btn-block ">
        <i class="fas fa-pencil-alt"></i> <i class="fas fa-spinner fa-spin hidden"></i> Register
      </button>
    </div>
  </div>
  <?php echo form_close() ?>
</div>
<div class="modal-footer">
</div>

<script>
  $("#show_pass").change(function(event) {
    event.preventDefault();
    if($('.password input').attr("type") == "text"){
      $('.password input').attr('type', 'password');
    } else if ( $('.password input').attr("type") == "password" ){
      $('.password input').attr('type', 'text');
    }
  });

  $('#userRegister').bootstrapValidator({
    fields: {
      screenNameInput: {
        validators: {
          stringLength: {
            min: 4,
            message: '<div style="color: red">Enter at least 4 characters</div>'
          },
          notEmpty: {
            message: '<div style="color: red">Please enter a valid name</div>'
          }
        }
      },

      passInput: {
        validators: {
          stringLength:{
            min: 4,
            message: '<div style="color: red">Enter at least 4 characters</div>'
          },
          notEmpty: {
            message: '<div style="color: red">Please enter a valid pass</div>'
          }
        }
      },

      passInput2: {
        validators: {
          stringLength:{
            min: 4,
            message: '<div style="color: red">Enter at least 4 characters</div>'
          },
          notEmpty: {
            message: '<div style="color: red">Please enter a valid pass</div>'
          },
          identical: {
            field: "passInput",
            message: '<div style="color: red">Passwords do not match</div>'
          }
        }
      }
    }
  });


  $('#email').change(function(a){
    a.preventDefault();
    var email = $('#email').val();

    $.ajax({
      url: 'users/check_email_exist',
      type: "post",
      data: {email:email},
      success: function(data){
        $('#email_result').html(data);

      }
    });

    setTimeout(function(){
      $('#email_result').fadeOut('slow');
    }, 5000);
  });

  $('#userRegister').on('submit', function(e){
    e.preventDefault();
    var form = $(this);
    $(this).find(':submit').attr('disabled', true);
    $(this).find('.fa-spin').removeClass('hidden');
    $(this).find('.fa-pencil-alt').addClass('hidden');

    $.ajax({
      url: 'users/create_user',
      type: "POST",
      data: form.serialize(),
      dataType: "json",
      success: function(data){
        if(data.status == 'success') {
          window.location.href = 'pets';
        } else if (data.status == 'failed' ) {
          $('.error-messages').html(data.message);
          $('.error-messages').fadeIn('fast');
        }
      }
    });

    setTimeout(function(){
      $(form).find(':submit').attr('disabled', false);
      $(form).find('.fa-spin').addClass('hidden');
      $(form).find('.fa-pencil-alt').removeClass('hidden');
      $('.error-messages').fadeOut('fast');
    }, 2000);
  });

  $('#userGroupInput').change(function(){
    if ( $(this).val() == 1 ) {
      $('.moreInfo').removeClass('hidden');
    } else if ( $(this).val() == 2 ) {
      $('.moreInfo').addClass('hidden');
    }
  });
</script>