表单前端验证失败的原因是什么？

Question

我正在努力通过 jQuery AJAX 提交表格。表格也有基本的验证，我自己在做。

HTML（index.html 文件）：

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

                <div id="#validation" class="d-none alert alert-danger">
                    All fields are mandatory
                </div>

                <div id="#status" class="d-none alert alert-dismissible">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    <p class="m-0"></p>
                </div>

                <div class="form-group">
                    <label for="first_name">First name:</label>
                    <input type="first_name" class="form-control" id="first_name" placeholder="First name" name="first_name">
                </div>

                <div class="form-group">
                    <label for="last_name">Last name:</label>
                    <input type="last_name" class="form-control" id="last_name" placeholder="Last name" name="last_name">
                </div>

                <div class="form-group">
                    <label for="email">Email address:</label>
                    <input type="email" class="form-control" placeholder="Enter email" id="email">
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary btn-sm btn-block">Send</button>
            </div>
        </div>
    </form>
</div>

脚本：

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);
});

问题：

Evan 虽然表单无效，并且控制台显示 Empty filds: true 和 Valid email: false，但 calass 'd-none' 没有从<div id="#validation" class="d-none alert alert-danger"> 并且警报当然不会显示。

我的错误是什么？

Answer 1

我在你的代码中发现了一个错误，但我不知道它是否能解决你的问题：

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

应该是（space在#validation之前）

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

Answer 2

以下是对我有用的方法，以防对其他人有所帮助：

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 Order Form
    $('#order_form').on('submit', submitOrder);
});

表单前端验证失败的原因是什么？

What makes the front-end validation of form fail?

javascript

validation

jquery

问题：

我的错误是什么？