4 Replies Latest reply: May 16, 2012 4:02 PM by Ben Pleysier RSS

    Validation fails when dynamically set the text field values and submit the form

    Ramakrishna1982

      Hi ,

       

         I have mutiple text fields for inputing the date .User can enter date on one text field and select a check box to apply the smae  date to rest of all other date input fields .

          When I use ValidationTextField widget and user enters date on all fields its working fine but when users enters date in first field and selects the check box to copy the same for rest of all other date fields and submit the form, validation fails . What I have noticed is onblur  event is not fired when dynamically set the field values , I have tried dynamically calling the onBlur event but no luck .Bleow is my code base .. Thanks in advance for any help and suggestions ..

       

       

      <head>

      ... 

      <!-- Link the Spry Validation Text Field JavaScript library -->

      <script src="spry/1_6_1/widgets/textfieldvalidation/SpryValidationTextField.js" type="text/javascript"></script>

      <!-- Link the CSS style sheet that styles the widget -->

      <link href="spry/1_6_1/widgets/textfieldvalidation/SpryValidationTextField.css" rel="stylesheet" type="text/css" />

      <script>

       

       

      function copyCancelInfo(){

       

       

                          with (document.form1){

       

       

                                    if(copyCancelInfoCkBox.checked){

       

       

                                               for (var i=1;i<4;i++){

       

                                                        eval("removalEventDate"+i).value = removalEventDate0.value;

       

                                    }

       

       

                                    }

                          }

       

       

                }

       

       

                </script>

      </head>

      <body>

                <form id="form1" name="form1" method="post" action="TestDateFieldServlet">

                          <!-- Create the text field widget and assign a unique id-->

                           <%for(int j=0;j<4;j++){ %>

                          <span id="CANCEL_DT_div<%=j%>">

                         <input type="text" name="removalEventDate<%=j%>" id ="removalEventDate<%=j%>"  size="10" maxlength="10" value="" />

                         <span class="textfieldInvalidFormatMsg">Please enter a valid date (mm/dd/yyyy).</span>

               </span>

               <br/>

                          <%} %>

                          <input type="checkbox" name="copyCancelInfoCkBox" value="1" onclick="copyCancelInfo()" >

       

       

                                    Copy  Date to all Fileds

                          <br/>

                <input name="btnSubmit" type="submit"  id="Submit" value="Submit Changes"  >

       

                </form>

      <!-- Initialize the Validation Text Field widget object-->

      <script type="text/javascript">

      <% for(int k=0;k<4;k++){ %>

                var CANCEL_DT_div<%=k%> = new Spry.Widget.ValidationTextField("CANCEL_DT_div<%=k%>", "date", {useCharacterMasking:true, format:"mm/dd/yyyy", hint:"mm/dd/yyyy", validateOn:["blur"], isRequired:true});

      <% } %>

       

       

      </script>

      </body>

       

      Thanks,

      Ramakrishna.

        • 2. Re: Validation fails when dynamically set the text field values and submit the form
          Ramakrishna1982 Community Member

          Hi Gramps ,

           

            Thanks for your reply . It helps me understanding how to dynamically build and destroy validations..

            May be I am missing something or I was not very clear on my orginal post .

             In my case for example when page is loaded there are 3 textfieds where user can enter date . We also provide check box next to first date field and if user enters date in first text filed and selects the check box , we populate the other 2 text fields with same date from first date field.Then user submits the form . After submit user recieving "value required" error message for the date field two and three . I have smiplied my example and pasted the same below .   Appreciate your time and help ...

           

          To reproduce the issue :

           

          1. Open below code in browser and Enter the date in first date field.

          2. select the check box and other 2 date fields will be populated

          3.  submit the form .

           

           

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>Copy Date Validation</title>

          <link href="http://labs.adobe.com/technologies/spry/widgets/textfieldvalidation/SpryValidationTextFiel d.css" rel="stylesheet">

          <script>

          function copy(){

          if(document.form1.copyCancelInfoCkBox.checked){

          document.form1.date2.value =document.form1.date1.value

          document.form1.date3.value =document.form1.date1.value

          }

          }

          </script>

          </head>

           

          <body>

          <form name ="form1" id="form1" method="post" action="#">

           

          <span id="sprytextfield1">

          <label for="f_date1">Date1</label>

          <input name="date1" id="f_date1" type="text" value="">

          <span class="textfieldRequiredMsg">A value is required.</span>

          </span>      <input type="checkbox" name="copyCancelInfoCkBox" value="1" onclick="copy()" > Copy date values

          <br/>

          <span id="sprytextfield2">

          <label for="f_date2">Date2</label>

          <input name="date2" id="f_date2" type="text" value="">

          <span class="textfieldRequiredMsg">A value is required.</span>

          </span>

          <br/>

          <span id="sprytextfield3">

          <label for="f_date3">Date3</label>

          <input name="date3" id="f_date3" type="text" value="">

          <span class="textfieldRequiredMsg">A value is required.</span>

          </span>

          <br/>

          <hr>

          <input type="submit" value="Submit" />

          </form>

           

          <script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryValidationTextField.js"></script>

          <script>

          var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "date", {useCharacterMasking:true, format:"mm/dd/yyyy", hint:"mm/dd/yyyy", validateOn:["blur"], isRequired:true});

          var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "date", {useCharacterMasking:true, format:"mm/dd/yyyy", hint:"mm/dd/yyyy", validateOn:["blur"], isRequired:true});

          var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "date", {useCharacterMasking:true, format:"mm/dd/yyyy", hint:"mm/dd/yyyy", validateOn:["blur"], isRequired:true});

            

          </script>

          </body>

          </html>

           

            

          • 3. Re: Validation fails when dynamically set the text field values and submit the form
            Ramakrishna1982 Community Member

            HI Gramps,

                 Delete/Destroy and build validations worked for me .Below is modified javascript copy() menthod from my previous example . Thanks for your help .....

             

            function copy(){

                      if(document.form1.copyCancelInfoCkBox.checked){

                           document.form1.date2.value =document.form1.date1.value

                           document.form1.date3.value =document.form1.date1.value

                          

                           if(sprytextfield1 && sprytextfield1 .destroy){

                                  sprytextfield1 .resetClasses();

                                  sprytextfield1 .destroy();

                                  sprytextfield1 = null;

                             }

                        if (!sprytextfield1 ){

                             sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "date", {useCharacterMasking:true, format:"mm/dd/yyyy", hint:"mm/dd/yyyy", validateOn:["blur"], isRequired:true});

             

                        }

             

             

                        if(sprytextfield2 &&sprytextfield2.destroy){

                             sprytextfield2 .resetClasses();

                             sprytextfield2 .destroy();

                             sprytextfield2 = null;

                        }

                        if (!sprytextfield2 ){

                             sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2 ", "date", {useCharacterMasking:true, format:"mm/dd/yyyy", hint:"mm/dd/yyyy", validateOn:["blur"], isRequired:true});

             

                        }

                 }

            }

             

             

            Thanks,

            Ramakrishna

            • 4. Re: Validation fails when dynamically set the text field values and submit the form
              Ben Pleysier MVP

              Thank you for your feedback. Glad it worked out.

               

              Gramps