Javascript changes the asynchronous validation form to a synchronous form

Javascript changes the asynchronous validation form to a synchronous form
Disadvantages of synchronous form verification when an error message is returned, the entire page needs to be reloaded (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) the original intention of asynchronous verification form is to improve user experience and minimize network requests. Below we will look at a common asynchronous form verification (check whether the employee ID exists in the background and the employee ID is valid) to reduce the server pressure) verification employee ID 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 = "the 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 employee ID $ workerIdInput. on ('focal ', function () {var workerId = $. trim ($ (this ). val (); $ (this ). data ('before', workerId) ;}); // checks $ workerIdInput during blur. on ('bl Ur ', function () {var workerId = $. trim ($ (this ). val (); // when the length is 0, the error message 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 inputs 123456, call the background interface and the returned result is: Incorrect employee ID // If the entered content is changed to 123456, the verification program will not access the network, directly display the error message if (workerId = $ (this ). data ('before') {if (! IsWorkerIdCorrect) {showWorkerIdError (employee);} 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 () {// Our form can be submitted if (! IsWorkerIdCorrect) {$ workerIdInput. focus (); return false ;}}); after writing the above Code, the verification in an input box is basically done. I think the carriage return operation is not supported in other places that affect the user experience. oh my god, and the carriage return operation must also be able to submit forms. If the user's network speed is slow, clicking the submit button will not reflect any feedback, because isWorkerIdCorrect is false, the modified 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; // identify whether the background verification employee ID has been completed (true: In verification, false: Check not started or ended) var isWorkerIdLoading = false; // identifies whether the user has submitted the form var isSubmit = false; var ERRO R_WORKER_ID_IS_NULL = "employee ID cannot be blank"; var Employee = "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 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, the error message 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 inputs 123456, call the background interface and the returned result is: Incorrect employee ID // If the entered content is changed to 123456, the verification program will not access the network, directly display the error message if (workerId = $ (this ). data ('before') {if (! IsWorkerIdCorrect) {showWorkerIdError (employee);} return false;} // call the background interface to check whether the employee id has 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 a request, ID: verifying employee ID isWorkerIdLoading = true;}, success: callback, complete: function () {// after the end, disable ID isWorkerIdLoading = false; // In the background data verification process, if the user submits a form This automatic submission 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 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 ;}});