Javascript rewrite asynchronous validation form to synchronous form _ javascript skills

This article describes how to rewrite an asynchronous validation form to a synchronous form in javascript. For more information, see Disadvantages of synchronous form verification

When responding to the error message, you need to reload the entire page (although there is a cache, the client still needs to compare whether each file is updated through the http protocol to keep the file up-to-date)
After the server responds to an error, all the information previously entered by the user is lost. you need to enter the information from the beginning (some browsers help us cache the data)

Original intention of asynchronous validation form

Improve user experience
Minimizes network requests and reduces server pressure
Next we will look at a common asynchronous form validation (check whether the employee ID exists in the background and the employee ID is valid)

Verification employee ID

The code is as follows:

Var BASE_PATH = '$ {rc. contextPath }';
Var $ workerIdInput = $ ('# workerIdInput ');
Var $ workerIdError = $ ('# workerIdError ');
// Identify whether the employee ID entered by the user is correct
Var isWorkerIdCorrect = false;
Var ERROR_WORKER_ID_IS_NULL = "employee ID cannot be blank ";
Var ERROR_WORKER_ID_IS_NOT_CORRECT = "enter a valid employee ID ";
// Display the error message
Function showWorkerIdError (errorMessage ){
Worker workeriderror.html (errorMessage );
$ WorkerIdError. show ();
}
// Hide the error message
$ WorkerIdInput. on ('keylow', function (){
$ WorkerIdError. hide ();
});
// Save the Last entered employee ID
$ WorkerIdInput. on ('focal ', function (){
Var workerId = $. trim ($ (this). val ());
$ (This). data ('before', workerId );
});
// Perform validation during blur
$ WorkerIdInput. on ('blur', function (){
Var workerId = $. trim ($ (this). val ());
// When the length is 0, an error message with the employee ID blank is displayed.
If (! WorkerId. length ){
ShowWorkerIdError (ERROR_WORKER_ID_IS_NULL );
Return false;
}
// If the user's current input data is the same as the previous input data, the background interface is not called.
// Assume that the user enters 123456 and calls the background interface. the returned result is an incorrect employee ID.
// If the entered content is changed to 123456, the verification program will not access the network and the error message will be displayed directly.
If (workerId = $ (this). data ('before ')){
If (! IsWorkerIdCorrect ){
ShowWorkerIdError (ERROR_WORKER_ID_IS_NOT_CORRECT );
}
Return false;
}
// Call the background interface to check whether the employee id is correct
CheckWorkerIdExists (workerId, function (data ){
IsWorkerIdCorrect = data. isWorkerIdExists;
If (! IsWorkerIdCorrect ){
ShowWorkerIdError (ERROR_WORKER_ID_IS_NOT_CORRECT );
}
});
});
Function checkWorkerIdExists (workerId, callback ){
$. Ajax ({
Url: BASE_PATH + '/forgotPwd/checkworkeridexists.htm ',
Data :{
WorkerId: workerId
},
Success: callback
});
}
$ WorkerIdForm. on ('submit ', function (){
// The form can be submitted only when the server returns true.
If (! IsWorkerIdCorrect ){
$ WorkerIdInput. focus ();
Return false;
}
});

After writing the above code, the verification in an input box is basically done.

I think there is something that affects user experience.
The carriage return operation is not supported yet. oh my god, and the form must be submitted by the carriage return operation.
If the user's network speed is slow, click the submit button, it will not be reflected, because isWorkerIdCorrect is false, only the server validation is successful is true

The modified code is as follows:

The code is as follows:

Var BASE_PATH = '$ {rc. contextPath }';
Var $ workerIdInput = $ ('# workerIdInput ');
Var $ workerIdError = $ ('# workerIdError ');
// Identify whether the employee ID entered by the user is correct
Var isWorkerIdCorrect = false;
// Check whether the employee ID in the background has been completed (true: Checking in progress, false: check not started or ended)
Var isWorkerIdLoading = false;
// Identify whether the user has submitted the form
Var isSubmit = false;
Var ERROR_WORKER_ID_IS_NULL = "employee ID cannot be blank ";
Var ERROR_WORKER_ID_IS_NOT_CORRECT = "enter a valid employee ID ";
// Display the error message
Function showWorkerIdError (errorMessage ){
Worker workeriderror.html (errorMessage );
$ WorkerIdError. show ();
}
// Hide the error message
$ WorkerIdInput. on ('keylow', function (){
$ WorkerIdError. hide ();
});
// Save the Last entered employee ID
$ WorkerIdInput. on ('focal ', function (){
Var workerId = $. trim ($ (this). val ());
$ (This). data ('before', workerId );
});
// Perform validation during blur
$ WorkerIdInput. on ('blur', function (){
Var workerId = $. trim ($ (this). val ());
// When the length is 0, an error message with the employee ID blank is displayed.
If (! WorkerId. length ){
ShowWorkerIdError (ERROR_WORKER_ID_IS_NULL );
Return false;
}
// If the user's current input data is the same as the previous input data, the background interface is not called.
// Assume that the user enters 123456 and calls the background interface. the returned result is an incorrect employee ID.
// If the entered content is changed to 123456, the verification program will not access the network and the error message will be displayed directly.
If (workerId = $ (this). data ('before ')){
If (! IsWorkerIdCorrect ){
ShowWorkerIdError (ERROR_WORKER_ID_IS_NOT_CORRECT );
}
Return false;
}
// Call the background interface to check whether the employee id exists
CheckWorkerIdExists (workerId, function (data ){
IsWorkerIdCorrect = data. isWorkerIdExists;
If (! IsWorkerIdCorrect ){
ShowWorkerIdError (ERROR_WORKER_ID_IS_NOT_CORRECT );
}
});
});
Function checkWorkerIdExists (workerId, callback ){
$. Ajax ({
Url: BASE_PATH + '/forgotPwd/checkworkeridexists.htm ',
Data :{
WorkerId: workerId
},
BeforeSend: function (){
// Before sending the request, identify that the employee ID is being verified
IsWorkerIdLoading = true;
},
Success: callback,
Complete: function (){
// Close the identifier after the end
IsWorkerIdLoading = false;
// If the user submits a form during data verification in the background, it is automatically submitted here
If (isSubmit ){
$ WorkerIdForm. submit ();
}
}
});
}
// Press enter to submit the form
$ WorkerIdInput. on ('keypress', function (e ){
If (e. which = 13 ){
$ (This). blur ();
$ WorkerIdForm. submit ();
}
});
$ WorkerIdForm. on ('submit ', function (){
// If the employee ID is being verified in the background, it indicates that the user has submitted the form
If (isWorkerIdLoading ){
IsSubmit = true;
Return false;
}
If (! IsWorkerIdCorrect ){
$ WorkerIdInput. focus ();
Return false;
}
});

The final result is that the two input boxes in the figure are both asynchronous validation, but the result looks the same as that of synchronization.
In the figure, the gprs network is used to simulate slow network speeds.