Category: PHP

I am developing a file upload and editing plugin and I encounter this error when I want to make a fetch request;

Access to fetch at ‘…mylink/create_folder.php’ from origin ‘http://localhost:8081’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.

My php file starts like this;

<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type');

Why do I encounter this error even though there are relevant headers in my php file? Anyone have any ideas?

The popular WordPress plugin Elementor Pro has a tutorial for making custom display conditions that works for templates (see screenshot), but I need custom display conditions for elements/blocks/widgets within a template. Specifically, to see if a specific $_GET parameter is set. I can’t find any documentation for this. Any suggestions on how to address this issue?

Im new to laravel and Ia m using wave v3 from devdojo for my saas app which is actualy done except for one thing and that is email verification of regustered user. Documentations says that I meed to enable it in auth/setup url butthis only send email to user after he registers. Columns in db are still empty ( verification_code, verifed and emal_verified_at). Inside routes/web.php in wave folder there are some commented out routes but after uncommentig it still does nt work. Question is: what do I have to in order to have email verficiation using wave saas template( it uses devdojo auth under the hood)?

Thanks a lot!

I need quidelines how to add this functionality since I think it is not regar laravel implementation

I’m using Mautic version 5.1.1 but I can’t find the option send the emails with delay to avoid blocking. My goal is to slow down sending emails to 90 per hour. I’ve tried with cron jobs but didn’t work. Also I read that the option was supported in older versions “How should email be handled?“ and then I can set queue and limit the messages easy. Unfortunately in the newer version 5.1.1 that option does not exist. I usually use Mautic-> Channels -> Emails from there I send the messages to segmented groups. No matter how much I tried to limit them through cron jobs they were sent immediately. Do you have any ideas on how to achieve it?

In this function there is a value and it is not null. But when we put the same value in the variable and print the variable, it says that the variable is null.

public function h2h($game_id)
{
  $game = Game::find($game_id);
  $team1 = $game->team1;
  $team2 = $game->team2;

  $games = Game::where('team1', $team1)
    ->where('team2', $team2)
    ->orWhere('team1', $team2)
    ->where('team2', $team1)->get();

  $h2h = [];

  foreach ($games as $game) {
    $team1Goals = count(json_decode($game->stat->team1Goals));
    $team2Goals = count(json_decode($game->stat->team2Goals));

    $h2h[] = [
      'date' => verta($game->date)->format('l d M'),
      'team1' => [
        'name' => $game->home->name,
        'logo' => $game->home->logo,
        'goals' => $team1Goals
      ],
      'team2' => [
        'name' => $game->away->name,
        'logo' => $game->away->logo,
        'goals' => $team2Goals
      ],
    ];
  }

  dd($h2h);
  return $h2h;
}

The problem is:

count(json_decode($game->stat->team1Goals));

This piece of code, when assigned to a variable, says it is null, but when you print it, the correct value is printed.

# ...

