Validation with ajax AutoCompleteExtender

Question

I have a TextBox with AutoCompleteExtenderwhen the person starts typing in the TextBox List with City name Appear .This works fine but now I want to validate that if they just type in a textbox and don't select one from the list that it validates that City Is Not Exist In database. I want to validate it Using Ajax And Without PostBack Before Final Submit of form.

Answer 1

Add new js file with content below and add add reference on it to ToolkitScriptManager's Scrips collection:

Type.registerNamespace('Sjax');

Sjax.XMLHttpSyncExecutor = function () {
    Sjax.XMLHttpSyncExecutor.initializeBase(this);

    this._started = false;
    this._responseAvailable = false;
    this._onReceiveHandler = null;
    this._xmlHttpRequest = null;

    this.get_aborted = function () {
        //Parameter validation code removed here...
        return false;
    }

    this.get_responseAvailable = function () {
        //Parameter validation code removed here...
        return this._responseAvailable;
    }

    this.get_responseData = function () {
        //Parameter validation code removed here...
        return this._xmlHttpRequest.responseText;
    }

    this.get_started = function () {
        //Parameter validation code removed here...
        return this._started;
    }

    this.get_statusCode = function () {
        //Parameter validation code removed here...
        return this._xmlHttpRequest.status;
    }

    this.get_statusText = function () {
        //Parameter validation code removed here...
        return this._xmlHttpRequest.statusText;
    }

    this.get_xml = function () {
        //Code removed
    }

    this.executeRequest = function () {
        //Parameter validation code removed here...
        var webRequest = this.get_webRequest();

        if (webRequest === null) {
            throw Error.invalidOperation(Sys.Res.nullWebRequest);
        }

        var body = webRequest.get_body();
        var headers = webRequest.get_headers();
        var verb = webRequest.get_httpVerb();

        var xmlHttpRequest = new XMLHttpRequest();
        this._onReceiveHandler = Function.createCallback(this._onReadyStateChange, { sender: this });
        this._started = true;
        xmlHttpRequest.onreadystatechange = this._onReceiveHandler;
        xmlHttpRequest.open(verb, webRequest.getResolvedUrl(), false); // False to call Synchronously

        if (headers) {
            for (var header in headers) {
                var val = headers[header];

                if (typeof (val) !== "function") {
                    xmlHttpRequest.setRequestHeader(header, val);
                }
            }
        }

        if (verb.toLowerCase() === "post") {
            if ((headers === null) || !headers['Content-Type']) {
                xmlHttpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            }

            if (!body) {
                body = '';
            }
        }

        this._started = true;
        this._xmlHttpRequest = xmlHttpRequest;
        xmlHttpRequest.send(body);
    }

    this.getAllResponseHeaders = function () {
        //Parameter validation code removed here...
        return this._xmlHttpRequest.getAllResponseHeaders();
    }

    this.getResponseHeader = function (header) {
        //Parameter validation code removed here...
        return this._xmlHttpRequest.getResponseHeader(header);
    }

    this._onReadyStateChange = function (e, args) {
        var executor = args.sender;

        if (executor._xmlHttpRequest && executor._xmlHttpRequest.readyState === 4) {
            //Validation code removed here...

            executor._responseAvailable = true;

            executor._xmlHttpRequest.onreadystatechange = Function.emptyMethod;
            executor._onReceiveHandler = null;

            executor._started = false;

            var webRequest = executor.get_webRequest();
            webRequest.completed(Sys.EventArgs.Empty);

            //Once the completed callback handler has processed the data it needs from the XML HTTP request we can clean up
            executor._xmlHttpRequest = null;
        }
    }

}

Sjax.XMLHttpSyncExecutor.registerClass('Sjax.XMLHttpSyncExecutor', Sys.Net.WebRequestExecutor);

On a page:

 <ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1">
      <Scripts>
           <asp:ScriptReference Path="~/XMLHttpSyncExecutor.js"  />
      </Scripts>
 </ajaxToolkit:ToolkitScriptManager>

Then, add CustomValidator for target TextBox and use function below for client validation:

 <asp:TextBox runat="server" ID="myTextBox" Width="300" autocomplete="off" />
 <asp:CustomValidator runat="server" ID="myTbCustomValidator" ControlToValidate="myTextBox"
      Text="*" Display="Dynamic" ValidateEmptyText="false" ClientValidationFunction="validateTextBox"
      OnServerValidate="ValidateTextBox" />

 function validateTextBox(sender, args) {
      if (args.Value.length > 0) {

           var extender = $find("AutoCompleteEx"); // AutoComplete extender's BehaviorID

           if (extender._completionListElement) {
                var children = extender._completionListElement.childNodes;
                var length = extender._completionListElement.childNodes.length;
                for (var i = 0; i < length; i++) {
                     if (children[i].innerHTML == args.Value) {
                          args.IsValid = true;
                          return;
                     }
                }
           }

           var request = new Sys.Net.WebRequest();

           request.set_url('<%= ResolveClientUrl("~/AutoComplete/AutoComplete.asmx/Validate")  %>');
           var body = Sys.Serialization.JavaScriptSerializer.serialize({ value: args.Value });
           request.set_body(body);
           request.set_httpVerb("POST");
           request.get_headers()["Content-Type"] = "application/json; encoding=utf-8";
           request.add_completed(function (eventArgs) {
                var result = Sys.Serialization.JavaScriptSerializer.deserialize(eventArgs.get_responseData());
                args.IsValid = result.d;
           });
           var executor = new Sjax.XMLHttpSyncExecutor();
           request.set_executor(executor);
           request.invoke();
      }
 }

The main idea of code above is to check suggested items at first for entered text and if there aren't any concidence then to do synchronous AJAX call to Validate method of web service or page method. That method should have such signature: public bool Validate(string value)

P.S. Code for XMLHttpSyncExecutor taken here: Using Synchronous ASP.Net AJAX Web Service Calls and Scriptaculous to Test your JavaScript