Javascript 使用AJAX调用忽略Forn验证
我有一个表单,它使用AJAX调用将信息提交到googlesheets,除了我尝试添加表单验证时,它工作正常。然后它只是运行AJAX调用 以下是我的HTML表单:Javascript 使用AJAX调用忽略Forn验证,javascript,jquery,ajax,forms,Javascript,Jquery,Ajax,Forms,我有一个表单,它使用AJAX调用将信息提交到googlesheets,除了我尝试添加表单验证时,它工作正常。然后它只是运行AJAX调用 以下是我的HTML表单: <!DOCTYPE html> <html class="no-js" lang="en"> <head> <title>MooWoos Stall Booking</title> <meta http-equiv="x-ua-compatible" co
<!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">×</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 © 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>
我有一种隐秘的感觉,在AJAX调用之前,我需要在submit函数中执行表单验证,但我对使用JS来执行此操作还不熟悉,以前我都是使用PHP来完成的。主要问题是,您没有在任何地方调用
validateForm()
函数。您需要在提交表单之前调用该函数以检查其有效性
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.\
";
return true;
}
if (errorMessage !=""){
alert(errorMessage);
return false;
}
}
$('#submit-form').on('click', function(e) {
//e.preventDefault();
var res = validateForm();
if(res != false) {
var jqxhr = $.ajax({
url: url,
method: "GET",
dataType: "json",
data: $form.serializeObject(),
success: function () {
$('#redirect_page').modal('show');
window.setTimeout(function(){location.reload()},3000);
}
});
} else {
//handle else condition however u want
}
});
出于可访问性的原因,您还应该在表单中使用type=“submit”
按钮。这还允许用户在字段处于焦点时按return键提交表单。然后,您可以钩住submit
事件来处理表单提交。试试这个:
<form id="bookingForm">
<!-- form fields... -->
<input type="submit" id="submit-form" class="btn btn-success btn-lg" value="Book & Pay" />
</form>
但是,您应该注意,在大多数浏览器中,
required
属性将为您实现此逻辑,而无需任何JS干预。您不是在任何地方调用validateForm()
。。?当您所做的只是在页面完成时刷新页面时,发送AJAX请求似乎也毫无意义?在submit函数中?这将是最有意义的。只需确保在发送AJAX之前检查函数调用的响应,这很有意义。我会的!它目前正在重新加载,因为当我到达该点时,它将重定向到PayPal,我在编写AJAX调用时进行了刷新,因此我不必每次提交表单时都手动重新加载。啊,好的。我将为您添加一个答案,因为一般来说,您可以做一些事情来改进代码。这实际上是一个注释,而不是答案。再重复一点,。谢谢你编辑它,但是一些关于问题是什么以及为什么你的代码有助于指导OP未来发生的事情的描述。谢谢。当然我会提供一些关于未来答案的描述。@Kiran你的答案没有对你所做的解释,为什么它会工作以及操作代码中的问题是什么。请编辑并显示解释。我确实尝试过使用HTML5的required属性,但似乎没有效果
<form id="bookingForm">
<!-- form fields... -->
<input type="submit" id="submit-form" class="btn btn-success btn-lg" value="Book & Pay" />
</form>