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の値だと（電子メールを使用してそれらを送信し得る方法をいくつかの本当に簡単です。

おかげでみんな

Answer 1

代わりに成功した場合に、同じスクリプトへのAjax POSTリクエストでそれを置き換えるtrueを返すのをご希望のメッセージを表示します。