Попытка использовать PHP и Ajax для проверки формы, не работает

#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 все равно сделает этот заголовок для вас. Попробуйте и посмотрите, работает ли это (я отредактировал пример)