2011-02-10 9 views
1

クローンされた要素の検証に問題があります。投稿されたコーディングの量にはお詫びしますが、私は最初からそれを入れてもよいと思いました。jQueryクローン検証

これは、元のDIVのサンプルである:

<div id="addDriver1" class="clonedInput"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="0" class="<?= $editDriver; ?>"> 


      <tr> 
      <td height="25" align="left" valign="top"><label for="driverReq" >Do you want to make this change or are 
you looking for a quote only?</label></td> 
      <td height="25" align="left" valign="top" colspan="2"><select name="driverReq" id="driverReq"> 
       <option selected="selected" value="">Please select</option> 
       <option value="Make Change" <? if ($_SESSION['driverReq']=="Make Change") { echo "selected";} ?> >Make Change</option> 
       <option value="Quote only" <? if ($_SESSION['driverReq']=="Quote only") { echo "selected";} ?>>Quote only</option> 
      </select></td> 
      </tr> 
      <tr> 
      <td height="5" colspan="3" ></td> 
      </tr> 
      <tr> 
      <td height="25" align="left" valign="top"><label for="driverDate" ;?>>What date would you like this change 
to be effective from? </label></td> 
      <td height="25" align="left" valign="top"><input name="driverDate" type="text" id="driverDate" style="width: 75px;" value="<?=$_SESSION['driverDate']; ?>" /></td> 
      <td height="25" align="left" valign="top">(DD/MM/YYYY) </td> 
      </tr> 
        <tr> 
      <td height="5" colspan="3" ></td> 
      </tr> 
</table></div> 

これは、クローニング・スクリプトである:これは、新しいID、名前などを有するクローン化された要素を出力

$('#btnAddDriver').live('click',function() { 
       var num  = $('.clonedInput').length; // how many "duplicatable" input fields we currently have 
       var newNum = new Number(num + 1);  // the numeric ID of the new input field being added 

       // create the new element via clone(), and manipulate it's ID using newNum value 
       var newElem = $('#addDriver1').clone(true).attr('id', 'addDriver' + newNum); 



       newElem.prepend("<div class='subhead1'>Add a driver "+newNum+"</div>"); 
       //newElem.find() 

       // insert the new element after the last "duplicatable" input field 
       $('#addDriver' + num).after(newElem); 
       //add the new ID to the inputs 
       newElem.find("*[id]").each(function() { 
        $(this).attr("id", $(this).attr("id") + newNum); 
        $(this).attr("name", $(this).attr("name") + newNum); 
        $(this).attr("value", $(this).attr("<?= $_SESSION['"+$(this).attr("name") + newNum+"']; ?>")); 
       }); 

       newElem.find("label").each(function() { 
       $(this).attr("for", $(this).attr("for")+ newNum); 
       }); 

、「>など

これは私がしようとしている検証の一種である:

 validateDriverReq2 = function(){  
     if(driverReq2.val()==""){ 
      $(this).addClass("error"); 
      driverReq2Info.html("Please confirm what you would like us to do with your request.<br>"); 
      $("#driverReq2Info").addClass("errorTop"); 
      //labelAddPC.addClass("labelError"); 
      $("label[for='driverReq2']").addClass("labelError"); 
      checkErrors(); 
      topErrorDriver(); 
      return false; 
     } 
     else{ 
      driverReq2.removeClass("error"); 
      driverReq2Info.html(""); 
      driverReq2Info.removeClass("errorTop"); 
      $("label[for='driverReq2']").removeClass("labelError"); 
      checkErrors(); 
      topErrorDriver(); 
      return true; 
     } 
    } 

    driverReq2.blur(validateDriverReq2); 
    driverReq2.change(validateDriverReq2); 

    validateDriverReq = function(){  

     if(driverReq.val()==""){ 
      $(this).addClass("error"); 
      driverReqInfo.html("Please confirm what you would like us to do with your request.<br>"); 
      $("#driverReqInfo").addClass("errorTop"); 
      //labelAddPC.addClass("labelError"); 
      $("label[for='driverReq']").addClass("labelError"); 
      checkErrors(); 
      topErrorDriver(); 
      return false; 
     } 
     else{ 
      driverReq.removeClass("error"); 
      driverReqInfo.html(""); 
      driverReqInfo.removeClass("errorTop"); 
      $("label[for='driverReq']").removeClass("labelError"); 
      checkErrors(); 
      topErrorDriver(); 
      return true; 
     } 
    } 

// } 

driverReq.blur(validateDriverReq); 
driverReq.change(validateDriverReq); 

は、フォームの他の地域でこのコードを使用して、それが正常に動作しますが、この検証が完全に台無しにされます。クローンされたdriverReq2を移動すると元のdriverReqのラベルがアクティブになり、エラーが表示されますが、driverReq2フィールド自体にエラーが正しく表示されます。変更やぼかしで自分自身を削除する

私は、変数をバインドしようとしましたが、フォーム名自体とその親div(例: #addDriver2)。

私は完全に夢中に

おかげ

答えて

-1

を行く前に役立つと私が間違ってやって助言することができますが、多くの皆さんにこれを複雑にしていないされ、ここで誰かを望んでいるが、全体のコードを読んで。あなたが知るべきことは次のとおりです。

クローニングするときは、単に類似の機能を持つ新しい要素を作成するだけです。クローンを作成する必要がある要素のIDを持っている場合は、クローン作成時にIDを変更して、含まれているlive()を使用しない限り、登録されていないイベントをクローンした要素に通知する必要があります新しいIDをセレクタとして使用するか、クラスを使用して多くの要素に対して同じ命令を実行します。

これが役に立ちます。 btwは、エレメントに接続されているイベントをクリアする前にdie()を使用する必要があります。