HTML 5 Validation and call function javascript

Question

Hello i create form and send data with ajax, but required html 5 cannot running when textbox empty.

I want to before click submit/call ajax, html 5 required running. How i can fix my code ?

Whether html5 required could run together with ajax ?

this is my code

<form class='form-horizontal' action="" role='form' method="post" id="f1" name="f1"  >      
    <div class="form-body">
        <input class='form-control' type=text name="category_code"  required>  <br/>   
        <input class='form-control' type=text name="category_name" required>   <br/>    
        <textarea name="category_description" class='form-control' ></textarea>  <br/>    
        <button type="button" class="btn default" onclick="location.href='<?php echo base_url()?>category'">Back</button>
        &nbsp;<button type="reset" class="btn red" >Reset</button>
        &nbsp;<button onclick="do_act('f1','category/do_add','category','Add Category','Are You Sure ?','info');"  type="button" class="btn blue" >Submit</button>
    </div>
</form>
<script>
    function do_act(form_id,act_controller,after_controller,header_text,content_text,type_icon){
        swal({
          title: header_text,
          text: content_text,
          type: type_icon,      // warning,info,success,error
          showCancelButton: true,
          closeOnConfirm: false,
          showLoaderOnConfirm: true,
        },function(){
            $.ajax({
                url: '<?php echo base_url() ?>'+act_controller, 
                type: 'POST',
                data: new FormData($('#'+form_id)[0]),  // Form ID
                processData: false,
                contentType: false,
                success: function(data) {
                    if(data=="OK")
                    {
                        swal({
                            title: 'Success',
                            type: 'success',
                            showCancelButton: false,
                            closeOnConfirm: true,
                            showLoaderOnConfirm: false,
                          },function(){
                                $('#'+form_id)[0].reset();  // Form ID
                                if(after!=''){  window.location = '<?php echo base_url() ?>'+after_controller; } 
                          });
                    } 
                    else if(data=="NOT_LOGIN")
                    {
                          swal({
                            title: 'Error',
                            text: "You Must Login Again",
                            type: 'error',
                            showCancelButton: false,
                            closeOnConfirm: false,
                            showLoaderOnConfirm: false,
                          },function(){ window.location = '<?php echo base_url() ?>';  });
                    }
                    else
                    {
                        swal({
                            title: 'Error',
                            text: data,
                            type: 'error',
                            showCancelButton: false,
                            closeOnConfirm: false,
                            showLoaderOnConfirm: false,
                          });
                    }
                }
            });
        });   
    }
</script>

Helpm me thank's