Question 37209 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

verify if mail valid and phone – Jquery

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 PHPMailerPHPMailerPHPMailer;
use PHPMailerPHPMailerException;

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 class="col-md-4 mb-3 mb-md-0" data-aos="fade-left">
                    <form id="contactForm" action="contact.php" method="POST">
                    <input type="hidden" name="send">
                        <div class="alert alert-success" id="success-message" role="alert">
                            A simple success alert—check it out!
                        </div>

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

                        <div class="input-group mb-3">
                            <span class="input-group-text" id="basic-addon1"><i class="bi bi-person-fill"></i></span>
                            <input type="text" id="name" name="name" class="form-control" placeholder="Nom Prénom"
                            aria-label="Nom Prénom" aria-describedby="basic-addon2" required>
                        </div>
                        <!-- Email address input -->
                        <div class="input-group mb-3">
                            <span class="input-group-text" id="basic-addon1">@</span>
                            <input type="text" id="email" name="email" class="form-control" placeholder="Email"
                            aria-label="email" aria-describedby="basic-addon1" required>
                        </div>
                        <div class="input-group mb-3">
                            <span class="input-group-text" id="basic-addon1"><i class="bi bi-telephone-fill"></i></span>
                            <input type="text" id="phone" name="phone" class="form-control" placeholder="Téléphone"
                            aria-describedby="basic-addon2" required>
                        </div>
                        <!-- Message input -->
                        <div class="mb-3">
                            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
                            placeholder="Decrivez le plus possible votre projet" name="message" required></textarea>
                        </div>
                        <!-- Form submit button -->
                        <div class="d-grid">
                            <button class="btn btn-primary btn-lg" 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?

Tags:

2

Answers


  1. 0 
    if ($mail->send()) {
    echo "success";
} else {
    echo "unnable to sent mail id error!!!";
}
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search