jQuery validation within dialog

Question

I'm creating popup forms using jQuery dialog & validation plugin. It all works fine except one thing - the error message doesn't clear off when form is closed, i.e. the form does not "reset" itself back to its initial state when user close the form.

My codes are as follows:

HTML

<div id="popupfrm" title="Action Plan Details">
  <form id="frmAClientActionPlanDetails" method="post" action="">
    <ul>
      <li>
        <label id="lActionPlanTitle" for="lActionPlanTitle">Action Plan Title*:</label>
        <input id="iActionPlanTitle" name="iActionPlanTitle" class="text" size="50" />
      </li>
      <li id="iActionPlanTitleMsg" class="errorStr"></li>
      <li>
        <label id="lDescription" for="lDescription">Description*:</label>
        <input id="iDescription" name="iDescription" class="text" size="50" />
      </li>
      <li id="iDescriptionMsg" class="errorStr"></li>
      <li>
        <label id="lNotes" for="lNotes">Notes:</label>
        <textarea id="iNotes" name="iNotes" cols="35" rows="4" class="text"></textarea>
      </li>
      <li id="iNotesMsg" class="errorStr"></li>
      <li>
        <label id="lDateUploaded" for="lDateUploaded">Date Uploaded:</label>
        <input id="iDateUploaded" name="iDateUploaded" class="text" size="50" maxlength="10" readonly="readonly" />
      </li>
      <li id="iDateUploadedMsg" class="errorStr"></li>
      <li>
        <label id="lFileUploaded" for="lFileUploaded">File Uploaded:</label>
        <input id="iFileUploaded" name="iFileUploaded" type="file" value=""/>
      </li>
      <li id="iFileUploadedMsg" class="errorStr"></li>
      <li><br />
      </li>
      <li> 
        <input type="submit" id="btnUpdate" name="btnUpdate" value="Update" class="button" /> 
      </li>
    </ul>
  </form>
</div>

JS - dialog

$(document).ready(function(){
    var iActionPlanTitle = $( "#iActionPlanTitle" ),
        iDescription = $( "#iDescription" ),
        iNotes = $( "#iNotes" ),
        iFileUploaded = $( "#iFileUploaded" ),
        allFields = $( [] ).add( iActionPlanTitle ).add( iDescription ).add( iNotes ).add( iFileUploaded );
alert(allFields);       

    $('#popupfrm').dialog({
        autoOpen: false,
        width: 600,
        modal: true,
        close: function() {
            allFields.val( "" ).removeClass( "error" );
        }
    });

    // Popup Links
    $('#popupfrm_link').click(function(){
        $('#popupfrm').dialog('open');
        return false;
    });
    $('#popupfrm_link2').click(function(){
        $('#popupfrm').dialog('open');
        return false;
    });

    //hover states on the static widgets
    $('#popupfrm_link, ul#icons li').hover(
        function() { $(this).addClass('ui-state-hover'); }, 
        function() { $(this).removeClass('ui-state-hover'); }
    );

});

JS - validation

$('#frmAClientActionPlanDetails').validate({
    rules: {
        iActionPlanTitle: {
            required: true,
            minlength: 2
        },
        iDescription: {
            required: true,
            minlength: 2
        }
    },
    messages: {
    iActionPlanTitle: {
        required: "Please enter a title."
    },      
    iDescription: {
        required: "Please enter a description."
    }   
    },
    errorElement: "li",
});

Can anyone please advise? Thanks!

Arun Manjhi · Accepted Answer · 2012-10-29 10:36:37Z

1

On closing the dialog box, you have to clear the errormsg string value :

close: function() {
 .
 . 
   $('#iFileUploadedMsg').val('');
 .
 . 
  }

edited Oct 29, 2012 at 10:36

answered Oct 29, 2012 at 10:07

Arun Manjhi

1739 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Himanshu · Accepted Answer · 2012-10-29 09:16:44Z

0

Debug your page and check what is the class or id your error labels are taking. Then based on those attributes you can clear text from them.
For clearing you can use something like this:

$(id).html('');

edited Oct 29, 2012 at 9:16

Himanshu

32.8k32 gold badges117 silver badges137 bronze badges

answered Apr 25, 2012 at 7:35

RSSHAH

694 bronze badges

Collectives™ on Stack Overflow

jQuery validation within dialog

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related