Validation in PHP and Javascript is only partially effective

Question

Validation in PHP and Javascript is only partially effective

I encountered an issue with my form validation setup that utilizes JavaScript, Ajax, and PHP. While the errors are correctly displayed when the form is filled incorrectly, I am unable to submit the form even if there are no errors. Clicking the submit button simply keeps the page static without any action. In the console, I received an error upon submission: Failed to load file:///C:/Users/ilona/Desktop/BootstrapLandinPage/send.php: Cross origin requests are only supported for specific protocol schemes. My project runs on XAMPP.

Below is a snippet of my HTML code:

<section class="inspiration" id="three">
            <div class="overlay">
                <div class="container">
                    <div class="row">
                        <article class="col-md-12 text-center">
                            <div class="intermediate-container">
                                <div class="heading">
                                    <h2>Have a question? Contact me.</h2>
                                </div>
                                 ... <!-- Truncated for brevity -->
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="js/validateform.js" ></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" ></script>

My script in validateform.js:

..

This is how my send.php looks like:

$error_msg = array();
$success_msg = array();
$data = '';
... <!-- Omitted for conciseness -->


function test_input($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
}

javascript php jquery ajax

Answer 1

Answer №1

Opening the file directly may not work unless configured in Apache. The file appears to have no connection to the XAMPP web server.

To resolve this issue, follow these steps:

Copy the BootstrapLandinPage directory to c:/xampp/htdocs
Add a virtual host to XAMPP

Edit the file located at

C:\xampp\apache\conf\extra\httpd-vhosts.conf

and insert the following snippet, customized to your setup.

<VirtualHost 127.0.0.2:80>
    ServerName playground.localhost
    ServerAlias playground.localhost
    DocumentRoot c:/xampp/htdocs/your_website
    <Directory "c:/xampp/htdocs/your_website/">
        Options +Indexes +Includes +FollowSymLinks +MultiViews
        AllowOverride All
        Require local
    </Directory>
</VirtualHost>

Restart Apache in the XAMPP control panel (click XAMPP icon at the bottom right on Windows)
Open your browser and enter the IP address 127.0.0.2 (the one assigned in the virtual host setup)

Your site should now be accessible with PHP capabilities.

UPDATE

In response to a recent comment, here's a guide for sending emails via localhost.

Use a PHP library to send emails from your domain provider's email address:

Download PHPMailer
Extract the contents of the ZIP archive into a separate directory within BootstrapLandinPage, e.g., lib/PHPMailer
Add the following lines at the beginning of your process.php file
```
require 'path/to/PHPMailer/src/Exception.php';
```
```
require 'path/to/PHPMailer/src/PHPMailer.php';
```
```
require 'path/to/PHPMailer/src/SMTP.php';
```
1. Refer to the example snippet on the documentation page where you downloaded the package and adapt it to your requirements.

As an alternative for local mailing:

Download hMailServer
Install it following their tutorial
Navigate to the
```
C:\Windows\System32\drivers\etc\hosts
```
file and open it as an administrator
Add the following line:
```
127.0.0.1       localhost localhost.com
```
Add the user [email protected] to your hMailServer

Configure the mail account in your email client using:

Username: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9bca1b8b4a9b5bc99b5b6bab8b5b1b6aaadf7bab6b4">[email protected]</a>

Password: your_password

IMAP/SMTP Server: localhost

UPDATE 2

This is how your PHP code would look when using PHPMailer:

require 'path/to/PHPMailer/src/Exception.php';
require 'path/to/PHPMailer/src/PHPMailer.php';
require 'path/to/PHPMailer/src/SMTP.php';

$error_msg = array();
$success_msg = array();
$data = '';

// To prevent warnings or errors from displaying, set display_errors to 0
ini_set('display_errors', 0);

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    // Validation logic goes here

}

// A function to output JSON-formatted data
function outputJson($data) {
    header('Content-Type: application/json');
    echo json_encode($data);
    exit;
}
function test_input($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
}

Answer 2

Opening the file directly may not work unless configured in Apache. The file appears to have no connection to the XAMPP web server.

