我在购物车结帐页面上有一个表单,用户将填写表单并单击按钮以验证表单而不离开页面。完成验证后,结帐按钮会更改类,可以单击。
这一切都在chrome中干净利落,但是当你单击验证按钮并且表单清空时,firefox只刷新页面。我需要改变什么来在Firefox中工作?
HTML
<form name="contact"id="contact" onSubmit="return checkform()" method="post" action="" >
<fieldset>
<label for="firstname">Full Name</label>
<input onkeyup="checkform()" type="text" name="firstname" placeholder="Full Name" class="required" id="first_name">
<label for="address">Address</label>
<input onkeyup="checkform()" type="text" name="address" placeholder="Address" class="required" id="address">
<label for="Company">Company</label>
<input onkeyup="checkform()" type="text" name="company" placeholder="Company" class="required" id="company">
<label for="email">Email</label>
<input onkeyup="checkform()" type="text" name="email" placeholder="yourname@domain.com" class="required email" id="email">
<label for="phone">Phone</label>
<input onkeyup="checkform()" type="text" name="phone" placeholder="(xxx) xxx xxxx`" id="phone">
<button id="btn" type="button" class="validation">Validate</button>
</fieldset>
jquery的
$(document).ready(function () {
$('#contact').validate({ // initialize the plugin
rules: {
firstname: {
required: true
},
address: {
required: true
},
company: {
required: true
},
email: {
required: true
},
phone: {
required: true
},
},
});
$('#btn').click(function() {
event.preventDefault();
if ($('#contact').valid()) {
alert('Form is Valid, Please click Send Order');
$("#btn-submit").removeClass("disabled");
$("#btn-submit").addClass("simpleCart_checkout");
$("#btn-submit").attr("href", "javascript:;");
} else {
alert('Please Complete all Required Feilds');
}
});
});
答案 0 :(得分:1)
这里需要一个参数来引用事件对象:
$('.btn').click(function(e) {
e.preventDefault();
...
});
答案 1 :(得分:0)
将event
参数作为参数传递给点击处理程序
$('.btn').click(function(event) {
^