required attribute form input in ajax not working - php

Question

attribute required not working when I submitted data with Ajax if I change on click with submitting data not insert, just success insert with on click, this my code. this is in form wizard #jquery #Codeigniter
<form action="#">
<div class="form-group row">
<div class="col-sm-7">
<h3 class="wizard-title">Data Surat</h3>
</div>
</div>
<div class="form-group row">
<label class="col-12 col-sm-3 col-form-label text-left text-sm-right">Nomor</label>
<div class="col-12 col-sm-8 col-lg-6">
<input class="form-control" type="text" required placeholder="Nomor Surat" id="nomor" name="nomor">
</div>
</div>
<div class="form-group row">
<label class="col-12 col-sm-3 col-form-label text-left text-sm-right">Tanggal</label>
<div class="col-12 col-sm-8 col-lg-6">
<input class="form-control" type="date" required name="tanggal" id="tanggal" placeholder="Tanggal">
</div>
</div>
<div class="form-group row">
<label class="col-12 col-sm-3 col-form-label text-left text-sm-right">Tujuan</label>
<div class="col-12 col-sm-8 col-lg-6">
<Textarea class="form-control" required name="tujuan" id="tujuan" ></Textarea>
</div>
</div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
<!-- <input type="button" onclick="myFunction()" class="btn btn-secondary btn-space" value="Reset"> -->
<button class="btn btn-primary btn-space wizard-next" id="btn_save" type="submit" data-wizard="#wizard1">Selanjutnya</button>
</div>
</div>
</form>
this is my script ajax
<script type="text/javascript">
$(document).ready(function() {
//Save product
$('#btn_save').on('click', function(e) {
e.preventDefault();
if(! $form.valid()) return false;
var $form = $(this);
var nomor = $('#nomor').val();
var tanggal = $('#tanggal').val();
var tujuan = $('#tujuan').val();
$.ajax({
type: "POST",
url: "<?php echo site_url('users/bendahara/sp/save')?>",
dataType: "JSON",
data: {
nomor: nomor,
tanggal: tanggal,
tujuan: tujuan
},
success: function(data) {
$('[name="nomor"]').val("");
$('[name="tanggal"]').val("");
$('[name="tujuan"]').val("");
// show_product();
}
});
return false;
});
});
</script>
Maybe you know
required is working