To resolve this issue, follow these steps:

Copy the BootstrapLandinPage directory to c:/xampp/htdocs
Add a virtual host to XAMPP

Edit the file located at

C:\xampp\apache\conf\extra\httpd-vhosts.conf

and insert the following snippet, customized to your setup.

<VirtualHost 127.0.0.2:80>
    ServerName playground.localhost
    ServerAlias playground.localhost
    DocumentRoot c:/xampp/htdocs/your_website
    <Directory "c:/xampp/htdocs/your_website/">
        Options +Indexes +Includes +FollowSymLinks +MultiViews
        AllowOverride All
        Require local
    </Directory>
</VirtualHost>

Restart Apache in the XAMPP control panel (click XAMPP icon at the bottom right on Windows)
Open your browser and enter the IP address 127.0.0.2 (the one assigned in the virtual host setup)

Your site should now be accessible with PHP capabilities.

UPDATE

In response to a recent comment, here's a guide for sending emails via localhost.

Use a PHP library to send emails from your domain provider's email address:

Download PHPMailer
Extract the contents of the ZIP archive into a separate directory within BootstrapLandinPage, e.g., lib/PHPMailer
Add the following lines at the beginning of your process.php file
```
require 'path/to/PHPMailer/src/Exception.php';
```
```
require 'path/to/PHPMailer/src/PHPMailer.php';
```
```
require 'path/to/PHPMailer/src/SMTP.php';
```
1. Refer to the example snippet on the documentation page where you downloaded the package and adapt it to your requirements.

As an alternative for local mailing:

Download hMailServer
Install it following their tutorial
Navigate to the
```
C:\Windows\System32\drivers\etc\hosts
```
file and open it as an administrator
Add the following line:
```
127.0.0.1       localhost localhost.com
```
Add the user [email protected] to your hMailServer

Configure the mail account in your email client using:

Username: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9bca1b8b4a9b5bc99b5b6bab8b5b1b6aaadf7bab6b4">[email protected]</a>

Password: your_password

IMAP/SMTP Server: localhost

UPDATE 2

This is how your PHP code would look when using PHPMailer:

require 'path/to/PHPMailer/src/Exception.php';
require 'path/to/PHPMailer/src/PHPMailer.php';
require 'path/to/PHPMailer/src/SMTP.php';

$error_msg = array();
$success_msg = array();
$data = '';

// To prevent warnings or errors from displaying, set display_errors to 0
ini_set('display_errors', 0);

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    // Validation logic goes here

}

// A function to output JSON-formatted data
function outputJson($data) {
    header('Content-Type: application/json');
    echo json_encode($data);
    exit;
}
function test_input($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
}

Validation in PHP and Javascript is only partially effective

Answer №1

Similar questions

What is the best way to utilize jQuery for deleting the final <li> within a <ul> element?

Choose a punctuation mark using jQuery

What is the correct way to implement fetch in a React/Redux/TS application?

Emphasize a specific line of text within a <div> with a highlighting effect

Menu icon in Next.js/React/Tailwind not triggering close action when clicked again, causing responsiveness issue

"Modifying Code Aesthetics in WebStorm/IDEA: A Step-by-

Gathering information associated with a specific session and user identification

Using React to Filter cards according to the selected value from an Autocomplete feature

Struggling with design issues while implementing ajax

Saving resources with a promise in Angular

How can I use a dropdown with checkbox to toggle the visibility of a specific div in React?

Is it possible to identify the beginning of a download using Selenium?

Using multiple MaterialUI components in a JavaScript page with React can pose challenges

Displaying information on a chartJS by connecting to an API using axios in VueJS

Issue with Laravel's hasManyThrough Relationship not functioning as expected

Tips for avoiding passing an empty string when using local storage

When attempting to access http://localhost:3000/traceur in Angular 2 with the angular-in-memory-web-api, a 404 (Not Found) error

"Sending the selected pass selector as a parameter to the dispatched action is causing a typing

Securing the connection between clients and servers through encryption

ajax-jquery request declined