Posiadam formularz:
<div id="articles">
...
<div class="contact">
<form method="post" action="">
<div style="clear:both;"><input class="text" type="text" name="name_surname" value="Imię i Nazwisko" /></div>
<div style="clear:both;"><input class="text" type="text" name="email" value="Email" /></div>
<div style="clear:both;"><input class="text" type="text" name="phone" value="Telefon" /></div>
<div style="clear:both;"><input class="text" type="text" name="title" value="Tytuł wiadomości" /></div>
<div style="clear:both;"><textarea name="description">Treść wiadomości...</textarea></div>
<div style="clear:both;"><input class="submit" type="submit" value="Wyślij" /></div>
</form>
</div>
</div>
Do którego napisałem skrypt:
function validateEmail(str) {
rg1 = new RegExp('^[a-zA-Z0-9\-\_\.]+@[a-zA-Z0-9\-]+\.[a-zA-Z]{2,3}$');
rg2 = new RegExp('^[a-zA-Z0-9\-\_\.]+@[a-zA-Z0-9\-]+\.[a-zA-Z\.]{3,9}$');
if(rg1.test(str) || rg2.test(str))
return true;
return false;
}
function validatePhone(str) {
rg = new RegExp('^[0-9]{9,9}$');
if(rg.test(str))
return true;
return false;
}
function validateString(str) {
rg = new RegExp('^[a-zA-ZęóąśłżźćńĘÓĄŚŁŻŹŃ\ ]{3,255}$');
if(rg.test(str))
return true;
return false;
}
$(document).ready(function(){
var name = 'Imię i Nazwisko';
var email = 'Email';
var phone = 'Telefon';
var subject = 'Tytuł wiadomości';
var desc = 'Treść wiadomości...';
$('#articles input[type=submit]').attr('disabled', 'disabled');
$('#articles input[type=text]', this).hover(function(){
$(this).focus(function(){
if($(this).val() == name)
$(this).val('');
else if($(this).val() == email)
$(this).val('');
else if($(this).val() == phone)
$(this).val('');
else if($(this).val() == subject)
$(this).val('');
$(this).keyup(function(){
if(!validateString($('#articles input[name=name_surname]').val()))
$(this).css('border', '1px solid #ff0000');
else
$(this).css('border', '1px solid #00ff00');
if(!validateEmail($('#articles input[name=email]').val()))
$(this).css('border', '1px solid #ff0000');
else
$(this).css('border', '1px solid #00ff00');
if(!validatePhone($('#articles input[name=phone]').val()))
$(this).css('border', '1px solid #ff0000');
else
$(this).css('border', '1px solid #00ff00');
if(!validateString($('#articles input[name=title]').val()))
$(this).css('border', '1px solid #ff0000');
else
$(this).css('border', '1px solid #00ff00');
});
});
},
function(){
$(this).focusout(function(){
if($('#articles input[name=name_surname]').val() == '') {
$('#articles input[name=name_surname]').val(name);
$('#articles input[name=name_surname]').css('border', '1px solid #595959');
}
if($('#articles input[name=email]').val() == '') {
$('#articles input[name=email]').val(email);
$('#articles input[name=email]').css('border', '1px solid #595959');
}
if($('#articles input[name=phone]').val() == '') {
$('#articles input[name=phone]').val(phone);
$('#articles input[name=phone]').css('border', '1px solid #595959');
}
if($('#articles input[name=title]').val() == '') {
$('#articles input[name=title]').val(subject);
$('#articles input[name=title]').css('border', '1px solid #595959');
}
});
});
});
Niestety pole #articles input[name=name_surname] zaczyna być poprawnie walidowane dopiero po wypełnieniu pola #articles input[name=title].
Nie mogę dojść za chusteczkę czym jest to spowodowane @_@