[英]unable to validate form and call function simultaneously onclick submit button
[英]Unable to validate form on submit
我正在使用一个名为liveValidation.js的小型库。 我正在使用它来验证表单中的几个输入。
如果有一些无效的输入,它应该自动禁用表单按钮,但是不会接缝。
这是我的HTML代码:
<form method="POST" id="contactForm">
<label for="name">Name</label>
<input type="text" name="name" id="contactFormName" value=""/>
<label for="email">E-Mail</label>
<input type="text" name="email" id="contactFormEmail" value=""/>
<label for="message">Your message here</label>
<textarea name="message" id="contactFormMessage"></textarea>
<input type="submit" id="submit" value="submit"/>
</form>
这是我初始化liveValidation.js的方法:
function liveValidation() {
var name = new LiveValidation('contactFormName');
name.add(Validate.Presence);
var email = new LiveValidation('contactFormEmail');
email.add(Validate.Presence);
email.add(Validate.Email);
var message = new LiveValidation('contactFormMessage');
message.add(Validate.Presence);
};
$(document).ready(function ($) {
$("#loadingDiv").hide(400);
liveValidation();
sendEmail();
});
这是AJAX请求代码:
function sendEmail() {
var form = $("#contactForm");
var resultDiv = $(".formResult");
$("#submit").click(function () {
$.ajax({
type: "POST",
url: "sendEmail.php",
data: form.serialize()
}).done (function (){
resultDiv.addClass('success').html('Message sent successfully')
}).fail(function () {
resultDiv.addClass('fail').html("Message not sent. Try again")
});
}
});
};
任何想法为什么这不能正常工作? 如果可以的话,这是livevalidation网站-> http://livevalidation.com/
您需要手动检查表格是否有效。 为此,您需要一个(任何一个)LiveValidation对象
尝试这个
$(document).ready(function ($) {
var obj = liveValidation();
sendEmail(obj);
});
function liveValidation() {
var name = new LiveValidation('contactFormName');
name.add(Validate.Presence);
var email = new LiveValidation('contactFormEmail');
email.add(Validate.Presence);
email.add(Validate.Email);
var message = new LiveValidation('contactFormMessage');
message.add(Validate.Presence);
return name;
};
function sendEmail(obj)
{
var automaticOnSubmit = obj.form.onsubmit;
$("#submit").click(function () {
var valid = automaticOnSubmit();
if(!valid)
{
alert('The form is not valid!');
event.preventDefault();
}
else
{
//submi form
}
});
}
另一种更好的方法是,您可以使用任何LiveValidation对象附加事件
$(document).ready(function ($) {
liveValidation();
sendEmail();
});
function liveValidation() {
var name = new LiveValidation('contactFormName');
name.add(Validate.Presence);
var email = new LiveValidation('contactFormEmail');
email.add(Validate.Presence);
email.add(Validate.Email);
var message = new LiveValidation('contactFormMessage');
message.add(Validate.Presence);
var automaticOnSubmit = name.form.onsubmit;
name.form.onsubmit = function(){
var valid = automaticOnSubmit();
if(valid)
alert('The form is valid!');
else
alert('The form is not valid!');
return false;
}
};
function sendEmail()
{
$("#submit").click(function () {
//submit form here
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.