1

私はこれを何度も何度も行ってきたので、誰かが間違いを見つけてくれることを期待してこれを投げています。約10分間は正常に動作していましたが、その後壊れました。

私は、3つのフィールドを持つ非常に単純な連絡フォームを備えたcodeigniterWebサイトを持っています。isHappy.jsを使用してフォームを検証し、サーバーに送信しています。isHappy.jsは、フォームが検証されるまでAJAX関数を停止する必要がありますが、この部分は発生しません。フォームに入力せずに送信ボタンをクリックすると、検証エラーが点滅しますが、ajax呼び出しが行われ、フォームが送信されます。

ここにJavascriptがあります：

 $(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');        
                        });                                                             
                    }

                });
    });     
});

そしてHTML：

<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" />

4

2 に答える 2

3

happy.js docsによると、検証が失敗した場合、次の 2 つのことが起こります。

  1. フィールドはunhappyクラスを取得します。
  2. フィールドは、フィールドの id が plus<span>であるクラスと id を持つ DOM で、その前に権利を取得します。unhappyMessage_unhappy

これは純粋に表示上のものです。unhappyAJAX 呼び出しの前に、フォームにクラスを含む入力が含まれていないことを確認する必要があります。

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.
}
于 2012-09-26T21:03:05.363 に答える
0

HTMLなしではわかりませんが、どのタイプの入力を使用していますか？送信タイプの入力タグを使用しているようです。ボタンタイプの入力タグに変更し、バインドしてクリックするだけで、問題は解決するはずです。

于 2012-09-26T20:37:41.300 に答える