Bootstrap表单未提交

问题描述

我对PHP或JS不太满意，尽管我不能从头开始编写代码，但我确实可以阅读和理解两者。因此，我在Bootstrap 4.5.2版上创建了此表单。表单具有内置的验证功能，看起来很漂亮。但是我发现很难使表格生效。当我提交表单时，Bootstrap会对其进行验证，但不会继续进行。这是它的外观图像。

这是我当前正在使用的脚本。我从一段时间前开发的另一个网站上获取了PHP和JS。

HTML

<div id="output-frame-id"
    <FileViewer
        fileType={'docx'}
        filePath={this.state.file} //this.state.file has path of the url data
        allowFullScreen={true}
    />
</div>

JS

<form id="contact-form" class="needs-validation" novalidate role="form">
                        <div class="form-row">
                            <div class="col-md-12">
                                <label for="name">Full Name</label>
                                <input type="text" class="form-control" id="c_name" name="c_name" placeholder="John Doe" required>
                                <div class="valid-Feedback">Looks good!</div>
                                <div class="invalid-Feedback">Enter your full name</div>
                            </div>
                            <div class="col-md-12">
                                <label for="email">Email id</label>
                                <input type="email" class="form-control" id="c_email" name="c_email" placeholder="[email protected]" required>
                                <div class="valid-Feedback">Looks good!</div>
                                <div class="invalid-Feedback">Enter your email id</div>
                            </div>  
                             <div class="col-md-12">
                                <label for="message">Message</label>
                                <textarea type="text" class="form-control" id="c_message" name="c_message" placeholder="Enter your message here..." rows="3" required></textarea>
                                <div class="valid-Feedback">Looks good!</div>
                                <div class="invalid-Feedback">Enter your message</div>
                            </div>
                        </div>
                        <div class="g-recaptcha" data-sitekey="6LcW4goTAAAAAJdqW6csccw7CBSvY2u55dZj8Tb5"></div>
                        <button id="submit" class="btn btn-primary" type="submit">Submit form</button>
                    </form><div class="ajax-response"></div>

PHP

(function($){

    function isValidEmailAddress(emailAddress) {
        var patter= new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
        return pattern.test(emailAddress);
    };

    $("#contact-form").submit(function(e) {
        e.preventDefault();
        var c_name = $("#c_name").val();
        var c_email = $("#c_email").val();
        var c_message = $("#c_message ").val();
        var responseMessage = $('.ajax-response');

        if (( c_name== "" || c_email == "" || c_message == "") || (!isValidEmailAddress(c_email) )) {
            responseMessage.fadeIn(500);
            responseMessage.html('<i class="fa fa-warning"></i> Check all fields.');
        }

        else {
            $.ajax({
                type: "POST",url: "assets/PHP/mail.PHP",dataType: 'json',data: {
                    c_email: c_email,c_name: c_name,c_message: c_message
                },beforeSend: function(result) {
                    $('#contact-form button').empty();
                    $('#contact-form button').append('<i class="fa fa-cog fa-spin"></i> Wait...');
                },success: function(result) {
                    if(result.sendstatus == 1) {
                        responseMessage.html(result.message);
                        responseMessage.fadeIn(500);
                        $('#contact-form').fadeOut(500);
                    } else {
                        $('#contact-form button').empty();
                        $('#contact-form button').append('<i class="fa fa-retweet"></i> Try again.');
                        responseMessage.html(result.message);
                        responseMessage.fadeIn(1000);
                    }
                }
            });
        }
        return false;
    });

})(jQuery);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）