我要把这在希望有人可能会看到一个错误,因为我已经讨论了这样的方式来很多次了。这是工作的罚款约十分钟但当时刚刚分手。
I'm throwing this up in hope that someone might spot a mistake because I've gone over this way to many times now. It was working fine for about ten minutes but then just broke.
我有一个codeigniter网站,有3个领域的一个非常简单的接触形式。我使用isHappy.js来验证表单,然后发送关闭服务器。 isHappy.js应停止AJAX功能,直到形式已经得到证实,但此部分没有发生。如果我点击提交按钮没有填写表单验证错误闪烁,但随后的AJAX调用时,形式提交。
I have a codeigniter website with a very simple contact form with 3 fields. I'm using isHappy.js to validate the form and then send off to the server. isHappy.js should stop the AJAX function until the form has validated but this parts not happening. If I click the submit button without filling out the form the validation errors flash up but then the ajax call is made and the form is submit.
$(function() {
$('#contact-form').isHappy({
fields: {
'#email': {
required: true,
message: 'How can I reach you sans email??'
},
'#subject': {
required: true,
message: 'Can you give me a clue to what you inquiring about please'
},
'#body': {
required: true,
message: 'More details please....'
}
}
});
$('#contact-form').bind('submit', function(e) {
e.preventDefault();
var query_params = $('#contact-form').serialize();
$.ajax({
type: 'POST',
url: 'http://website.dev:8080/contact/email/ajax',
data: query_params,
dataType: 'json',
success: function(string){
$('#contact-form').fadeOut('medium', function() {
$('#linkedin').after("<div style=\"clear:both;\" /><div id=\"contact-complete\" stlye=\"width:100%;height:200px;\"><h1>"+string+"</h1></div>").fadeIn('medium');
});
}
});
});
});
<form action="http://website.dev:8080/contact/email" method="post" accept-charset="utf-8" id="contact-form">
<div class="contact-input">
<input type="text" name="email" id="email" placeholder="Your email" value="" />
</div>
<div class="contact-input">
<input type="text" name="subject" id="subject" placeholder="Subject" value="" />
</div>
<div class="contact-textarea">
<textarea rows="10" placeholder="How can I help you?" name="body" id="body"></textarea>
</div>
<input type="submit" value="Send" id="contact-click" />
按照 happy.js文档,如果验证失败,发生两件事情:
According to the happy.js docs, If validation fails two things happen:
在该领域将获得不高兴
类。
在该领域将获得&LT;跨度&GT;
前右等,同一个类 unhappyMessage的DOM
和任何领域的id的id是加 _unhappy
。
The field will get an unhappy
class.
The field will get a <span>
right before it, in the DOM with a class of unhappyMessage
and an id of whatever the field's id is plus _unhappy
.
这纯粹是presentational。你必须检查的形式不你的AJAX调用之前,包含具有不高兴
类的任何投入。
This is purely presentational. You'll have to check that the form does not contain any inputs with unhappy
classes before your AJAX call.
var is_unhappy = false;
$('#contact-form div :input').each( function(i) {
if ( $(this).hasClass('unhappy') ) {
is_unhappy = true;
return false;
}
});
if(!is_unhappy){
//do ajax.
}