Validating a form using AJAX in jQuery & PHP-CodePudding


<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
        <!-- JQuery link -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <!-- JQuery code -->
        <script>
            $(document).ready(function() {
                $("form").submit(function(event) {
                    // Disable the action and the method inside the form 
                    event.preventDefault();
                    // Now get data from the inputs
                    var name = $("mail-name").val();
                    var email = $("mail-email").val();
                    var gender = $("mail-gender").val();
                    var message = $("mail-message").val();
                    var submit = $("mail-submit").val();
    
                    $(".form-message").load("mail.php", {
                        name: name, 
                        email: email,
                        gender: gender,
                        message: message,
                        submit: submit
                    });
                });
            });
        </script>
    </head>
    <body>
    
    <form action="mail.php" method="POST"> 
        <input id="mail-name" type="text" name="name" placeholder="Full name">
        <br>
        <input id="mail-email" type="text" name="email" placeholder="Email">
        <br>
        <select id="mail-gender" name="gender">
            <option value="male">Male</option>
            <option value="female">Female</option>
        </select>
        <br>
        <textarea id="mail-message" name="message" placeholder="Message"></textarea>
        <br>
        <button id="mail-submit" type="submit" name="submit">Send e-mail</button>
        <p ></p>
    </form>
    
    </body>
    </html>

<!-- this is the mail.php file that has the error handlers -->

<?php 
if (isset($_POST['submit'])) {
    $name = $_POST['name'];
    $email = $_POST['email'];
    $gender = $_POST['gender'];
    $message = $_POST['message'];
    
    $errorEmpty = false;
    $errorEmail = false;

    if (empty($name) || empty($email) || empty($message)) {
        echo "<span class='form-error'>Fill in all fields!</span>";
        $errorEmpty = true;
    }
    else if(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        echo "<span class='form-error'>Wtite a valid e-mail address!</span>";
        $errorEmail = true;
    }
    else {
        echo "<span class='form-success'>Everything is right!</span>";
    }
}
else {
    echo "There was an error!";
}
?>

<script>
    $("#mail-name, #mail-email, #mail-gender, #mail-message").removeClass("input-error");

    var errorEmpty = "<?php echo $errorEmpty; ?>";
    var errorEmail = "<?php echo $errorEmail; ?>";

    if (errorEmpty == true) {
        $("#mail-name, #mail-email, #mail-message").addClass("input-error");
    }
    if (errorEmail == true) {
        $("#mail-email").addClass("input-error");
    }
    // There are no errors
    if(errorEmpty == false && errorEmail == false){
        // remove the values inside the inputs
        $("#mail-name, #mail-email, #mail-message").val("");
    }
</script>

and I am getting this error when clicking the submit button!!!

M137:4 Uncaught SyntaxError: Invalid or unexpected token

at p (jquery.min.js:2:523) at Ja (jquery.min.js:3:15825)
at r.fn.init.append (jquery.min.js:3:17096)
at r.fn.init. (jquery.min.js:3:18200)
at T (jquery.min.js:3:398)
at r.fn.init.html (jquery.min.js:3:17878)
at Object. (jquery.min.js:4:19097)
at i (jquery.min.js:2:28017)
at Object.fireWith [as resolveWith] (jquery.min.js:2:28783)
at A (jquery.min.js:4:14017)

CodePudding user response：

You are missing the id selector # symbols

So change

var name = $("mail-name").val();
var email = $("mail-email").val();
var gender = $("mail-gender").val();
var message = $("mail-message").val();
var submit = $("mail-submit").val();

var name = $("#mail-name").val();
var email = $("#mail-email").val();
var gender = $("#mail-gender").val();
var message = $("#mail-message").val();
var submit = $("#mail-submit").val();