То, что вы ищете, известно как AJAX, и в этом нет ничего сложного, особенно с jQuery! Проблема с отправкой данных в PHP для проверки заключается в том, что они немедленно отменят ваше требование «скорости» - форма должна будет зависнуть, пока Javascript отправляет запрос на сервер, чтобы проверить, все ли в порядке. По этой причине обычной практикой является проверка на как на стороне сервера, так и на стороне клиента. Заметьте, я говорю и то и другое, так как всегда проверяет данные на сервере.
Имея это в виду, давайте начнем! Я собираюсь показать, как проверять форму, не используя плагин проверки - для больших проектов, возможно, вы захотите рассмотреть его, но без него это достаточно просто:
<form id='myform' action='whatever.php' method='POST'>
First Name: <input type='text' name='first_name' class='required'><br>
Last Name: <input type='text' name='last_name'><br>
Email: <input type='text' name='email' class='required'><br>
Zip: <input type='text' name='zip'><br>
</form>
Итак, как вы видите, у нас есть имя и адрес электронной почты с классом требуемых, поэтому мы можем сделать это:
$(function() { // wait for the document to be loaded
$('#myform').submit(function() {
var valid = true; // assume everything is okay
// loop through each required field in this form
$('input.required', this).each(function() {
// if the field is empty, mark valid as false
// and add an error class
if($.trim($(this).val()) == '') {
valid = false;
$(this).addClass('error_input');
}
});
// additional validation for email, zip, perhaps
return valid; // if valid is true, continue form submission
});
});
Плагин Validation делает все это более аккуратным и понятным, но если вам просто нужно сделать быструю форму, нет ничего плохого в подходе выше. Это плохо, потому что вы должны иметь свои правила проверки в двух местах, но кроме выполнения Javascript на сервере или вызова сервера для данных, нет альтернативы, если вы хотите быстро сообщить своим пользователям, что что-то не так.
Надеюсь, это поможет.
РЕДАКТИРОВАТЬ : Кажется, я неправильно понял ваш вопрос. Если вы хотите передать данные формы в PHP-скрипт, проверить его значения и вернуть успех или ошибку обратно на страницу без загрузки, вы должны сделать что-то вроде этого:
$('#myform').submit(function() {
// allow submit if we've validated this already
if($(this).data('done')) return true;
var data = $(this).serialize(); // serialize the form data
// you could get the two variables below from the actual form (DRY)
// with $(this).attr('action'); and $(this).attr('method'); but I am
// not sure if that is what you want...
var action = 'validate.php'; // what script will process this
var method = 'POST'; // type of request to make
$.ajax({
type: method,
url: action,
data: data,
dataType: 'json',
success: function(d) {
if(d.code == 'success') {
// everything went alright, submit
$(this).data('done', true).submit();
} else {
alert('something is wrong!');
}
}
});
return false; // don't submit until we hear back from server
});
И тогда все, что нужно сделать вашему PHP-скрипту, это вернуть что-то вроде этого, используя json_encode
, чтобы указать, все ли в порядке:
// verify everything...
// data will be in $_POST just like a normal request
if($everythingOK) {
$code = 'success';
} else {
$code = 'error';
}
print json_encode(array('code' => $code));
exit;
Я не тестировал Javascript выше, но я уверен, что он должен быть верным. Я надеюсь , это помогает. :)