Form Validation with Jquery with if statements - php

Question

I'm about to release my personal website but stucked with contact form validation. I want visitors to properly enter every field. While I'm doing this, I can go for both sides (either javascript or php validation). But the page is static HTML, only requests for mail.php for sending it. (Using PHPMAILER).
What I want is basically users to get notified in each field, then if they enter everything properly, I want them to submit the form and show the success message, without redirecting them. So here is my code and I appreciate for your help.
<form name="form1" id="contact-form" method="post" role="form">
<div class="col-md-8 col-pb-sm animate-box">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" name="name" required="required" class="form-control" placeholder="Your Name">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="email" required="required" pattern="^([a-zA-Z0-9_\-\.]+)#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$" name="email" class="form-control" placeholder="Email">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" required="required" name="message" id="" cols="30" rows="7" placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12">
<div class="col-md-3 form-group">
<input type="submit" name="submit" value="Send Message" class="btn btn-primary" formaction="mail.php" onsubmit="return ValidateLoginForm();">
</div>
<div class="col-md-7 col-md-offset-1 form-align" id="form_response"></div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<footer>
<div id="footer">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<p>
Copyright © 2020 Umut Pirinci.
</p>
</div>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- animateAnything -->
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/animateAnything.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Owl Carousel -->
<script src="js/owl.carousel.min.js"></script>
<!-- Magnific Popup -->
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
<!-- Main JS (Do not remove) -->
<script src="js/main.js"></script>
<script>
$(function() {
$('a[href*=\\#]:not([href=\\#])').on('click', function() {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
});
});
</script>
<script>
$(function () {
$('#contact-form').on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var url = "mail.php";
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data) {
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
if (messageAlert && messageText) {
$('#contact-form').find('.messages').html(alertBox);
$('#contact-form')[0].reset();
}
}
});
return false;
}
})
});
</script>
<script>
function ValidateLoginForm() {
var name = document.form1.name;
var message = document.form1.message;
var email = document.form1.email;
if (name.value == "") {
alert("Your name wasn't recognised.");
name.focus();
return false;
}
if (message.value == "") {
alert("Please enter your message.");
message.focus();
return false;
}
if (email.value == "") {
alert("Please enter your email address.");
email.focus();
return false;
}
else {
return true;
}
}
</script>
<script>
function form_sub() {
$('#form_response').html('Your form has been successfully sent!').fadeIn(1500).delay(5000).fadeOut(1500);
}
</script>
</body>
</html>

Answer 1

There are some things you need to do:
1- input with type submit you need to remove the onsubmit attribute as this attribute must be added on FORM tag only.
2- try to combine submission functions with only one.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form name="form1" id="contact-form" method="post" role="form">
<div class="col-md-8 col-pb-sm animate-box">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" name="name" required="required" class="form-control" placeholder="Your Name">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="email" required="required" pattern="^([a-zA-Z0-9_\-\.]+)#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$" name="email" class="form-control" placeholder="Email">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" required="required" name="message" id="" cols="30" rows="7" placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12">
<div class="col-md-3 form-group">
<input type="submit" name="submit" value="Send Message" class="btn btn-primary" formaction="mail.php">
</div>
<div class="col-md-7 col-md-offset-1 form-align" id="form_response"></div>
</div>
</div>
</div>
</form>
<script>
$('#contact-form').on('submit', function (e) {
ValidateLoginForm();
e.preventDefault();
return false;
})
function ValidateLoginForm() {
var name = document.form1.name;
var message = document.form1.message;
var email = document.form1.email;
if (name.value == "") {
alert("Your name wasn't recognised.");
name.focus();
return false;
}
if (message.value == "") {
alert("Please enter your message.");
message.focus();
return false;
}
if (email.value == "") {
alert("Please enter your email address.");
email.focus();
return false;
} else {
var url = "mail.php";
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data) {
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
if (messageAlert && messageText) {
$('#contact-form').find('.messages').html(alertBox);
$('#contact-form')[0].reset();
}
}
});
}
}
</script>