我正在对服务器上的php页面进行ajax跨域请求。我通过ajax将表单从html发布到服务器上的php页面。客户端的验证有问题。
我不知道如何在发送表单之前在客户端进行验证。
html表单是标准表单,发布输入字段:姓名、姓氏、消息。。。。我的html表单,客户端:
<script type="text/javascript">
var output = $('.nesa');
$(document).ready(function(){
$("#form1").submit(function (e) {
e.preventDefault();
$.ajax({
url: 'http://www.example.com/form.php',
crossDomain: true, //set as a cross domain requests
type: 'post',
data: $("#form1").serialize(),
beforeSend: function (){
// add spinner
$('.spinner').append('<img id="animacija" src="spinnersmall.gif" alt="Loading" />');
},
success: function (data) {
$(".nesa").html(data);
alert("sent " + data);
},
error: function(){
output.text('Message is not sent!');
}
});
});
});
如何进行验证?我试图在发送之前放入代码,但没有成功。或者可能使用submitHandler?
想法是,当用户点击提交时,验证开始,如果未能告知"插入您的电子邮件地址"。现在,当我点击提交时,它会将数据发送到服务器。我想要第一个检查输入字段。
这个表单是实际工作的,它将数据发送到服务器,但只需要弄清楚如何进行验证。在ajax调用中将验证放在哪里?
感谢
创建一个函数来验证返回true/false的表单。在$.ajax.check之前调用函数,如果return为false,则返回。。请参阅下面的示例。。。
if(!validateForm())
return false;
首先,您实际上在使用AJAX表单吗?
你解释说你通过AJAX加载表单本身,但你也用这种方式发送它吗?在我看来,你正试图用HTML的方式发送它。在发送表单之前,您可以挂接到发送按钮的click
事件。但是,由于该按钮是在运行时添加到页面的,因此需要将事件注册到document
。
$(document).on('click', 'input[type=submit]', function() {
// Validate form
// Add error message on fail, and return
// Else submit form via AJAX
});
在任何一种情况下,当用户跳到下一个字段时,都可以使用jQuery的blur
事件来验证每个字段。您甚至可以在用户每次使用keypress
按键时进行验证。
我总是在将它们输入AJAX调用之前对它们进行验证。这是我的示例
$('#form_nieuwsbrief').bind('submit',function(){
var name = $('input[name=naamNieuwsbrief]').val();
var email = $('input[name=emailNieuwsbrief]').val();
var proceed = true;
if (name==""){
$('input[name=naamNieuwsbrief]').css({'border':'2px solid red'});
proceed = false;
}
if (email==""){
$('input[name=emailNieuwsbrief]').css({'border':'2px solid red'});
proceed = false;
}
if(proceed == false){
$("#msg").append("<div class='alert alert-danger' role='alert'>U bent informatie vergeten in te vullen.</div>");
setTimeout(function(){
$('.alert').fadeOut(400, function(){
$(this).remove();
})
;},10000
);
}
if(proceed == true){ // make the ajax call
这只是一个快速的通讯,只要求姓名和电子邮件。但原则是一样的。在进行ajax调用之前,使用您设置的变量创建if-else语句(如果有错误)。否则,您可以将其粘贴到原始验证中,这样您就可以继续操作了。
请在发送ajax请求之前验证表单。若并没有错误,那个么ajax请求应该被发送,否则返回false。你可以这样做:
$("#form1").submit(function (e) {
e.preventDefault();
// Get the Login Name value and trim it
var name = $.trim($('#name').val());
// Check if empty of not
if (name === '') {
alert('Text-field is empty.');
return false;
}
});
你可以看到演示(http://jsfiddle.net/LHZXw/1/)
您也可以在Keyup上创建一个函数。
您已经在通过服务器端进行验证了,对吗?为什么不使用相同的验证规则,通过Ajax使其看起来像您的客户端呢。我有一个关于如何做到这一点的教程:
http://michaelsoriano.com/how-to-ajax-validate-forms/