フォームの送信に失敗した場合にボタンIDを戻す

Question

私はオプションの画像アップロードフィールドを含むかなり単純なフォームを持っています。画像データのアップロードには時間がかかりますので、フォームボタン（CSSで背景画像として表示されます）を使用して、フォームがデータを提出する過程にあることをユーザーに知らせることができます複数のクリックを防止するためにボタンを無効にします。ここで

は、フォームの関連する部分である：

<input name="formsubmit" type="submit" id="button" value="Submit!"> 

私はjQueryの次のビットをつなぎ合わせるために管理している：

jQuery('#formid').submit(function() { 
    jQuery('#button').attr('id', 'button-post'); 
    jQuery('#button').attr('disabled','disabled'); 
}); 

これは私が必要とするまさにありません。問題は、私はjQueryインライン検証プラグイン（Link）を使用しています。フォームにアクセスしてフィールドを入力せずにフォームを送信し、送信ボタンをクリックすると、ボタンのIDが変更されます。必要なフィールドが記入されていないため返品エラーを使用すると、ボタンのid属性は元のidに戻りません。

方法はありますか？おそらく、フォームが実際に正常に提出されたかどうか、または他の必須フィールドのいずれかが一定の長さを超えているかどうかをチェックする方法でしょうか？

ありがとうございました。

Answer 1

なぜボタンのIDを変更していますか？CSSクラスを切り替えるだけでいいのですか？

は、私はあなたが、検証が成功したかどうかを確認し、それがある場合は、フォームを提出することができると思います：

$("#button").click(function() 
{ 
    if your validation is OK 
    { 
     jQuery('#button').attr('id', 'button-post');  
     jQuery('#button').attr('disabled','disabled'); 
     document.forms["myform"].submit(); 
    } 
}); 

Answer 2

まあまず最初に、IDは変更する必要があり、それは悪い習慣です。これは、クラスが使用されるものです。

しかし、とにかく問題を回避するには、実際にajaxリクエストを実際に処理する必要があります。

jQuery('#formid').submit(function() {  
    var options = 
    { 
     //Define ajax options 
     url : '' //your http request target 
     type: "post", 
     target: "#responsePanel", 
     beforeSend: function() 
     { 
      // button-disabled is a CSS class that would have your visual effects for the 
      // changed button. 
      jQuery('#button').addClass("button-disbaled").attr('disabled','disabled'); 
     },   
     success: function(response, statusString, xhr) 
     { 
      // process your response. 
     }, 
     error: function(response, status, err) 
     { 
      //Handle your error here. 
      jQuery('#button').removeClass("button-disbaled").attrRemove('disabled'); 
     } 
    } 
    $.ajax(options); 
}); 

注：コードはテストされていないため、エラーが発生する可能性があります。これに

Answer 3

変更は：

jQuery('#formid').submit(function() { 
    if ($("#formid").validationEngine('validate')) { 
    jQuery('#button').attr('id', 'button-post'); 
    jQuery('#button').attr('disabled','disabled'); 
    } 
}); 

これはあなたの検証は、ボタンの状態を変更する前に渡すことを保証します。