form validation with jQuery and php

Question

i have a form with im validating using jquery and php so basically if the php echoes "input must be filled " the jQuery should put a red border around that input, but the thing works only after submitting the form two times, i explain: if i submit with input unfilled the php file echoes "input must be filled ", but only if i press again the submit button the input goes red.

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

It looks like the form is being submitted via the form instead of your ajax call. You need to prevent this behavior for this to work:

$("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;
})