个人中心
gpt4 book ai didi

javascript - Bootstrap JavaScript 用于在存在无效字段和其余表单未按预期工作时禁用表单提交

转载 作者：行者123 更新时间：2023-12-04 03:28:22 25 4
gpt4 key购买 nike

我正在使用 Bootstrap 版本 4。Index.php 包含以下联系表格。我希望用户在单击提交时看到验证消息，以引起他们对错过的必填字段的注意。例如，当用户在没有填写任何字段的情况下点击提交时，用户会看到下面的内容，这是我想要实现的行为，我目前有:

[请注意，为了节省这篇文章的篇幅，所有图片都可以通过点击运行代码片段来显示]

<img src="/image/h1KwJ.png" width="50%" height="50%" />

联系方式:Index.php

<!DOCTYPE HTML> 
<html>
<head>
    <title>Contact form</title>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>

<body>

<div class ="container">

<div class="col-lg-6 push-lg-3">

<h1> Contact us</h1>
<p>Fill out the below form to contact us</p>

<form id="contactForm" class="contact-form needs-validation" action="form.php" method="POST" novalidate>
    <div class="contact-form-success alert alert-success d-none mt-4" id="contactSuccess">
        <strong>Success!</strong> Your message has been sent to us.
    </div>

    <div class="contact-form-error alert alert-danger d-none mt-4" id="contactError">
        <strong>Error!</strong> There was an error sending your message.
        <span class="mail-error-message text-1 d-block" id="mailErrorMessage"></span>
    </div>
    
    <div class="form-row">
        <div class="form-group col-lg-6">
            <label for="name" class="required font-weight-bold text-dark">Full Name</label>
            <input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="name" id="name" required>
        </div>

        <div class="form-group col-lg-6">
            <label class="required font-weight-bold text-dark">Email Address</label>
            <input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" id="email" required>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col">
            <label class="font-weight-bold text-dark">Phone</label>
            <input type="text" value="" data-msg-required="Please enter the phone number." maxlength="100" class="form-control" name="phone" id="phone" required>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col">
            <label class="required font-weight-bold text-dark">Message</label>
            <textarea maxlength="5000" data-msg-required="Please enter your message." rows="5" class="form-control" name="message" id="message" required></textarea>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col">
            <div class="g-recaptcha" data-sitekey="Your_Public_Key"></div>
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col">
            <input type="submit" value="Send Message" class="btn btn-primary btn-modern" data-loading-text="Loading...">
        </div>
    </div>
</form>
</div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script src="js/jquery.validate.min.js"></script>
<script src="js/view.contact.js"></script>


<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
    'use strict';
    window.addEventListener('load', function () {
      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.getElementsByClassName('needs-validation');
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms, function (form) {
        form.addEventListener('submit', function (event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          else {
            $("#submit-btn .text").text("Enviado");
            $("#submit-btn").addClass("active");
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();
</script>


<script>
$("#contactForm").validate();
</script>



</body>
</html>

问题

我遇到的问题是，当用户点击提交时，一切都按计划进行，表单刷新，并出现成功消息，但表单刷新并验证显示红色框，这是我要解决的问题。这是当前成功提交表单的样子，这是不正确的:

<img src="/image/eV7A6.png" width="50%" height="50%" />

当用户点击提交时，我希望用户看到成功消息；我希望表单在没有绿色或红色框的情况下刷新到输入字段。为了更好地理解这一点，请查看我想要实现的以下行为:

<img src="/image/0Yf01.png" width="50%" height="50%" />

我知道问题出在用于禁用表单提交的 JavaScript(上文)或 view.contact.js 中:

我很感激关于如何解决这个问题的任何见解或指导。

我还有一个问题:我需要下面的代码吗？

<script>
$("#contactForm").validate();
</script>

非常感谢任何关于如何改进此代码的评论。

最佳答案

来自官方文档:

To reset the appearance of the form (for instance, in the case ofdynamic form submissions using AJAX), remove the .was-validated classfrom the again after submission.

Bootstrap > Form > Validation > How it Works

在您的情况下，您需要添加以下行:

$form.removeClass('was-validated');

内部:

$.ajax({...})
.done(function() {
    //HERE
),
.always({...});

关于javascript - Bootstrap JavaScript 用于在存在无效字段和其余表单未按预期工作时禁用表单提交，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67260293/

25 4 0
文章推荐： reactjs - 错误 : Unable to resolve module ./Easing from node_modules\react-native-reanimated\src\Animated.js
文章推荐： javascript - 访问被 CORS 策略阻止的 Web list
文章推荐： database - Mongo 服务器未通过 cmd mongod --dbpath/Users/mayankpatel/data/db 启动
文章推荐： javascript - Primefaces 可编辑 p :selectOneMenu chrome autofill problem
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com