Validation de formulaire avec jQuery et php

Question

J'ai un formulaire que je valide en utilisant jQuery et php. Donc, fondamentalement, si le php fait écho à "l'entrée doit être remplie", jQuery devrait mettre une bordure rouge autour de cette entrée, mais la chose ne fonctionne qu'après avoir soumis le formulaire deux fois.
J'explique: si je soumets avec entrée non remplie le fichier php fait écho "l'entrée doit être remplie", mais seulement si je presse à nouveau le bouton soumettre - l'entrée devient rouge.

$("form#maj_email").submit(function(){ 
var _data = $(this).serialize() 
$.ajax({ 
     type: 'POST', 
     url: 'validation_profil.php?var=maj_email', 
     beforeSend: function(){ 
      $("div#ajax_icon_maj_email").css({background:"url('http://localhost/www3/images/ajax_loader.gif')"}) 
      $("div#error_maj_email").hide() 
      if($("div#error_maj_email").text()=="Email syntaxe incorrecte"){ 
       $("form#maj_email input:[name=email]").css({border:"1px solid red"}) 
      } 

     }, 
     data:_data, 
     cache: false, 
     success: function(html){ 
      $('div#error_maj_email').html(html) 
      $("div#ajax_icon_maj_email").css({background:"url('none')"}) 
      $("div#error_maj_email").fadeIn() 
     } 
    }) 
}) 

Answer 1

Il semble que le formulaire soit soumis via le formulaire au lieu de votre appel ajax. Vous devez empêcher ce comportement pour que cela fonctionne:

$("form#maj_email").submit(function(e){ 
    var _data= $(this).serialize(); 
    $.ajax({ 
     type: 'POST', 
     url: 'validation_profil.php?var=maj_email', 
     beforeSend: function(){ 
      $("div#ajax_icon_maj_email").css({background:"url('http://localhost/www3/images/ajax_loader.gif')"}) 
      $("div#error_maj_email").hide() 
      if($("div#error_maj_email").text()=="Email syntaxe incorrecte"){ 
       $("form#maj_email input:[name=email]").css({border:"1px solid red"}) 
      } 
     }, 
     data:_data, 
     cache: false, 
     success: function(html){ 
      $('div#error_maj_email').html(html) 
      $("div#ajax_icon_maj_email").css({background:"url('none')"}) 
      $("div#error_maj_email").fadeIn() 

     } 
    }); 
    e.preventDefault(); 
    return false; 
})