Update text field border using Jquery and Ajax - php

Question

I'm trying to build a nice contact form, from where a user can send an e-mail. I have 3 input fields (1. name, 2. e-mail address, 3. telephone number).
<p>
<label for="name"><?php echo $label_name; ?></label>
<input type="text" name="name" id="name" size="30" />
</p>
<p>
<label for="email"><?php echo $label_email; ?></label>
<input type="text" name="email" id="email" size="30" />
</p>
<p>
<label for="tel"><?php echo $label_tel; ?></label>
<input type="text" name="tel" id="tel" size="30" />
</p>
The styling of the fields is made with the following JQUERY script:
$(document).ready(function() {
$('input[type="text"]').addClass("idle");
$('input[type="text"]').focus(function() {
$(this).removeClass("idle").addClass("focus");
this.select();
});
$('input[type="text"]').blur(function() {
$(this).removeClass("focus").addClass("idle");
});
});
Basically what I want is to style the fields with RED border, if the server would return false (using AJAX and PHP). For this, I searched the net and tried to implement a few scripts, but none worked. Here's what I tried:
$(document).ready(function() {
$('input[type="text"]').blur(function() {
$.ajax({url:"php/verify_field.php", success:function(result){
$(this).removeClass("idle").addClass(result);
}});
});
});
Thank you all for answering!
The reply of Omid Amraei seems to suit my project so far. But could we add some spice to all this script: I would like to transmit 2 parameters with the Jquery-Ajax script to the server-side PHP file:
the ID of the text input
the value of the text input.
All this with POST method!
This way I could parse the information in the PHP file using $_POST method and check first the ID, then run the verification criteria on the value of the input.
Many thanks for all!
Happy Saturday :)

Answer 1

Because using this in Ajax callback does not point to your input, so try this :
$(document).ready(function() {
$('input[type="text"]').blur(function() {
var $input = $(this);
$.ajax({url:"php/verify_field.php", success:function(result){
$input.removeClass("idle").addClass(result);
}});
});
});

Answer 2

this in this case isn't the textbox it's the ajax jquery object
Change the context to this.
$('input[type="text"]').blur(function() {
$.ajax({
url:"php/verify_field.php",
context: this
success:function(result){
$(this).removeClass("idle").addClass(result);
}});
});
docs:
contextObject
This object will be made the context of all Ajax-related callbacks. By default, the context is an object that represents the ajax settings used in the call ($.ajaxSettings merged with the settings passed to $.ajax).