I am working on submitting a form via jQuery AJAX. The form also has basic validation, that I am doing myself.

The HTML (index.html file):

<div  id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <form action="/process"  id="order_form">
        <div > 
            <div >
                <h5  id="exampleModalLabel">Pre-order</h5>
                <button type="submit"  data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div >

                <div id="#validation" >
                    All fields are mandatory
                </div>

                <div id="#status" >
                    <a href="#"  data-dismiss="alert" aria-label="close">&times;</a>
                    <p ></p>
                </div>

                <div >
                    <label for="first_name">First name:</label>
                    <input type="first_name"  id="first_name" placeholder="First name" name="first_name">
                </div>

                <div >
                    <label for="last_name">Last name:</label>
                    <input type="last_name"  id="last_name" placeholder="Last name" name="last_name">
                </div>

                <div >
                    <label for="email">Email address:</label>
                    <input type="email"  placeholder="Enter email" id="email">
                </div>
            </div>
            <div >
                <button type="submit" >Send</button>
            </div>
        </div>
    </form>
</div>

The script:

function isEmail(mail){
    return /^(([^<>()\[\]\.,;:\s@\"] (\.[^<>()\[\]\.,;:\s@\"] )*)|(\". \"))@(([^<>()\.,;\s@\"] \.{0,1}) ([^<>()\.,;:\s@\"]{2,}|[\d\.] ))$/.test(mail);
}

function submitOrder(e) {
    e.preventDefault();

    var form = $(this),
        submitUrl = form.attr('action'),
            firstName = $('#first_name').val(),
            lastName = $('#last_name').val(),
            emailAddress = $('#email').val()
            // Are there any empty fields?
            isEmpty = firstName == '' 
                || lastName == ''
                    || emailAddress == '';

        console.log('Empty filds: ', isEmpty);
        console.log('Valid email: ', isEmail(emailAddress));

        if (isEmpty) {
            $('#validation').removeClass('d-none');
        } else {
            if (!isEmail(emailAddress)) {
                $('#validation').removeClass('d-none').text('Choose a valid email');
            } else {
                $('#validation').addClass('d-none');

                $.ajax({
                    type: "POST",
                    url: submitUrl,
                    data: form.serialize(),
                    dataType: "json",
                    success: function(response) {
                        if (response == 'successful') {
                            $('#status').addClass('alert-success').find('p').text("Your order was send");
                        }
                        else {
                            $('#status').addClass('alert-danger').find('p').text("We've failed to send your order");
                        } 
                        $('#status').removeClass('d-none');
                    }
                });
            }
        }   
}

$(document).ready(function(){
    // Submit Order Form
    $('#order_form').on('submit', submitOrder);
});

The problem:

Evan though the form is not valid, and the console shows Empty filds: true and Valid email: false, the calass 'd-none' is not removed from <div id="#validation" > and the alert, of course, is not displayed.

What is my mistake?

CodePudding user response：

I've found a mistake in your code but I don't know if it will resolve your problem:

if (isEmpty) {
            $(' #validation').removeClass('d-none');
        }

should be (space before #validation)

if (isEmpty) {
            $('#validation').removeClass('d-none');
        }

CodePudding user response：

Here is what worked for me, in case it might help others:

function isEmail(mail){
    return /^(([^<>()\[\]\.,;:\s@\"] (\.[^<>()\[\]\.,;:\s@\"] )*)|(\". \"))@(([^<>()\.,;\s@\"] \.{0,1}) ([^<>()\.,;:\s@\"]{2,}|[\d\.] ))$/.test(mail);
}

function submitOrder(e) {
    e.preventDefault();

    var form = $(this),
        submitUrl = form.attr('action'),
        firstName = $('#first_name').val(),
        lastName = $('#last_name').val(),
        emailAddress = $('#email').val()
        // Are there any empty fields?
        isEmpty = firstName == '' 
            || lastName == ''
                || emailAddress == '';

    if (isEmpty) {
        $('#validation').removeClass('d-none');
    } else {
        if (!isEmail(emailAddress)) {
            $('#validation').removeClass('d-none').text('Choose a valid email');
        } else {
            $('#validation').addClass('d-none');

            var req = $.ajax({
                url: form.attr('action'),
                type: 'POST',
                data: form.serialize()
            });

            req.done(function(data) {
                if (data == 'success') {
                    $('#status').addClass('alert-success').find('p').text("Your order was send");
                }
                else {
                    $('#status').addClass('alert-danger').find('p').text("We've failed to send your order");
                } 
                
                $('#status').removeClass('d-none');
            });
        }
    }   
}

$(document).ready(function(){
    // Submit Preorder Form
    $('#order_form').on('submit', submitPreorder);
});