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

Question

我正在尝试使用 JS 进行表单验证，以在用户键入时显示反馈。但当然，当提交表单时，它是使用 PHP 发送的。我已经设法做到了所有这些，我现在唯一遇到的问题是，当提交表单时，页面会刷新，并且看不到我的“成功发送”消息。这是我的代码，非常感谢！ :D

HTML 表单

<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>

JavaScript (jQuery)

$(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;

    }
});

});

PHP

PHP 代码非常简单，我无法在此处显示它，但它只是获取表单上的 $_POST 值并使用 email() 发送它们；

谢谢大家

Answer 1

与其返回 true ，不如将其替换为对同一脚本的 Ajax 发布请求，成功时显示您希望的消息。