使用JavaScript和PHP进行表单验证（提交时不刷新页面）

我试图用JS做一个表单验证，在用户输入时显示反馈。当然，当提交表单时，它是使用PHP发送的。我已经设法做到了这一点。我现在唯一的问题是，当提交表单时，页面会刷新，并且无法看到我的“成功发送”消息。这是我的代码，非常感谢！：D

HTML表单

电子邮件

名义

阿松托

门萨耶

显示提交反馈的字段

JavaScript（jQuery）

$（函数（）{
$（“.errorEmail”）.hide（）；
$（“.errorName”）.hide（）；
$（“.errorAsunto”）.hide（）；
$（“.errorMensaje”）.hide（）；
$（“.enviado”）.hide（）；
$（“.noEnviado”）.hide（）；
var错误=错误；
$（'#email'）.keyup（函数（）{
检查电子邮件（）；
});
$（'#name'）.keyup（函数（）{
checkName（）；
});
$（'#asunto'）.keyup（函数（）{
checkAsunto（）；
});
$（'#mensaje'）.keyup（函数（）{
checkMensaje（）；
});
函数checkEmail（）{
var email=$（'#email'）.val（）；
错误=错误；
变量re=/^（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\，；：\s@“]+）*）（“+”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]124；（[a-zA Z-0-9]++\]；
如果（重新测试（电子邮件））{
$（'.errorEmail'）.hide（）；
}
否则{
$（'.errorEmail'）.html（“Ingree un correo electroónico válido.”）
$（'.errorEmail'）.show（）；
错误=真；
}
}
函数checkName（）{
var name=$（'#name'）.val（）.length；
var-minName=5；
var cantidad=-（名称-minName）；
错误=错误；
如果（名称<5）{
$（'.errorName'）.html（“Por-favorite-ingresu-nombre.Mínimo”+cantidad+“caracteres”）；
$（'.errorName'）.show（）；
错误=真；
}
否则{
$（'.errorName'）.hide（）；
}
}
函数checkAsunto（）{
var asunto=$（'#asunto'）.val（）.length；
var minAsunto=10；
var cantidad=-（asunto-minAsunto）；
错误=错误；
如果（asunto不要返回true，而是将其替换为对同一脚本的Ajax post请求，在成功时显示您想要的消息。
不要回发到同一页面。如果您想保持在同一页面上，请使用Ajax。我对此投反对票，因为您可以选择的解决方案太多了。也许您可以从众多解决方案中选择一个来启发我解决方案，但无论如何谢谢。不。这将涉及太多的代码，与您提出问题的方式无关。这是一个解决方案。您的问题太广泛。堆栈溢出不是用来外包广泛的解决方案的。您必须提供一个具体的问题。我已经给了您一个关于您应该做什么的提示。您如果你被卡住了，这个问题还不存在，那么你可以删除这个问题，然后再转发一些更具体的内容。有人用我的评论来回答，而你选择它作为答案，这也有点烦人。这不是答案。好吧，谢谢。我会试试看，我对AJAX没有太多经验t、 谢谢：当我回家后，我会帮你更多我非常感激！谢谢
<form method="post" id="emailForm" action="?">
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" placeholder="ejemplo@gmail.com" class="form-control" name="email" id="email"/>
                 <p class="alert alert-danger errorEmail"></p>
    </div>
    <div class="form-group">
        <label for="name">Nombre</label>
        <input type="text" placeholder="María Rodriguez" class="form-control" name="name" id="name"/>
                 <p class="alert alert-danger errorName"></p>
    </div>
    <div class="form-group">
        <label for="asunto">Asunto</label>
        <input type="text" placeholder="Garantía producto" class="form-control" name="asunto" id="asunto" /><span class="badge badgeA"></span>
                 <p class="alert alert-danger errorAsunto"></p>
    </div>
    <div class="form-group">
        <label for="mensaje">Mensaje</label>
        <textarea placeholder="Ingrese su mensaje aquí, trate de ser lo más claro y conciso posible." name="mensaje" id="mensaje" class="form-control" rows="7"></textarea><span class="badge badgeM"></span>
                 <p class="alert alert-danger errorMensaje"></p>
    </div>

    <input type="submit" name="submit" id="submit" class="btn btn-success" value="Enviar!"/>

<div class="alert alert-success enviado">
</div>
<div class="alert alert-danger noEnviado">
</div>

$(function() {

$(".errorEmail").hide();
$(".errorName").hide();
$(".errorAsunto").hide();
$(".errorMensaje").hide();
$(".enviado").hide();
$(".noEnviado").hide();

var error = false;

$('#email').keyup(function(){
    checkEmail();
});

$('#name').keyup(function(){
    checkName();
});

$('#asunto').keyup(function(){
    checkAsunto();
});

$('#mensaje').keyup(function(){
    checkMensaje();
});

function checkEmail() {
    var email = $('#email').val();
    error = false;
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if(re.test(email)) {
        $('.errorEmail').hide();
    }
    else {
        $('.errorEmail').html("Ingrese un correo electrónico válido.")
        $('.errorEmail').show();
        error = true;
    }

}

function checkName() {
    var name = $('#name').val().length;
    var minName = 5;
    var cantidad = - (name - minName);
    error = false;
    if (name < 5){
        $('.errorName').html("Por favor ingrese su nombre. <b>Mínimo " + cantidad + " caracteres.</b>");
        $('.errorName').show();
        error = true;
    }
    else {
        $('.errorName').hide();
    }
}

function checkAsunto() {
    var asunto = $('#asunto').val().length;
    var minAsunto = 10;
    var cantidad = - (asunto - minAsunto);
    error = false;
    if (asunto <10){
        $('.errorAsunto').html("Por favor ingrese un asunto.<b> Mínimo " + cantidad + " caracteres.</b>");
        $('.errorAsunto').show();
        error = true;
    }
    else {
        $('.errorAsunto').hide();
    }
}

function checkMensaje() {
    var email = $('#mensaje').val().length;
    var minMensaje = 20;
    var cantidad = - (email - minMensaje);
    error = false;
    if (email < 20){
        $('.errorMensaje').html("Por favor ingrese un mensaje. <b> Mínimo " + cantidad + " caracteres. </b>");
        $('.errorMensaje').show();
        error = true;
    }
    else {
        $('.errorMensaje').hide();
    }
}

$('#emailForm').submit( function() {            
    checkEmail();
    checkName();
    checkAsunto();
    checkMensaje();

    if(error === false) {
        $('.enviado').html("Mensaje enviado exitosamente");
        $('.enviado').fadeIn(500);
        $('.noEnviado').fadeOut(500);
        return true;


    } else {
        $('.noEnviado').html("Ups... hubo un problema");
        $('.noEnviado').fadeIn(500);
        $('.enviado').fadeOut(500);
        return false;

    }
});