jquery ajaxform（）で各フォームの入力を確認して、デフォルト値を空白にしようとしています

Question

これまでのところうまく機能しているajaxform（）プラグインを使用しています。しかし、私の入力フィールドにはデフォルト値があり、ユーザーが手を触れていないフォームを送信しただけの場合は、beforeSubmit：コールバックを使用してフォームを送信する前に空白にする必要があります。

簡単に言えば、フォームの入力フィールドを確認し、必要に応じて送信を停止する構文はわかりません。私はeach（）メソッドとthis.defaultValueを使用し、おそらくfalseを返すという考えを持っていますか？しかし、私は詳細については分かりません。

誰かがおそらく私にアイデアを与えることができますか？ありがとう。これまでのところ私のコードでは、checkValues（）関数が残っています。

$(document).ready(function(){ 


    //========= Functions ========= 


    function styleForm() { 
     $('.quickcontact label').hide(); 
     $('input[type="text"],textarea').addClass("idleField"); 
     $('input[type="text"],textarea').focus(function() { 
     $(this).removeClass("idleField").addClass("focusField"); 
      if (this.value == this.defaultValue){ 
       this.value = ''; 
      } 
      if(this.value != this.defaultValue){ 
       this.select(); 
      } 
     }); 
     $('input[type="text"],textarea').blur(function() { 
      $(this).removeClass("focusField").addClass("idleField"); 
      if ($.trim(this.value) == ''){ 
       this.value = (this.defaultValue ? this.defaultValue : ''); 
      } 
     }); 
    } 


    //options for ajaxform() function 
    var options = { 
     target:  '.quickcontactDisplay', // target element(s) to be updated with server response 
     beforeSubmit: checkValues, // pre-submit callback 
     success:  reBind // post-submit callback 

     // other available options: 
     //url:  url   // override for form's 'action' attribute 
     //type:  type  // 'get' or 'post', override for form's 'method' attribute 
     //dataType: null  // 'xml', 'script', or 'json' (expected server response type) 
     //clearForm: true  // clear all form fields after successful submit 
     //resetForm: true  // reset the form after successful submit 

     // $.ajax options can be used here too, for example: 
     //timeout: 3000 
    };   

    //rebinds the ajax functionality to updated form html 
    function reBind() { 
     // re-do the form, as it has just been replaced 
     $('form.quickcontact').ajaxForm(options); 
     styleForm(); 
    } 

    //checks for default values of form on submit to prevent them being submitted 
    function checkValues(){ 

    } 

    // ==== logic ===== 

    $('form.quickcontact').ajaxForm(options); 
    styleForm();   

}); 

そして、私のフォームのhtml：

<form action="/enquiries/add" method="post" id="EnquiryAddForm" class="quickcontact"> 

    <input type="hidden" value="POST" name="_method"/> 
    <input type="hidden" id="EnquiryVisitorId" value="276" name="data[Enquiry][visitor_id]"/> 
    <input type="text" id="EnquiryName" maxlength="200" value="Your name" name="data[Enquiry][name]"/> 
    <input type="text" id="EnquiryEmailAddress" maxlength="200" value="Your Email" name="data[Enquiry][emailAddress]"/> 
    <textarea id="EnquiryEnquiry" rows="6" cols="30" name="data[Enquiry][enquiry]">Your Email Address</textarea> 
    <input type="submit" value="Ok, I'm done"/> 
</form> 

Answer 1

あなたはラベルとしてデフォルト値を悪用しています。これは問題を引き起こしています。むしろそれらの問題を回避しようとする代わりに、原因を修正することをお勧めします。

—を設定する場合、のデフォルト値はです。疑似ラベルとしてデフォルト値を使用しないでください。代わりに<label>要素を使用してください。

Answer 2

はあなたがdocumentationを見ていないことがありますか？

beforeSubmit： コールバック関数フォームが送信される前に呼び出されます。 「beforeSubmit」コールバックが は事前送信ロジックを実行するか、 フォームデータを検証するためのフックとして提供することができます。 'beforeSubmit' コールバックがfalseを返した場合、フォーム は送信されません。 「beforeSubmit」コールバック3つの引数で 呼び出される： アレイ形式のフォームデータ、 ためのjQueryオブジェクトフォーム、およびオプション がajaxForm/ajaxSubmitに渡されるオブジェクト。フォームデータの 配列は、以下の 形式を取ります：ここで

[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ] 

Default value: null 

Answer 3

アイデアを、まだそれをチェックしませんでした。

function checkValues(formData, jqForm, options) 
{ 
    for(var i in formData) 
     if (formData[i].value == "") 
      return false; 
    return true; 
} 

Answer 4

あなたがする必要があるかのように聞こえる：開始時にすべての入力/ TEXTAREAて

1. 実行をして、デフォルト値をつかむ、そして内のキー
2. として要素IDを持つ連想配列にそれを固執もう一度入力を繰り返して、提出前の値と配列を比較します。一致するものが見つかると、その値を ""に設定できます。