我无法使联系表格起作用,因为它返回错误

发布于 2025-01-23 09:12:55 字数 4599 浏览 1 评论 0原文

我正在为用户与公司联系的网页开发联系表,问题是我一旦提交所需字段的信息,它会返回错误警报,仅在这些字段集(输入和TextAarea)时才需要显示,该警报只需要显示留空。

这是HTML:

                        <form>
                            <fieldset class="form-group" id="form-group">

                                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                            </fieldset>

                            <fieldset class="form-group" id="form-group2">

                                <textarea type="message" class="form-control" id="exampleMessage" placeholder="Message"></textarea>
                            </fieldset>

                            <!--Avoid redirect to another page (or will not reload).-->
                            <form onsubmit="return false">
                            </form>

                            <br>

                            <form action="?" method="POST">
                              <div class="g-recaptcha" class="recaptcha_footer" style="padding-left: 20px !important;" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" data-secretkey="6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe" data-callback="recaptcha_callback" data-theme="dark"></div>
                              <br/>
                              <!--input type="submit" value="Submit"-->
                            </form>
                            
                            <br>

                            <fieldset class="form-group text-xs-right">
                              <button onclick="sendContact();" type="submit" id="submit" disabled>Send</button>
                            </fieldset>

这是JavaScript:

          <script>
            function getDataInput() {
            return document.querySelector('input[id="exampleInputEmail1"]:checked', 'textarea[id="exampleMessage"]:checked')
            }
            //Group fields into an object
            var fieldset = {};

            document.addEventListener("DOMContentLoaded", function() {
             fieldset.exampleInputEmail1 = document.getElementById('#exampleInputEmail1');
             fieldset.exampleMessage = document.getElementById('#exampleMessage');
            })

            //Checking that the field is not empty 
            function isNotEmpty(value) {
            if (value == null || typeof value == 'undefined' ) return false;
            return (value.length > 0);
            }

            //Check if a string is an email
            function isEmail(email) {
            let regex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
            return regex.test(String(email).toLowerCase());
            }

            //Prepare all validation functions
            function fieldValidation(fieldset, validationFunction) {
            if (fieldset == null) return false;

            let isFieldValid = validationFunction(fieldset.value)
            if (!isFieldValid) {
            fieldset.className = 'placeholderRed';
            } else {
            fieldset.className = '';
            }

            return isFieldValid;
            }

            //isValid: central function for checking the validity of our contact form
            function isValid() {
            var valid = true;
 
            valid &= fieldValidation(fieldset.exampleInputEmail1, isNotEmpty);
            valid &= fieldValidation(fieldset.exampleMessage, isNotEmpty);

            return valid;
          }

          //User class constructor: Combine multiple values under the same roof
          class User {
          constructor(exampleInputEmail1, exampleMessage) {
          this.exampleInputEmail1 = exampleInputEmail1;
          this.exampleMessage = exampleMessage;
           }
          }

          //Sending the contact form data
          function sendContact() {
            fieldset.exampleInputEmail1, fieldset.exampleMessage = getDataInput();

            if (isValid()) {
              let usr = new User(exampleInputEmail1.value, exampleMessage.value);

              alert('Thanks for submiting, we will be in touch shortly.')

            } else {
              alert("There was an error")
            }
          }

          </script>

I am developing a Contact Form for a web page for users to contact the company, the problem is the once I submit the information of the required fieldsets it returns an error alert that only needs to display if these fieldsets (an input and a textarea) are left empty.

Here is the HTML:

                        <form>
                            <fieldset class="form-group" id="form-group">

                                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                            </fieldset>

                            <fieldset class="form-group" id="form-group2">

                                <textarea type="message" class="form-control" id="exampleMessage" placeholder="Message"></textarea>
                            </fieldset>

                            <!--Avoid redirect to another page (or will not reload).-->
                            <form onsubmit="return false">
                            </form>

                            <br>

                            <form action="?" method="POST">
                              <div class="g-recaptcha" class="recaptcha_footer" style="padding-left: 20px !important;" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" data-secretkey="6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe" data-callback="recaptcha_callback" data-theme="dark"></div>
                              <br/>
                              <!--input type="submit" value="Submit"-->
                            </form>
                            
                            <br>

                            <fieldset class="form-group text-xs-right">
                              <button onclick="sendContact();" type="submit" id="submit" disabled>Send</button>
                            </fieldset>

Here is the Javascript:

          <script>
            function getDataInput() {
            return document.querySelector('input[id="exampleInputEmail1"]:checked', 'textarea[id="exampleMessage"]:checked')
            }
            //Group fields into an object
            var fieldset = {};

            document.addEventListener("DOMContentLoaded", function() {
             fieldset.exampleInputEmail1 = document.getElementById('#exampleInputEmail1');
             fieldset.exampleMessage = document.getElementById('#exampleMessage');
            })

            //Checking that the field is not empty 
            function isNotEmpty(value) {
            if (value == null || typeof value == 'undefined' ) return false;
            return (value.length > 0);
            }

            //Check if a string is an email
            function isEmail(email) {
            let regex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
            return regex.test(String(email).toLowerCase());
            }

            //Prepare all validation functions
            function fieldValidation(fieldset, validationFunction) {
            if (fieldset == null) return false;

            let isFieldValid = validationFunction(fieldset.value)
            if (!isFieldValid) {
            fieldset.className = 'placeholderRed';
            } else {
            fieldset.className = '';
            }

            return isFieldValid;
            }

            //isValid: central function for checking the validity of our contact form
            function isValid() {
            var valid = true;
 
            valid &= fieldValidation(fieldset.exampleInputEmail1, isNotEmpty);
            valid &= fieldValidation(fieldset.exampleMessage, isNotEmpty);

            return valid;
          }

          //User class constructor: Combine multiple values under the same roof
          class User {
          constructor(exampleInputEmail1, exampleMessage) {
          this.exampleInputEmail1 = exampleInputEmail1;
          this.exampleMessage = exampleMessage;
           }
          }

          //Sending the contact form data
          function sendContact() {
            fieldset.exampleInputEmail1, fieldset.exampleMessage = getDataInput();

            if (isValid()) {
              let usr = new User(exampleInputEmail1.value, exampleMessage.value);

              alert('Thanks for submiting, we will be in touch shortly.')

            } else {
              alert("There was an error")
            }
          }

          </script>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文