Form submission skip/ignore AJAX function - php

Question

I'm new in php and I want to submit the form to func_login.php by AJAX, instead of using action="func_login.php". So I can handle the error on the same page when user fail to login.
but the AJAX is not working, the form submission skip/ignore the AJAX and direct to func_login php page. I don't know how to check/debug the error in AJAX. What's wrong is my code?
header.php
<form method="post" id="sign-in-form" action="func_login.php" enctype="multipart/form-data">
<div class="form-group">
<label for="mailInput">Email address</label>
<input type="email" class="form-control" id="mailInput2" aria-describedby="emailHelp" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="passInput">Password</label>
<input type="password" class="form-control" id="passInput2" placeholder="Password" name="password">
</div>
<button type="submit" class="border-0 bg-yellow btn-normal col mt-3" name="submit_login">Login</button>
</form>
func_login.php
<?php
if($_SERVER["REQUEST_METHOD"] == "POST") {
$myemail = mysqli_real_escape_string($connection, $_POST['email']);
$mypassword = mysqli_real_escape_string($connection, $_POST['password']);
$sql = "SELECT * FROM users WHERE email = '".$myemail."'";
$result = mysqli_query($connection, $sql);
$count = mysqli_num_rows($result);
if($count == 1) {
$row = mysqli_fetch_array($result,MYSQLI_ASSOC);
$salt = $row["salt"];
$db_encrypted_password = $row["password"];
if(password_verify($mypassword.$salt,$db_encrypted_password)){
echo "valid";
}else{
echo "invalid";
}
}
}
?>
js.php
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js" integrity="sha384-GqVMZRt5Gn7tB9D9q7ONtcp4gtHIUEW/yG7h98J7IpE3kpi+srfFyyB/04OV6pG0" crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.0/js/bootstrapValidator.min.js"></script>
<script>
//...Some BootstrapValidotor Code
$('#sign-in-form').on('submit',function(e){
e.preventDefault();
$.ajax({
url: '/func_login.php',
data: {
myemail=$("#mailInput2").val(),
mypassword=$("#passInput2").val();
},
dataType: 'json',
type: 'POST',
success: function(data) {
header("location: welcome.php");
alert("true");
},
error: function(data) {
alert("false");
//HANDLE ERROR HERE (POP OUT SOME ERROR DIALOG AND STAY ON SAME PAGE)
}
});
});
</script>

Answer 1

PHP Header won't work in jquery
try this
$('#sign-in-form').on('submit',function(e){
e.preventDefault();
var redireectUrl = 'welcome.php';
$.ajax({
url: 'func_login.php',
data: {
myemail=$("#mailInput2").val(),
mypassword=$("#passInput2").val();
},
dataType: 'json',
type: 'POST',
success: function(data) {
window.location.href = redireectUrl;
alert("true");
},
error: function(data) {
alert("false");
//HANDLE ERROR HERE (POP OUT SOME ERROR DIALOG AND STAY ON SAME PAGE)
}
});
});