使用引导验证器成功验证后发送发布请求
Send post request on successful validation using bootstrapvalidator
我使用引导验证器(bootstrapvalidator.com)来验证我的表单,但当字段验证成功后,我想使用post-request将内容发送到php文件。如何实现这一点?
下面是我的表单和验证代码,验证工作没有任何问题。。
HTML
<form id="form" method="post" action="contact-form.php">
<div class="container">
<div class="form-container">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-8">
<div class="form-group">
<label>Name: <span class="required">*</span></label>
<input type="text" class="form-control" name="name" id="name" placeholder="Enter your name">
</div>
.
.
.
.
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<p id="returnmessage"></p>
<button type="reset" class="btn btn-info pull-right">Reset</button>
<button type="submit" id="send" class="btn btn-info pull-right">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JS:
var isValid = $('#form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
message: 'The name is not valid',
validators: {
notEmpty: {
message: 'The name is required and cannot be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'The name must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z]+$/,
message: 'The username can only consist of alphabets'
}
}
},
/* country: {
message: 'The country is not valid',
validators: {
notEmpty: {
message: 'The country is required'
}
}
},
*/ state: {
message: 'The state is not valid',
validators: {
notEmpty: {
message: 'The country and state is required'
}
}
},
city: {
message: 'The city is not valid',
validators: {
notEmpty: {
message: 'The city is required'
}
}
},
/* ccode: {
message: 'The country code is not valid',
validators: {
notEmpty: {
message: 'The country code is required'
}
}
},
ccode1: {
message: 'The country code is not valid',
validators: {
notEmpty: {
message: 'The country code is required'
}
}
},
*/ phone: {
validators: {
digits: {
message: 'The phone number can contain digits only'
},
notEmpty: {
message: 'The phone number is required'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email is required and cannot be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
msg: {
message: 'The message is not valid',
validators: {
notEmpty: {
message: 'The message is required'
}
}
},
captchabox: {
message: 'The CAPTCHA is not valid',
validators: {
notEmpty: {
message: 'The CAPTCHA is required'
},
identical: {
field: 'captchatext',
message: 'The CAPTCHA does not match'
}
}
}
}
}).isValid();
if(isValid){
var name = $("#name").val();
var designation = $("#designation").val();
var company = $("#company").val();
var country = $("#country").val();
var state = $("#state").val();
var city = $("#city").val();
var zip = $("#zip").val();
var ccode = $("#ccode").val();
var phone = $("#phone").val();
var fax = $("#fax").val();
var email = $("#email").val();
var website = $("#website").val();
var hear = $("#hear").val();
var message = $("#message").val();
var captcha = $("#captchatext").val();
var capbox = $("#captchabox").val();
alert("Name:"+name);
$.post("contact_form.php", {
name1: name,
designation1: designation,
company1: company,
country1: country,
state1: state,
city1: city,
zip1: zip,
ccode1: ccode,
phone1: phone,
fax1: fax,
email1: email,
website1: website,
hear1: hear,
message1: message,
},
function(data) {
$("#returnmessage").append(data); // Append returned message to message paragraph.
if (data == "Your Query has been received, We will contact you soon.") {
$("#form")[0].reset(); // To reset form fields on success.
}
});
}
如果我说得对,我想你只需要添加这样的验证检查:
参见此处
// create var and store result in it
var isValid = $('#form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
}, .....).is_valid();
// add the is_valid() to the end
// check with the validation var
if(isValid){
//do some here...
}
相关文章:
- 验证HTTP请求来自NFC标签上的点击
- 在此服务器上找不到请求的-表单验证(位于localhost端口80的Apache/2.4.9(Win32)PHP/5.5
- 在 Angular2 中构建多部分/表单数据 POST 请求并验证输入类型文件
- 如何触发带有第一个请求(Windows 身份验证)的授权标头的 AJAX 帖子
- 是否可以间隔暂停视频,并请求验证码以继续播放
- 向具有不同域和基本身份验证的服务器发出 ajax POST 请求是不可能的
- 无法连接到网络服务器.验证 Web 服务器是否正在运行,并且传入的 http 请求未被防火墙阻止
- 我是否必须在每个请求上验证谷歌令牌ID
- 验证请求参数的最佳方法是帆.js/节点.js
- 使用 jQuery 请求进行验证无法正常工作
- AngularJS:如何使用$resource请求发送身份验证令牌
- 尝试在 Node.js 应用中执行 Google 身份验证时请求超时 (v 0.10.13)
- 如何使用Node.js向AWS发出经过身份验证的请求
- 使用rails-api、backbone.js和design进行身份验证的请求
- Strongloop环回验证和请求生命周期
- 验证传入请求
- 在Javascript中,为什么验证器请求'new'在函数调用之前
- 使用Javascript创建一个HTTP POST身份验证基本请求
- Firebase电子邮件身份验证网络请求失败
- 如何在javascript中通过websocket验证每个请求