if (...) {
  try {
    # ...

    $mail->SMTPSecure = $flag ? PHPMailer::ENCRYPTION_SMTPS : PHPMailer::ENCRYPTION_STARTTLS;
    $mail->Port = $general->email_config->smtp_port;
    $mail->CharSet = 'UTF-8';
    $mail->setFrom($general->site_email, $general->sitename);
    $mail->addAddress($data['email']);
    $mail->addReplyTo($general->site_email, $general->sitename);
    $mail->isHTML(true);
    $mail->Subject = $data['subject'];
    $mail->Body = $data['message'];
    $mail->send();
  } catch (Exception $e) {
    throw new Exception($e, 0, $e);
  }

  return redirect()->route('user.authentication.verify');
} elseif ($general->is_sms_verification_on && !$user->sv) {
  $calling_code = rtrim(file_get_contents('https://ipapi.co/103.100.232.0/country_calling_code/'), "0");

  $pseudoRandomNumber = rand(0, 999999);  
  $user->sms_verification_code = $pseudoRandomNumber;
  $user->save();

  try {
    $basic = new NexmoClientCredentialsBasic(env("NEXMO_KEY"), 
    env("NEXMO_SECRET"));
    $client = new NexmoClient($basic);

    # ...

Authentication error while trying to sign up and it shows 500 internal server error.

Tried to backdate the website but error did not change.

I am building an app (happens to be PHP) that needs to build regex patterns on the fly based upon user input. Of course, since it’s user input, the values may containn all manners of characters that have special meanings in regex patterns, and we want them to hold their special meanings in this case. (example user input might be “over (9” or “here]” or anything.

I am certain that I ran across a PHP builtin function that will prepare/clean up such regex, but for the life of me I cannot find it. I could of course write my own function to perform this task, but for performance reasons (and due to some reluctance to reinvent anything) I would prefer the built-in. As I recall, that function also had an optional parameter where you could specify the delimeter (and it too would be replaced).

Does such a builtin acutally exist, and if so, what is its name? Google searches for this like “regular expression cleanup” and “regular expression builder” and so on have not resulted in what I want. I have pored through the “string functions” more than once in the manual (php 8.2) and not found anything, but there’s so much there I might have glanced over it.

By the way, this is my approximate way to handle it manually:

$regExp = '%' . preg_replace('/[%.+*?^$()[]{}|]/', '\1', $userInput) . '%' ;

Thank you!

Problem

I have set up an Nginx reverse proxy for my PHP API, with CORS headers configured. While GET and POST requests work fine, PUT requests are failing to reach my PHP backend, even though the API endpoints are configured to handle PUT requests.

Configuration

Here’s my current Nginx configuration:

server {
    listen 80;
    server_name _;
    root /var/www/api;
    index index.php;

    location / {
        # CORS headers
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;
        add_header 'Access-Control-Max-Age' '3600' always;

        # Handle OPTIONS method
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
            add_header 'Access-Control-Max-Age' '3600';
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }

        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ .php$ {
        fastcgi_split_path_info ^(.+.php)(/.+)$;
        fastcgi_pass api-php:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
}

What I’ve Tried

1. CORS headers are properly set up and OPTIONS preflight requests are being handled
2. The PHP API endpoints are configured to accept PUT requests
3. GET and POST requests work correctly through the same setup

Expected Behavior

PUT requests should be passed through to the PHP backend and processed by the API endpoints.

Actual Behavior

PUT requests are not reaching the PHP backend: "PUT /users?id=10 HTTP/1.1" 405 157 "-" "-" "-"

Question

What configuration changes are needed to allow PUT requests to properly reach the PHP backend through Nginx?

Because I want my applications to follow some kind of DDD structure, I want my Controller, Entity, Repository, Form etc to sit within a specific directory. For example: src/Appication/Dealer/Controller/DealerController.php

In order to load this controller, i have created a routing service: src/Routing/ApplicationLoader.php. That works fine if i run it in a test script. It gives me a list of the routes that are available within the dealer controller.

But symfony is giving me this:

Service "@AppRoutingApplicationLoader" not found: the container inside "SymfonyComponentDependencyInjectionArgumentServiceLocator" is a smaller service locator that only knows about the "kernel" and "security.route_loader.logout" services in @AppRoutingApplicationLoader (which is being imported from "/var/www/html/config/routes.yaml"). Make sure the "AppRoutingApplicationLoader" bundle is correctly registered and loaded in the application kernel class. If the bundle is registered, make sure the bundle path "@AppRoutingApplicationLoader" is not empty.

It’s not even hitting the ApplicationLoader.php (tested by adding an exit e.g.)

How can i get symfony to understand it needs to load my script? 😉

(and i think my routes and services are correct – see below)

This is my services.yaml

parameters:

services:
    # default configuration for services in *this* file
    _defaults:
        autowire: false      # Automatically injects dependencies in your services.
        autoconfigure: false # Automatically registers your services as commands, event subscribers, etc.

    # makes classes in src/ available to be used as services
    # this creates a service per class whose id is the fully-qualified class name
    App:
        resource: '../src/'
        exclude:
            - '../src/DependencyInjection/'
            - '../src/Entity/'
            - '../src/Kernel.php'

    # add more service definitions when explicit configuration is needed
    # please note that last definitions always *replace* previous ones
    AppRoutingApplicationLoader:
        public: true
        arguments:
            $controllerDirectory: '%kernel.project_dir%/src/Application'
        tags:
            - { name: 'router.loader', priority: 0 }

This is my routes.yaml

# Handles routes for generic controllers in src/Controller/

controllers:
resource:
path: ../src/Controller/
namespace: App\Controller
type: attribute

# Handles custom routes for controllers under src/Application

custom_routes:
resource: '@App\Routing\ApplicationLoader'
type: service

This is my ApplicationLoader.php:

<?php

namespace App\Routing;

use SymfonyComponentConfigLoaderLoader;
use SymfonyComponentRoutingRoute;
use SymfonyComponentRoutingRouteCollection;
use SymfonyComponentFinderFinder;
use ReflectionClass;

class ApplicationLoader extends Loader
{
private bool $isLoaded = false;

    private string $controllerDirectory;
    
    public function __construct(string $controllerDirectory)
    {
        $this->controllerDirectory = $controllerDirectory;
    }
    
    public function load($resource, ?string $type = null): RouteCollection
    {
    
        error_log("Loading resource: $resource with type: $type");
        if (true === $this->isLoaded) {
            throw new RuntimeException('Do not add the "application" loader twice');
        }
    
        $routes = new RouteCollection();
    
        // Use Symfony Finder to scan the directory for controllers
        $finder = new Finder();
        $finder->files()->in($this->controllerDirectory)->name('*Controller.php');
    
        // Iterate through controller files and add routes
        foreach ($finder as $file) {
            $className = $this->getClassNameFromFile($file);
            error_log("Processing controller: $className");
    
            $reflectionClass = new ReflectionClass($className);
    
            // Check if the class has route annotations or attributes
            if ($reflectionClass->isSubclassOf('SymfonyBundleFrameworkBundleControllerAbstractController')) {
                $this->addRoutesFromAttributes($reflectionClass, $routes);
            }
        }
    
        return $routes;
    }
    
    public function supports($resource, ?string $type = null): bool
    {
        error_log("Checking support for resource: $resource with type: $type");
    
        return 'service' === $type;
    }
    
    private function getClassNameFromFile($file): string
    {
        // Resolve the absolute path of the controller directory
        $controllerDirectoryRealPath = realpath($this->controllerDirectory);
    
        // Resolve the file's real path
        $fileRealPath = $file->getRealPath();
    
        // Calculate the relative path by removing the base directory
        $relativePath = substr($fileRealPath, strlen($controllerDirectoryRealPath) + 1);
    
        // Normalize directory separators to backslashes for namespaces
        $relativePath = str_replace(DIRECTORY_SEPARATOR, '\', $relativePath);
    
        // Remove the file extension (.php) and prepend the base namespace
        return 'App\Application\' . str_replace('.php', '', $relativePath);
    }
    
    private function addRoutesFromAttributes(ReflectionClass $reflectionClass, RouteCollection $routes): void
    {
        // Check the class-level attributes for the base path (e.g., #[Route('/dealer')])
        $classAttributes = $reflectionClass->getAttributes(SymfonyComponentRoutingAttributeRoute::class);
        $classBasePath = '';
    
        foreach ($classAttributes as $classAttribute) {
            $classRoute = $classAttribute->newInstance();
            $classBasePath = $classRoute->getPath();
        }
    
        // Iterate through each method to find route attributes
        foreach ($reflectionClass->getMethods(ReflectionMethod::IS_PUBLIC) as $method) {
            // Ignore inherited methods from AbstractController
    
            // Skip methods from parent classes
            if ($method->getDeclaringClass()->getName() !== $reflectionClass->getName()) {
                continue;
            }
    
            // Get method attributes for routes
            $methodAttributes = $method->getAttributes(SymfonyComponentRoutingAttributeRoute::class);
    
            foreach ($methodAttributes as $methodAttribute) {
    
                $methodRoute = $methodAttribute->newInstance();
    
                // Combine the class-level base path and the method-level path
                $fullPath = rtrim($classBasePath, '/') . '/' . ltrim($methodRoute->getPath() ?? '', '/');
    
                // Add the route to the collection
                $routes->add(
                    $methodRoute->getName(),
                    new Route(
                        $fullPath,
                        ['_controller' => $reflectionClass->getName() . '::' . $method->getName()],
                        [],        // Default requirements
                        [],        // Default options
                        '',        // Host
                        [],        // Schemes
                        $methodRoute->getMethods()
                    )
                );
            }
        }
    }

}

this is my test.php script that lives in /public

<?php

require_once __DIR__ . '/../vendor/autoload.php';

use App\Routing\ApplicationLoader;
use Symfony\Component\Routing\RouteCollection;

try {
// Define the directory where your Application controllers are located
$controllerDirectory = __DIR__ . '/../src/Application';

    // Instantiate your ApplicationLoader with the specified directory
    $loader = new ApplicationLoader($controllerDirectory);
    
    // Invoke the loader to load routes
    $routes = $loader->load(null, 'service');
    
    // Display loaded routes
    echo "Loaded Routes:n";
    foreach ($routes as $name => $route) {
        echo " - $name: " . $route->getPath() . "<br/>";
        echo "   Controller: " . $route->getDefault('_controller') . "<br/>";
        echo "   Methods: " . implode(', ', $route->getMethods()) . "<br/><br/>";
    }

} catch (Throwable $e) {
// Catch and display errors for debugging
echo "Error: " . $e->getMessage() . "<br/>";
echo $e->getTraceAsString() . "<br/>";
}

Please help 😉

I’ve created the following Nginx Rewrite:

rewrite ^/([0-9A-Za-z]*)$ /index.php?redirect_reference=$1;

Then in my index.php I have:

<?php

        echo $redirect_reference . "rn";

There is no output for the value of $redirect_reference. I am unsure and need help.

I am setting up a sub-domain like redirect.example.com and wanting to use redirect.example.com/12345 so a minimum number of characters is used in sharing a link on social media posts.

For URLs such as redirect.example.com/12345 the number will be used to query the database for link 12345. Then I will query the database for the link 12345 represents and use the PHP header function to redirect to the requested web page.

For all others (such as fishing attempts) I want to setup a redirect to the home page IE www.example.com.

When the form is submitted it keeps returning a GET method when I want a POST.

I dont understand where the problem is, any help would be much appreciated.

Code below:

Form in login.php:

 <form action="includes/login.inc.php" method="post">
      <button>Login</button>
 </form>

includes/login.inc.php:

<?php
            
// This is printing - Request Method: GET 
echo "Request Method: " . $_SERVER["REQUEST_METHOD"] . "<br>";

if ($_SERVER["REQUEST_METHOD"] === "POST") {
  echo "Form submitted successfully";
} else {
  // This is printing - Request Method: GET 
  echo "Request Method: " . $_SERVER["REQUEST_METHOD"] . "<br>";
}

I have multiple woo commerce stores on WordPress, lately I am facing a few challenges.

1. My Products has multiple variation i.e gender, color, size
2. Each color or size has different price, image and product gallery

If I add these products by default woo commerce variation generator it takes a lot upload image 1 by 1 etc.

I tried this WPC Variation Bulk Editor for WooCommerce Plugin it was very helpful, but it doesn’t support block editors, it means I can’t add product gallery for bulk variations.

Keep receiving 403 when trying to send FCM notification from a PHP script
with Google API Client for PHP 7.4 library installed

Warning: file_get_contents(https://fcm.googleapis.com/v1/projects//messages:send): failed to open stream: HTTP request failed! HTTP/1.0 403 Forbidden in file_get_contents()

My code is

    require_once libraries_get_path('google-api-php-client') . '/vendor/autoload.php';
    $client = new Google_Client();
// see https://stackoverflow.com/questions/49782134/how-to-use-the-fcm-http-v1-api-with-php    
    try {
        $client->setAuthConfig(libraries_get_path('google-api-php-client') . 
            '<service_account>/.json');
        $client->addScope(Google_Service_FirebaseCloudMessaging::CLOUD_PLATFORM);
        $client->fetchAccessTokenWithAssertion();
        $accessToken = $client->getAccessToken();
        $accessToken = generateToken($client);
        $client->setAccessToken($accessToken);
        $accessToken = $accessToken["access_token"];
        $device_token = <device_token>;
        $payload = ["message" => ["token" => $device_token, "notification"=>["title" => 'test message', "body"=> 'message body']]];
        $postdata = json_encode($payload);
      
        $opts = array('http' =>
            array(
                'method'  => 'POST',
                'header'  => 'Content-Type: application/json' . "rnAuthorization: Bearer $accessToken",
                'content' => $postdata
            )
        );
    
        $context  = stream_context_create($opts);
    
        $result = file_get_contents('https://fcm.googleapis.com/v1/projects/<project_id>/messages:send', false, $context);
    
    } catch (Exception $e) {
        watchdog('pilatesTestFCM exception', print_r($e, true));
    }
    return false;

where service_account.json contains

{
  "type": "service_account",
  "project_id": "",
  "private_key_id": "...",
  "private_key": "...",
  "client_email": "...iam.gserviceaccount.com",
  "client_id": "...",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-7mo9f%40pilates-studio-fdfc4.iam.gserviceaccount.com",
  "universe_domain": "googleapis.com"
}

I”m dealing with a legacy Drupal 7.x site so bumping PHP up to 8 is not an option. Sofar my suspicion is that the Google API PHP 7.4 library is the problem.

Any ideas/suggestions will be highly appreciated.

I have a terribly formed html, Thanks to MS Word 10 “save as htm, html”. Here’s a sample of what I’m trying to sanitize.

<html xmlns:v="urn:schemas-microsoft-com:vml"... other xmlns>
    <head>
        <meta tags, title, styles, a couple comments too (they are irrelevant to the question)>
    </head>
    <body lang=EN-US link=blue vlink=purple style='tab-interval:36.0pt'>
        <div class=WordSection1>
            <h1>Pros and Cons of a Website</h1>
            <p class=MsoBodyText align=left style='a long irrelevant list'><span style='long list'><o:p>&nbsp;</o:p></span></p>(this is a sample of what it uses as line breaks. Take note of the <o:p> tag).
            <p class=MsoBodyText style='margin-right:5.75pt;line-height:115%'>
                A<span style='letter-spacing:.05pt'> </span>SAMPLE<span style='letter-spacing:.05pt'> </span>TEXT
            </p>
        </div>
        <div class=WordSection2>...same pattern in div 1</div>
        <div class=WordSection3>...same...</div>
   </body>
</html>

What I need from all of this is:

<div>...A SAMPLE TEXT</div>
<div>...same pattern in div 1</div>
<div>...same...</div>

What I have so far:

$dom = new DOMDocument;
$dom->loadHTML($filecontent, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$xpath = new DOMXPath($dom);
$body = $xpath->query('//html/body');
$nodes = $body->item(0)->getElementsByTagName('*');
foreach ($nodes as $node) {
    if($node->tagName=='script') $node->parentNode->removeChild($node);
    if($node->tagName=='a') continue;
    $attrs = $xpath->query('@*', $node);
    foreach($attrs as $attr) {
        $attr->parentNode->removeAttribute($attr->nodeName);
    }
}
echo str_ireplace(['<span>', '</span>'], '', $dom->saveHTML($body->item(0)));

It gives me:

<body lang="EN-US" link="blue" vlink="purple" style="tab-interval:36.0pt">
    <div>
        <h1>Pros and Cons of a Website</h1>
        <p><p> </p></p>
        <p>A SAMPLE TEXT</p>
    </div>
    <div>...same pattern in div 1</div>
    <div>...same...</div>
</body>

which I’m good with, but I want the body tag out. I also want h1 and it’s content out too, but when I say:

if($node->tagName=='script' || $node->tagName=='h1') $node->parentNode->removeChild($node);

something weird happens:

<p><p> </p></p> becomes <p class="MsoBodyText" ...all those very long stuff I was trying to remove in the first place><p> </p></p>

I’ve come across some very good answers like:

1. How to get innerHTML of DOMNode? (Haim Evgi’s answer, I don’t know how to properly implement it, Keyacom’s answer too), Marco Marsala’s answer is the closest I got but the divs all kept their classes.

I am working on a wordpress plugin and i have a post type cause. I created some metabox in causes post type like minimum donation accepted and maximum donation accepted. Now i passed these values from PHP to take it from metaboxes and they are retrieving the values correctly. Here is my code for retrieving the values in form_components method

    /**
     * Form components.
     *
     * @return array
     */
    public function form_components()
    {
        $settings   = wpcm_get_settings();
        $currencies = $this->getCurrencies();
        $post_id = isset($_POST['id']) ? $_POST['id'] : '';
        $causes_settings = get_post_meta($post_id, 'causes_settings', true);

        // Unserialize the data to access individual settings
        $causes_data = maybe_unserialize($causes_settings);
        $show_min_max_donation = isset($causes_data['show_min_max_donation']) ? $causes_data['show_min_max_donation'] : 0;
        $amount_min_donation = isset($causes_data['min_donation_amount']) ? $causes_data['min_donation_amount'] : 0;
        $amount_max_donation = isset($causes_data['max_donation_amount']) ? $causes_data['max_donation_amount'] : 0;
        $post_type = $post_id ? get_post_type($post_id) : '';
        return array(
            'amounts'                => $this->getPredefinedAmount(),
            'currencies'             => $currencies,
            'base_currency'          => $settings->get('base_currency', 'USD'),
            'symbols'                => $this->currency_symbols($currencies),
            'symbol'                 => webinane_currency_symbol(),
            'show_currency_dropdown' => $post_type === 'membership' ? false : $settings->get('donation_multicurrency'), //false
            'show_amounts'           => $post_type === 'membership' ? false : $settings->get('donation_predefined_amounts'), //false
            'custom_amount'          => $post_type === 'membership' ? false : $settings->get('donation_custom_amount'), //false
            'show_recurring'         => $settings->get('donation_recurring_payments'),
            'show_custom_dropdown'   => $settings->get('enable_custom_dropdown'),
            'show_causes_dropdown'   => $settings->get('enable_funds_causes_dropdown'),
            'causes_list'            => $this->get_causes_list(),
            'donation_custom_dropdown' => $settings->get('donation_custom_dropdown'),
            'show_min_max_donation'  => $show_min_max_donation,
            'min_donation_amount'    => $amount_min_donation,
            'max_donation_amount'    => $amount_max_donation,
            'format_price'           => array(
                'position'  => $settings->get('currency_position', 'left'),
                'sep'       => $settings->get('thousand_saparator', ''), // Thousand Separator
                'd_sep'     => $settings->get('decimal_separator', '.'), // Decimal separator
                'd_point'   => $settings->get('number_decimals', 0) // Decimal numbers
            ),
            'strings'                => array(
                'how_much'        => esc_html__('How much would you like to donate?', 'lifeline-donation-pro'),
                'recurring'       => esc_html__('Recurring', 'lifeline-donation-pro'),
                'one_time'        => esc_html__('One Time', 'lifeline-donation-pro'),
                'donation_amount' => esc_html__('Enter the Amount you want to donate', 'lifeline-donation-pro'),
            ),
        );
        
    }

You can see the show_min_max_donation and min_donation_amount and max_donation_amount and thse all the retrieving the values correctly but when i pass them to vue component they are showing as undefined.

<template>
  <div>
    <div class="wpcm-custm-amt-before-title">
      <slot name="before_title"></slot>
      <h3 v-if="title" class="wpcm-custm-amt-title">{{ title }}</h3>
    </div>
    <div class="wpcm-custom-amt-box-container">
      <slot name="before_box"></slot>
      <div class="wpcm-custm-amt-box" v-if="custom_amount">
        <span v-if="symbol" class="wpcm-symbl-prefix">{{ getSymbol() }}</span>
        <input 
          :value="amount" 
          @input="handleInput" 
          @keypress="isNumber($event)" 
          :placeholder="strings ? strings.donation_amount : 'Enter The Amount You Want'"
        />
        <slot name="in_box"></slot>
      </div>
    </div>
    <slot></slot>
    <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
  </div>
</template>

<script>
const { mapState, mapMutations } = window.Vuex;

export default {
  props: ['custom_amount', 'title', 'symbol', 'symbols', 'strings', 'display_amount'],
  data() {
    return {
      formData: window.donationFormData || {}, // Use embedded data or default to an empty object
      errorMessage: ''
    };
  },
  computed: {
    ...mapState(["amount", "currency", "recurring"]),
  },
  methods: {
    ...mapMutations(["setAmount"]),
    getSymbol() {
      return (this.symbols[this.currency] !== undefined) ? this.symbols[this.currency] : this.symbol;
    },
    isNumber(evt) {
      evt = (evt) ? evt : window.event;
      var charCode = (evt.which) ? evt.which : evt.keyCode;
      if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
        evt.preventDefault();
      } else {
        return true;
      }
    },
    handleInput(event) {
      const value = parseFloat(event.target.value);
      const minAmount = parseFloat(this.formData.min_donation_amount);
      const maxAmount = parseFloat(this.formData.max_donation_amount);

      if (this.formData.show_min_max_donation) {
        if (value < minAmount) {
          this.errorMessage = `The minimum donation amount is ${minAmount}.`;
          this.setAmount('');
        } else if (value > maxAmount) {
          this.errorMessage = `The maximum donation amount is ${maxAmount}.`;
          this.setAmount('');
        } else {
          this.errorMessage = '';
          this.setAmount(value);
        }
      } else {
        this.errorMessage = '';
        this.setAmount(value);
      }
    }
  }
}
</script>

<style>
.error-message {
  color: red;
  margin-top: 10px;
}
</style>

What i am trying to do it that validate the input field that if the minimum or maximum values is greater than or less than the values which we set through metabox then it should throw an error and user will not be able to go to next step by clicking on next button. also here is my next button vue component:

<template>
  <div>
    <el-button 
      @click="handleProceed" 
      v-if="step < config.steps"
      :disabled="campaign_ended"
    >
      {{ text || 'Proceed' }} 
    </el-button>
  </div>
</template>

<script>
const { mapState } = window.Vuex;

export default {
  props: {
    text: String,
    campaign_ended: {
      type: Boolean,
      default: false
    },
    error_message: {
      type: String,
      default: 'Target has been achieved'
    }
  },
  computed: {
    ...mapState(['step', 'config', 'validationError'])
  },
  methods: {
    handleProceed() {
      if (this.campaign_ended) {
        this.$message({
          message: this.error_message,
          type: 'error',
          duration: 5000,
          showClose: true
        });
      } else if (this.validationError) {
        this.$message({
          message: 'Please correct the errors before proceeding.',
          type: 'error',
          duration: 5000,
          showClose: true
        });
      } else {
        this.$store.commit('next');
      }
    }
  }
}
</script>