Search code examples
asp.net.net-3.5ajaxcontroltoolkitmaskededitextender

Check if value of textbox extended with MaskedEditExtender is valid?


Below is my code:

<asp:TextBox 
  ID="FromDateTextBox" 
  runat="server" />
<asp:ImageButton 
  ID="FromDateImageButton" 
  runat="server" 
  ImageUrl="~/images/calander.png" />
<ajaxkit:CalendarExtender 
  ID="FromDate" 
  runat="server" 
  TargetControlID="FromDateTextBox" 
  CssClass="CalanderControl" 
  PopupButtonID="FromDateImageButton" 
  Enabled="True" />                
<ajaxkit:MaskedEditExtender 
  id="FromDateMaskedEditExtender" 
  runat="server" 
  targetcontrolid="FromDateTextBox" 
  Mask="99/99/9999" 
  messagevalidatortip="true" 
  onfocuscssclass="MaskedEditFocus" 
  oninvalidcssclass="MaskedEditError" 
  masktype="Date" 
  displaymoney="Left" 
  acceptnegative="Left" 
  errortooltipenabled="True" />
<ajaxkit:MaskedEditValidator 
  id="FromDateMaskedEditValidator" 
  runat="server" 
  controlextender="FromDateMaskedEditExtender" 
  controltovalidate="FromDateTextBox" 
  emptyvaluemessage="Date is required" 
  invalidvaluemessage="Date is invalid" 
  display="Dynamic"
  tooltipmessage="Input a date" 
  emptyvalueblurredtext="*" 
  invalidvalueblurredmessage="*"
  validationgroup="MKE" />

I've set Culture="auto" UICulture="auto" in @Page directive and EnableScriptGlobalization="true" EnableScriptLocalization="true" in script manager to have client culture specific date format in my textbox.

I also have a Go button on my page on which I will do a partial post back. So, I want to validate the FromDateTextBox in javascript when the Go button is clicked.

UPDATE

I know how to create a javascript click handler. But because masked editor is already validating the date on focus shift, I'm thinking there should be some boolean property (like IsValid) exposed by it which will allow me to see if the text box contains valid date.

FURTHER TRIALS

I also tried below code and Page_Validators[f].isvalid always returns true even when the date is invalid and MaskEditValidator shows me a red star near the Text box.

function isDateValid() {
  var b = true;              
  for (var f = 0; f < Page_Validators.length; f++) {
    if (!Page_Validators[f].isvalid)
      b = false;
  }
  return b;
}
$('#GoButton').click(function() {

  if (!isDateValid()) {
    return false;
  }
  loadProducts();
});

Solution

  • I resolved it. Basically when there is an invalid date entered in the textbox the MaskedEditExtender changes the provided (OnInvalidCssClass="MaskedEditError") class of the textbox and I picked it up as a checking point for validation.

    $('#GoButton').click(function () {
      if($('#<%=FromDateTextBox.ClientID%>').hasClass('MaskedEditError')) {
        return false;
      }
    }