I have a problem. It's that when in the contact form we want to contact and we write an invalid email or a phone number there is the bootstrap alert which appears alert-success when I haven't even received the email

contact.php

<?php

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

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

if(isset($_POST["send"])){

    $body = $_POST['message'];
    $name = $_POST['name'];
    $phone = $_POST['phone'];
    $email = $_POST['email'];
    

    $mail = new PHPMailer(true);
    
    $mail->isSMTP();
    $mail->Host = 'smtp.gmail.com';
    $mail->SMTPAuth = true;
    $mail->Username = '[email protected]';
    $mail->Password = 'rlylecrtuvztqosz';
    $mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS;            //Enable implicit TLS encryption
    $mail->Port = 465;      
    $mail->setFrom('[email protected]');

    $mail->addAddress($_POST["email"]);

    $mail->isHTML(true);

    $mail->Subject = 'Projet web';
    $mail->Body = "Message:" . $body . "<br>Phone number: " . $phone . "<br>Name: " . $name . "<br>Mail: " . $email;

    $mail->send();

    echo "success";
    die;
}

index.php

                <div  data-aos="fade-left">
                    <form id="contactForm" action="contact.php" method="POST">
                    <input type="hidden" name="send">
                        <div  id="success-message" role="alert">
                            A simple success alert—check it out!
                        </div>

                        <div  id="error-message" role="alert">
                            A simple success alert—check it out!
                        </div>

                        <div >
                            <span  id="basic-addon1"><i ></i></span>
                            <input type="text" id="name" name="name"  placeholder="Nom Prénom"
                            aria-label="Nom Prénom" aria-describedby="basic-addon2" required>
                        </div>
                        <!-- Email address input -->
                        <div >
                            <span  id="basic-addon1">@</span>
                            <input type="text" id="email" name="email"  placeholder="Email"
                            aria-label="email" aria-describedby="basic-addon1" required>
                        </div>
                        <div >
                            <span  id="basic-addon1"><i ></i></span>
                            <input type="text" id="phone" name="phone"  placeholder="Téléphone"
                            aria-describedby="basic-addon2" required>
                        </div>
                        <!-- Message input -->
                        <div >
                            <textarea  id="exampleFormControlTextarea1" rows="3"
                            placeholder="Decrivez le plus possible votre projet" name="message" required></textarea>
                        </div>
                        <!-- Form submit button -->
                        <div >
                            <button  name="send" type="submit" id="send-form">Submit</button>
                        </div>
                    </form>

                </div>

    <script>
        AOS.init();
        $(document).ready(function(){
            $('#contactForm').submit(function(e){
                e.preventDefault();
                const $this = $(this);

                // disable submit button
                const $button = $(this).find('button[type="submit"]').text('Submit...').attr('disabled', 'disabled');

                // send message
                $.ajax({
                    type: 'POST',
                    url: 'contact.php',
                    data: $this.serialize(),
                    success: function(data){
                        $('#success-message').css('display', 'block');
                         $this[0].reset(); // reset form
                    },
                    error: function(jqXHR, textStatus, errorThrown){
                        $('#error-message').css('display', 'block');
                    },
                    complete: function(jqXHR, textStatus){
                        // enable submit button
                        $button.text('Submit').removeAttr('disabled');
                    }
                })
            })
        })
    </script>

Above you can see the code there is jquery ajax, php. I would like to know how I can do so that it verifies the email if it is a written email (that is to say in this format: [email protected] I receive the email when I am contacted and if the email is not valid (@mail.com) there is the bootstrap alert which appears write email not sent because the email is invalid I would like to do this for the email and the phone so that only numbers can be entered. how can i do that?

CodePudding user response：

if ($mail->send()) {
echo "success";
}else{
echo "unnable to sent mail id error!!!";
}

CodePudding user response：

First of all always use type="email" for email, Second thing is never validate at client site only, You have to validate on both end i.e: HTML and PHP, On PHP end validate this as:

$email_val = $_POST['email'];
if(filter($email_val, FILTER_VALIDATE_EMAIL)){
    // enter code here
}

And same you can validate for phone number by applying regex.