对话框中的 jQuery 验证答案

【问题标题】：jQuery validation within dialog对话框中的 jQuery 验证
【发布时间】：2011-08-20 00:33:52
【问题描述】：

我正在使用 jQuery 对话框和验证插件创建弹出表单。除了一件事之外，一切都很好 - 关闭表单时错误消息不会清除，即当用户关闭表单时，表单不会将自身“重置”回其初始状态。

我的代码如下：

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 - 对话框

$(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 - 验证

$('#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",
});

谁能给点建议？谢谢！

【问题讨论】：

标签： javascript jquery forms validation dialog

【解决方案1】：

在关闭对话框时，你必须清除errormsg字符串值：

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

【讨论】：

【解决方案2】：

调试您的页面并检查您的错误标签所采用的类或 ID。然后根据这些属性，您可以从中清除文本。
对于清除，你可以使用这样的东西：

$(id).html('');

【讨论】：