#javascript #php #ajax #forms #validation
#javascript #php #ajax #формы #проверка
Вопрос:
Я пытался выяснить, как выполнить проверку формы php и использовать ajax для получения результатов, поэтому мне не нужно обновлять страницу. Я новичок в ajax и испытываю трудности. Это мой registration.php форма
<h1>Sign Up</h1>
<form id="registration_form" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="first_name">First name</label>
<input type="text" class="form-control" id="first_name" name="first_name" onblur="validate('first_name', this.value)" placeholder="First name">
</div>
</div>
<div id="textFirstName" class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="last_name">Last name</label>
<input type="text" class="form-control" id="last_name" name="last_name" onblur="validate('last_name', this.value)" placeholder="Last name">
</div>
</div>
<div id="textLastName" class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="email1">Email address</label>
<input type="email" class="form-control" id="email1" name="email1" onblur="validate('email1', this.value)" placeholder="Email">
</div>
</div>
<div id="textEmail" class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="Password1">Password</label>
<input type="password" class="form-control" id="password1" name="password1" onblur="validate('password1', this.value)" placeholder="Password">
</div>
</div>
<div id="textPass1" class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="Password2">Confirm Password</label>
<input type="password" class="form-control" id="password2" name="password2" onblur="validate('password2', this.value)" placeholder="Retype Password">
</div>
</div>
<div id="textPass2" class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6">
<button type="submit" class="btn btn-default">Submit</button>
</div>
<div class="col-md-6">
amp;nbsp;
</div>
</div>
</form>
Это мой скрипт проверки php:
<?php
$value = $_POST['query'];
$formfield = $_POST['field'];
// Check Valid or Invalid first name when user enters user name in username input field.
if ($formfield == "first_name") {
if (strlen($value) < 1) {
echo "<p style="color:red">Error: Must be 1 letters</p>";
} else {
echo "<p style="color:green">Valid</p>";
$_SESSION['reg']['first_name'] = $value;
}
}
if ($formfield == "last_name") {
if (strlen($value) < 1) {
echo "<p style="color:red">Error: Must be 1 letters</p>";
} else {
echo "<p style="color:green">Valid</p>";
$_SESSION['reg']['last_name'] = $value;
}
}
// Check Valid or Invalid password when user enters password in password input field.
if ($formfield == "password1") {
if (strlen($value) < 8) {
echo "<p style="color:red">Error: Password too short. Must be at least 8 characters long, contain one lower case letter, one uppercase letter, and one number.</p>";
}
else if (!preg_match("#.*^(?=.{8,20})(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).*$#", $value)){
echo "<p style="color:red">Error: Your password must be at least 8 characters long, contain one lower case letter, one uppercase letter, and one number.</p>";
}
else {
echo "<p style="color:green">Your password is good.</p>";
$_SESSION['reg']['password1'] = $value;
}
}
if ($formfield == "password2") {
if (strlen($value) < 8) {
echo "<p style="color:red">Error: Password too short. Must be at least 8 characters long, contain one lower case letter, one uppercase letter, and one number.</p>";
}
else if (!preg_match("#.*^(?=.{8,20})(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).*$#", $value)){
echo "<p style="color:red">Error: Your password must be at least 8 characters long, contain one lower case letter, one uppercase letter, and one number.</p>";
}
else if ($_SESSION['password1'] != $value) {
echo "<p style="color:red">Error: Your passwords don't match.</p>";
}
else {
echo "<p style="color:green">Your password is good.</p>";
}
}
// Check Valid or Invalid email when user enters email in email input field.
if ($formfield == "email1") {
if (!preg_match("/([w-] @[w-] .[w-] )/", $value)) {
echo "<p style="color:red">Invalid email.</p>";
} else {
echo "<p style="color:red">Valid</p>";
$_SESSION['reg']['email1'] = $value;
}
}
?>
И это мой файл javascript с ajax:
function checkForm() {
// Fetching values from all input fields and storing them in variables.
var first_name = document.getElementById("first_name").value;
var last_name = document.getElementById("last_name").value;
var password1 = document.getElementById("password1").value;
var password2 = document.getElementById("password2").value;
var email = document.getElementById("email1").value;
//Check input Fields Should not be blanks.
if (first_name == '' || last_name == '' || password1 == '' || password2 == '' || email1 == '') {
alert("Fill All Fields");
} else {
//Notifying error fields
var textFirstName = document.getElementById("first_name");
var textLastName = document.getElementById("last_name");
var textPass1 = document.getElementById("password1");
var textPass2 = document.getElementById("password2");
var textEmail = document.getElementById("email1");
//Check All Values/Informations Filled by User are Valid Or Not.If All Fields Are invalid Then Generate alert.
str1 = textFirstName.innerHTML; str2 = textLastName.innerHTML; str3 = textPass1.innerHTML; str4 = textPass2.innerHTML; str5 = textEmail.innerHTML;
if (str1.substr(0,4) == 'Error' || str2.substr(0,4) == 'Error' || str3.substr(0,4) == 'Error' || str4.substr(0,4) == 'Error' || str5.substr(0,4) == 'Error') {
alert("Fill Valid Information");
} else {
//Submit Form When All values are valid.
document.getElementById("myForm").submit();
}
}
}
// AJAX code to check input field values when onblur event triggerd.
function validate(field, query) {
var xmlhttp;
if (window.XMLHttpRequest) { // for IE7 , Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState != 4 amp;amp; xmlhttp.status == 200) {
document.getElementById(field).innerHTML = "Validating..";
} else if (xmlhttp.readyState == 4 amp;amp; xmlhttp.status == 200) {
document.getElementById(field).innerHTML = xmlhttp.responseText;
} else {
document.getElementById(field).innerHTML = "Error Occurred. <a href='index.php'>Reload Or Try Again</a> the page.";
}
}
xmlhttp.open("POST", "lib/validate_registration_form.php?field=" field "amp;query=" query, false);
xmlhttp.send();
}
Когда я ввожу значения в форму, ответа нет, независимо от того, ввожу ли я действительную или неверную информацию. Я уверен, что проблема заключается в файле JS с ajax, но я не знаю, что это такое. Буду признателен за любую помощь.
Комментарии:
1. В вашем примере мы не видим, когда вызывается или привязывается вызов
validate()
… вас АЯКСОМ никогда не называли ?2. Я забыл добавить onblurs к полям. Я сделаю это сейчас, и если это все еще не сработает, я повторно загружу форму
3. Я обновил форму, чтобы добавить события onblur в каждое из полей формы, но это никак не повлияло. Проверка по-прежнему не выполняется
Ответ №1:
У вас есть две проблемы :
Во-первых, в вашем html / javascript onblur
событие вызывает
validate('first_name', this.value)
Но нет элемента HTML с ID = first_name
, вызывается ваш div textFirstName
Поэтому вы должны изменить свое onblur
значение с правильным значением параметра, например
validate('textFirstName', this.value)
Затем вы используете POST
метод для своего ajax, но отправляете свой параметр в URL, который хранится в $_GET
массиве
Изменить :
<?php
$value = $_POST['query'];
$formfield = $_POST['field'];
Для :
<?php
$value = $_GET['query'];
$formfield = $_GET['field'];
Последнее замечание: возможно, вы захотите использовать isset($_GET['query'])
в своем php-скрипте, чтобы избежать уведомления о сообщении undefined
или, по крайней мере, способ отладки :
if (!isset($_GET['query']))
{
die ("missing parameter, report to admin that he should debug the JS");
}
Редактировать
Следуя вашему комментарию, вот как отправить данные POST
var params = "field=" field "amp;query=" query;
xmlhttp.open("POST", "lib/validate_registration_form.php", false);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.send(params);
Комментарии:
1. Спасибо за ваш ответ! Одна вещь. Я действительно хочу отправлять материалы по почте, потому что пароль проверяется, и я бы предпочел, чтобы он не был частью URL. В конце JS-скрипта у меня есть строка «xmlhttp.open(«POST», «lib/validate_registration_form.php?field=» field «amp;query=» query, false);»
2. Я не знаю, как редактировать комментарии, но выше я нажал return, прежде чем закончил. Я подумал, что эта строка заставляет ее отправлять сообщения по почте. Как мне изменить что-то, чтобы убедиться, что значения отправляются по почте?
3. когда я изменил свою форму js, чтобы сделать сообщение, как вы показали, я получил ошибки в консоли: отказался установить небезопасный заголовок «Content-length»
4. Затем удалите строку с «content-length», похоже, новый RFC об AJAX все равно сделает этот заголовок для вас. Попробуйте и посмотрите, работает ли это (я отредактировал пример)