Client side custom validation

I have a text box to hold phone number and drop down list that lists mobile providers. I am trying to make sure that both are selected. I use a customer validator with client side validation, using a validation group. Same validation group is assigned to an "Update" button.

When I add phone number and no mobile provider, or vice versa, an error message is displayed as soon as control loses focus. But if I click the "Update" button, no error is displayed and update happily goes on updating. Can't see what I am doing wrong. None of the textbox or drop down have autopostback set.

function ValidateMobile(oSrc, args) {
    var tbMobile = document.getElementById('<%=tbMobile.ClientID%>');
    var ddlMobileProvider = document.getElementById('<%=ddlMobileProvider.ClientID%>');
    args.IsValid = true;
    var mobileNum = tbMobile.value.trim();
    var selectedCarrierValue = ddlMobileProvider.options[ddlMobileProvider.selectedIndex].value;

    if ((mobileNum != "" && selectedCarrierValue == "") || (mobileNum == "" && selectedCarrierValue != ""))
        args.IsValid = false;
}

<asp:TextBox runat="server" ID="tbMobile" CssClass="NormalSmall" Width="95%" />
<ajaxToolkit:MaskedEditExtender runat="server" ID="mtbMobile" TargetControlID="tbMobile" Mask="(999) 999-9999" />

<asp:DropDownList runat="server" ID="ddlMobileProvider" Width="95%" DataSourceID="odsMobileProviders" DataTextField="CARRIERNAME"  DataValueField="MOBILECARRIERID" AppendDataBoundItems="true">
    <asp:ListItem Text="Select Mobile Provider ..." Value="" />
</asp:DropDownList>

<asp:ImageButton runat="server" ID="ibUpdate"  ImageUrl="~/assets/images/buttons/Update.png" OnClick="ibUpdate_Click"  CausesValidation="true" ValidationGroup="vgCustInfo" />

<asp:CustomValidator runat="server" ID="cvMobile"  ControlToValidate="tbMobile" Display="Dynamic" ValidationGroup="vgCustInfo"  ClientValidationFunction="ValidateMobile" ErrorMessage="Both Carrier and Mobile Number must be specified"></asp:CustomValidator>

Answers


function ValidateMobile() {
var tbMobile = document.getElementById('<%=tbMobile.ClientID%>');
var ddlMobileProvider = document.getElementById('<%=ddlMobileProvider.ClientID%>');
args.IsValid = true;
var mobileNum = tbMobile.value.trim();
var selectedCarrierValue = ddlMobileProvider.options[ddlMobileProvider.selectedIndex].value;

if ((mobileNum != "" && selectedCarrierValue == "") || (mobileNum == "" && selectedCarrierValue != ""))
    args.IsValid = false;

}


Need Your Help

One page web apps and inline javascript and CSS

javascript html css mobile-website

We've built what is called a one page web app(a single html page + ajax)

How to initialize a database on a data volume container?

postgresql python-3.x docker flask docker-compose

Here my simple scenario, I have a simple Flaskapp that connect to a postgres this way: