|
Hi,
I have a registration form which consists of, amongst others, an email field. When the user enters their email address, the onChange event is fired and a server side page method is called which checks the email address and returns a boolean value. This works fine when invoked from the onChange event of the textbox.
The problem occurs when the submit button is clicked; the submit button invokes the Javascript validation function and posts back if the form is valid, however, because the email validation involves an AJAX server side call, the function isn't waiting for the response and so causes the form to be submitted regardless of the email validation result. I hope I have explained this adequately but if not I have included a cut down version of my page:
<script type="text/javascript">
var pageIsValid;
var emailAddressMessage;
function ValidateForm() {
pageIsValid = true;
PageMethods.EmailAddressIsValid(document.getElementById('<%= txtNewMemberEmailAddress.ClientID %>').value, ValidateEmailAddressSuccess, ValidateEmailAddressFailed);
if (pageIsValid == false) {
alert('Some information is either missing or invalid. Hover your mouse over the red crosses for more information');
}
return pageIsValid;
}
function ValidateEmailAddressSuccess(result) {
if (result == false) {
document.getElementById('<%= imgNewMemberEmailAddress.ClientID %>').src = "/Images/cross.png";
emailAddressMessage = 'The email address you have entered is already in use';
pageIsValid = false;
}
else {
document.getElementById('<%= imgNewMemberEmailAddress.ClientID %>').src = "/Images/tick.png";
emailAddressMessage = 'This field is valid';
}
}
function ValidateEmailAddressFailed(result) {
document.getElementById('<%= imgNewMemberEmailAddress.ClientID %>').src = "/Images/cross.png";
alert(result.get_message());
}
</script>
<asp:Button runat="server" ID="btnRegister" Text="Register" CssClass="button" OnClientClick='Javascript:return ValidateForm();' />
If anyone could suggest a better way of doing this it would be appreciated.
Thanks
Jay
|
|
|
|
|
You could try taking the "A" out of "AJAX".
Add the script below, and then change your PageMethods.EmailAddressIsValid call to SyncPageMethods.EmailAddressIsValid.
Type.registerNamespace("System.Net");
System.Net.XMLHttpSyncExecutor = function()
{
if (arguments.length !== 0) { throw Error.parameterCount(); }
System.Net.XMLHttpSyncExecutor.initializeBase(this);
};
System.Net.XMLHttpSyncExecutor.prototype =
{
executeRequest: function()
{
if (arguments.length !== 0) { throw Error.parameterCount(); }
var webRequest = this.get_webRequest();
if (this._started) { throw Error.invalidOperation(String.format(Sys.Res.cannotCallOnceStarted, "executeRequest")); }
if (null === webRequest) { throw Error.invalidOperation(Sys.Res.nullWebRequest); }
var body = webRequest.get_body();
var headers = webRequest.get_headers();
this._xmlHttpRequest = new XMLHttpRequest();
this._xmlHttpRequest.onreadystatechange = this._onReadyStateChange;
var verb = this._webRequest.get_httpVerb();
this._xmlHttpRequest.open(verb, this._webRequest.getResolvedUrl(), false);
if (headers)
{
for (var header in headers)
{
var val = headers[header];
if (typeof(val) !== "function")
{
this._xmlHttpRequest.setRequestHeader(header, val);
}
}
}
if ("post" === verb.toLowerCase())
{
if (null === headers || !headers["Content-Type"])
{
this._xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
}
if (!body)
{
body = "";
}
}
this._xmlHttpRequest.send(body);
if (null !== this._xmlHttpRequest)
{
this._responseAvailable = true;
webRequest.completed(Sys.EventArgs.Empty);
this._xmlHttpRequest.onreadystatechange = Function.emptyMethod;
this._xmlHttpRequest = null;
}
}
};
System.Net.XMLHttpSyncExecutor.registerClass("System.Net.XMLHttpSyncExecutor", Sys.Net.XMLHttpExecutor);
System.Net.WebServiceSyncProxy = function()
{
if (arguments.length !== 0) { throw Error.parameterCount(); }
System.Net.WebServiceSyncProxy.initializeBase(this);
};
System.Net.WebServiceSyncProxy.prototype =
{
_invokeSync: function(servicePath, methodName, useGet, params)
{
var e = Function._validateParams(arguments, [
{name: "servicePath", type: String},
{name: "methodName", type: String},
{name: "useGet", type: Boolean, optional: true},
{name: "params", mayBeNull: true, optional: true}
]);
if (e) { throw e; }
return System.Net.WebServiceSyncProxy.invokeSync(servicePath, methodName, useGet, params);
}
};
System.Net.WebServiceSyncProxy.invokeSync = function(servicePath, methodName, useGet, params)
{
var e = Function._validateParams(arguments, [
{name: "servicePath", type: String},
{name: "methodName", type: String},
{name: "useGet", type: Boolean, optional: true},
{name: "params", mayBeNull: true, optional: true}
]);
if (e) { throw e; }
var request = new Sys.Net.WebRequest();
request.set_executor(new System.Net.XMLHttpSyncExecutor());
request.get_headers()["Content-Type"] = "application/json; charset=utf-8";
if (!params) { params = {}; }
var urlParams = params;
if (!useGet || !urlParams) { urlParams = {}; }
request.set_url(Sys.Net.WebRequest._createUrl(servicePath + "/" + encodeURIComponent(methodName), urlParams));
var body = null;
if (!useGet)
{
body = Sys.Serialization.JavaScriptSerializer.serialize(params);
if (body === "{}") { body = ""; }
}
request.set_body(body);
var result = null;
request.add_completed(onComplete);
request.invoke();
function onComplete(response, eventArgs)
{
if (response.get_responseAvailable())
{
var statusCode = response.get_statusCode();
try
{
var contentType = response.getResponseHeader("Content-Type");
if (contentType.startsWith("application/json"))
{
result = response.get_object();
}
else if (contentType.startsWith("text/xml"))
{
result = response.get_xml();
}
else
{
result = response.get_responseData();
}
}
catch (ex)
{
}
var error = response.getResponseHeader("jsonerror");
var errorObj = (error === "true");
if (errorObj)
{
if (result)
{
result = new Sys.Net.WebServiceError(false, result.Message, result.StackTrace, result.ExceptionType);
}
}
else if (contentType.startsWith("application/json"))
{
if (!result || typeof(result.d) === "undefined")
{
throw Sys.Net.WebServiceProxy._createFailedError(methodName,
String.format(Sys.Res.webServiceInvalidJsonWrapper, methodName));
}
result = result.d;
}
if (statusCode < 200 || statusCode >= 300 || errorObj)
{
var err;
if (result && errorObj)
{
err = result.get_exceptionType() + "-- " + result.get_message();
}
else
{
err = response.get_responseData();
}
throw Sys.Net.WebServiceProxy._createFailedError(methodName, String.format(Sys.Res.webServiceFailed, methodName, err));
}
}
else
{
var msg;
if (response.get_timedOut())
{
msg = String.format(Sys.Res.webServiceTimedOut, methodName);
}
else
{
msg = String.format(Sys.Res.webServiceFailedNoMsg, methodName);
}
throw Sys.Net.WebServiceProxy._createFailedError(methodName, msg);
}
}
return result;
};
System.Net.WebServiceSyncProxy.generateSyncProxy = function(proxy, proxyName, syncProxyName)
{
var e = Function._validateParams(arguments, [
{name: "proxy"},
{name: "proxyName", type: String},
{name: "syncProxyName", type: String, optional: true}
]);
if (e) { throw e; }
if (proxy && proxy.prototype)
{
if (!syncProxyName || 0 === syncProxyName.length)
{
syncProxyName = proxyName + "Sync";
}
var item;
var foundMethods = [];
for (var key in proxy.prototype)
{
if ("string" === typeof(key) && "_" !== key.charAt(0) && "constructor" !== key && !key.startsWith("get_") && !key.startsWith("set_"))
{
item = proxy.prototype[key];
if ("function" === typeof(item) && 3 <= item.length)
{
item = item.toString();
item = item.replace(/function[^\(]*\(/g, "function(");
item = item.replace(/\(succeededCallback,\s*failedCallback,\s*userContext\)/g, "()");
item = item.replace(/,\s*succeededCallback,\s*failedCallback,\s*userContext\)/g, ")");
item = item.replace("this._invoke(this._get_path(),", "System.Net.WebServiceSyncProxy.invokeSync(" + proxyName + ".get_path(),");
foundMethods.push(syncProxyName + "." + key + "=" + item);
}
}
}
if (0 !== foundMethods.length)
{
eval(syncProxyName + "=function(){if(arguments.length!==0){throw Error.parameterCount();}throw Error.notImplemented();};");
for (var i = 0; i < foundMethods.length; i++)
{
eval(foundMethods[i]);
}
}
}
};
System.Net.WebServiceSyncProxy.registerClass("System.Net.WebServiceSyncProxy", Sys.Net.WebServiceProxy);
Sys.Application.add_init(function()
{
if (window.PageMethods)
{
System.Net.WebServiceSyncProxy.generateSyncProxy(window.PageMethods, "PageMethods", "SyncPageMethods");
}
});
function ValidateForm() {
pageIsValid = true;
if (!SyncPageMethods.EmailAddressIsValid(document.getElementById('<%= txtNewMemberEmailAddress.ClientID %>').value))
{
document.getElementById('<%= imgNewMemberEmailAddress.ClientID %>').src = "/Images/cross.png";
emailAddressMessage = 'The email address you have entered is already in use';
pageIsValid = false;
}
else
{
document.getElementById('<%= imgNewMemberEmailAddress.ClientID %>').src = "/Images/tick.png";
emailAddressMessage = 'This field is valid';
}
...
return pageIsValid;
}
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
WOW! You've either put a lot of thought into this answer or you've tackled this problem before! Either way thanks for the response, I will try this later today and let you know how it goes.
Thanks again
Jay
|
|
|
|
|
That looks like it will only work with .Net on the client side (i.e. on Windows), and probably only in IE.
Edit: also, synchronous HTTP requests lock the browser process (i.e. at least the page you're looking at) until it returns, which can potentially be the TCP timeout time. They're a pretty bad idea.
|
|
|
|
|
BobJanova wrote: That looks like it will only work with .Net on the client side (i.e. on Windows), and probably only in IE.
Nope. It works in Firefox, Chrome and Opera here. It's using the built-in XmlHttp object, which was added to all browsers several years ago.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
You need to add an extra step to your submission process, if you want AJAX validation before submitting. At the moment your workflow looks like
Press button -> client validation -> post to server
... as a synchronous process. You need to do
Press button -> client validation -> send AJAX validation request (...) receive AJAX response -> post to server
The (...) is an asynchronous wait with an event handler set. As for all AJAX queries you need to handle long delays and dropped connections gracefully.
Do you actually need this? I would think that people would expect a 'Submit' button to submit a postback, and for it to return them to the form after a postback with server-side validation errors would be acceptable. You will always have to do the server side validation anyway, so this is purely a user convenience feature.
|
|
|
|
|
You're right actually, I probably don't need this feature. I have implemented server side validation which will ensure that invalid data doesn't get saved, so I suppose the post back is only a minor inconvenience to the user. There will still be the inline validation so the likelihood is that the user will correct their errors before submitting anyway (or maybe not!).
Thanks a lot 
Jay
|
|
|
|
|
wow that got complicated
submit button > client script- if valid postback
So I would just add the onClientClick="return validate_Form();"
And write a simple function first in javascript/jquery
test if the fields are empty
test the field data
regex the email address,
if validation completes, then return true to fire the postback
Then you can get fancy, and add an ajax call to check for duplicate email address,
I would use onblurr for that, so it only fires once, and if a duplicate exist, focus the email field again.
|
|
|
|
|
dear sir...
i am starting coding with asp.net. i need your help. i want to ask that is how can i add given source code by you.
please help me and give suggestions for me how can i good command on coding of asp.net.
thanks sir
|
|
|
|
|
Which source code are you referring to and what are you trying to add it to? Please try and explain more clearly what problem you are trying to solve.
One of these days I'm going to think of a really clever signature.
|
|
|
|
|
firstly i want to say thanks for your reply....!!
sir i am starting coding with asp.net. i want to create a website for minimum functionality.so i need some technical help. i have lot of confusion....so please guide me.
|
|
|
|
|
I would suggest you start here[^] and work through some of the tutorials.
One of these days I'm going to think of a really clever signature.
|
|
|
|
|
i am doing my final year project n m stucked...can anybody complete my project on payment..its 70% completed already...for the rest of 30% i will pay..
|
|
|
|
|
Short answer: No. This site does not provide the service you require.
One of these days I'm going to think of a really clever signature.
|
|
|
|
|
Oh tish I say Richard. You have missed out on a bit of business skill there - why, for £2000 a day, I would be more than willing to finish the project (the money to be paid before the code is released of course).
|
|
|
|
|
One of these days I'm going to think of a really clever signature.
|
|
|
|
|
LOL
Hey, at least he offered money for the services and was totally honest about it.
|
|
|
|
|
Sure, no worries.
How much you gonna pay?
|
|
|
|
|
If you say "plx" because it is shorter than "please", I say "no" because it is shorter than "yes" 
--
"My software never has bugs. It just develops random features."
|
|
|
|
|
+5. Love this answer.
I wasn't, now I am, then I won't be anymore.
|
|
|
|
|
How do i write an SQL query for alphabetical ordered list?
SELECT countryName
FROM tblCountry
ORDER BY countryCode ASC
this queary nt correct???
|
|
|
|
|
I think you should order by countryName as suggested here[^].
One of these days I'm going to think of a really clever signature.
|
|
|
|
|
Iam using asp.net C#, when trying to add app_data folder ,its disabled help me
|
|
|
|
|
You will need to provide a lot more information than the above if you expect an answer. Remember, no one can see your screen so we have no idea what is going on at the time you get the problem.
One of these days I'm going to think of a really clever signature.
|
|
|
|
|
Are you using Visual Studio?
If so, use the mouse on your web project, and right click to add a folder, and call it App_Data.
You should see a gear in front of it when completed.
If you did it by hand, in windows, then you have to right click and include the folder in your project.
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
