个人中心
gpt4 book ai didi

javascript - AJAX 调用忽略表单验证

转载 作者：行者123 更新时间：2023-11-30 20:48:52 25 4
gpt4 key购买 nike

我有一个使用 AJAX 调用将信息提交到 Google 表格的表单，它工作正常，除非我尝试添加表单验证。然后它只是运行 AJAX 调用。

下面是我的 HTML 表单:

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <title>MooWoos Stall Booking</title>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
    <link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!--build:css css/styles.min.css-->
        <link rel="stylesheet" href="/css/bootstrap.css">
        <link rel="stylesheet" href="/css/style.css">
    <!--endbuild-->

</head>

<body>
<!-- Page Content -->
<div class="container">
    <nav class="navbar navbar-toggleable-md navbar-light">
        <a class="logo"><img src="assets/logo_opt.png"></a>
    </nav>

    <hr>

    <div class="modal fade" id="redirect_page" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="form-horizontal">

                    <div class="modal-body">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <div id="user_msg" align="left">Booking successful! Redirecting to PayPal... </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 col-md-offset-3 bookingform">
            <h1>Stall Booking Form</h1>
            <p class="lead">
                Fill out the form to book and pay for your stall!
            </p>
            <form id="bookingForm">
                <div class="form-group">
                    <label for="name">Name: </label>
                    <input type="text" name="name" class="form-control" placeholder="Your Name" value="" title="Please enter your name" required/>
                </div>
                <div class="form-group">
                    <label for="address">Address: </label>
                    <textarea name="address" class="form-control" placeholder="Your Address" value="" title="Please enter your address"></textarea>
                </div>
                <div class="form-group">
                    <label for="phone">Telephone Number: </label>
                    <input type="text" name="phone" class="form-control" placeholder="Your Telephone Number" value="" title="Please enter the best telephone number to contact you on"/>
                </div>
                <div class="form-group">
                    <label for="email">Email: </label>
                    <input type="text" name="email" class="form-control" placeholder="Your Email" value="" title="Please enter your Email address"/>
                </div>
                <div class="form-group">
                    <label for="date">Which date would you like to book?: </label>
                    <p><input type="radio" name="date" value="13th September" /> Sunday 13th September</p>
                    <p><input type="radio" name="date" value="6th February" /> Saturday 6th February</p>
                </div>
                <div class="form-group">
                    <label>What type of stall do you require?</label>
                    <div>
                        <input type="radio" name="stallType" id="stallType-Preloved" value="Preloved">
                        <label for="stallType-Preloved">Preloved</label>
                        <div class="reveal-if-active">
                            <label for="c-rail">Will you be bringing a clothes rail?: </label>
                            <input type="radio" name="c-rail" value="Yes" /> Yes
                            <input type="radio" name="c-rail" value="No" /> No
                        </div>
                    </div>
                    <div>
                        <input type="radio" name="stallType" id="stallType-Craft" value="Craft">
                        <label for="stallType-Craft">Craft</label>
                        <div class="reveal-if-active">
                            <label for="craftName">What name do you use?</label>
                            <input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" />
                        </div>
                    </div>
                    <div>
                        <input type="radio" name="stallType" id="stallType-Business" value="Business">
                        <label for="stallType-Business">Business</label>
                        <div class="reveal-if-active">
                            <label for="bizName">What is your business name?</label>
                            <input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" />
                            <label for="insurance">Do you have Public Liability Insurance?</label>
                            <input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="We will require proof of this prior to market day" value="Yes"/> Yes
                            <input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="Our insurance does not cover other businesses. Please ensure you have adequate cover and provide us with proof prior to market day" value="No"/> No
                        </div>
                    </div>
                </div>
                <input type="button" id="submit-form" class="btn btn-success btn-lg" value="Book & Pay" />
            </form>

        </div>

    </div>
    <!-- /.row -->

    <hr>

    <!-- Footer -->
    <footer>
        <div class="row">
            <div class="col-lg-12">
                <p>Copyright &copy; MooWoos 2018. Website by Luke Brewerton</p>
            </div>
        </div>
        <!-- /.row -->
    </footer>

</div>
<!-- /.container -->

<!--build:js js/mwbookings-min.js -->
<script src="js/jquery.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.serialize-object.min.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->

</body>
</html>

还有我的 JS 文件:

var $form = $('form#bookingForm'),
    url = 'https://script.google.com/macros/s/AKfycbwaEsXX1iK8nNkkvL57WCYHJCtMAbXlfSpSn3rsJj2spRi-41Y/exec'

function validateForm() {
    var errorMessage="";
    var name=document.forms["bookingForm"]["name"].value;
    if (name==null ||name==""){
        errorMessage = "Your Name is required.\
        ";
    }

    if (errorMessage !=""){
        alert(errorMessage);
        return false;
    }
}

$('#submit-form').on('click', function(e) {
    //e.preventDefault();
    var jqxhr = $.ajax({
        url: url,
        method: "GET",
        dataType: "json",
        data: $form.serializeObject(),
        success: function () {
            $('#redirect_page').modal('show');
            window.setTimeout(function(){location.reload()},3000);
        }
    });
});

我有一种偷偷摸摸的感觉，我需要在 AJAX 调用之前在提交函数中进行表单验证，但我是使用 JS 来执行此操作的新手，之前我使用 PHP 来完成这一切。

最佳答案

主要问题是您没有在任何地方调用 validateForm() 函数。您需要在提交表单之前调用它以检查其有效性。

出于可访问性原因，您还应该在表单中使用 type="submit" 按钮。这也将允许用户在某个字段处于焦点时通过按返回键来提交表单。然后您可以连接到 submit 事件来处理表单提交。试试这个:

<form id="bookingForm">
  <!-- form fields... -->

  <input type="submit" id="submit-form" class="btn btn-success btn-lg" value="Book & Pay" />
</form>
function validateForm() {
  var errorMessage = "";
  var name = $('input[name="name"]').val();
  if (name == null || name == "") {
    errorMessage = "Your Name is required.\n";
  }
  return errorMessage;
}

$form.on('submit', function(e) {
  e.preventDefault();

  var error = validateForm();
  if (error) {
    alert(error);
    return;
  }

  var jqxhr = $.ajax({
    // ajax request...
  });
});

然而，您应该注意，在大多数浏览器中，required 属性将为您实现此逻辑，而无需任何 JS 干预。

关于javascript - AJAX 调用忽略表单验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48400441/

25 4 0
文章推荐： c - a[ ][3] 此数组中已创建了多少行？
文章推荐： javascript - 提交带有 jquery 确认的表单
文章推荐： javascript - 如何获取单击按钮的数据属性值？
文章推荐： c - 如何理解递增无符号值概念？
行者123
个人简介

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

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