1. Mobile dynamic code form, jQuery Validation Plugin validation rules, as shown in Figure 1:
2. First, enter a Taiwan mobile number for testing. Because the current international dialing code corresponds to mainland China, it prompts: Please set the corresponding international dialing code according to the number’s region, as shown in Figure 2:
3. Switch the international dialing code to the one corresponding to Taiwan. The remote validation for the international dialing code returns true, but the mobile number text box still shows an error, as shown in Figure 3:
4. At this point, to make the mobile number validation pass, you have to first change it to another value and then change it back. Only after two consecutive remote validations can it pass, as shown in Figures 4 and 5:
5. Switch the international dialing code back to the one corresponding to mainland China. This time it returns an error, as shown in Figure 6:
6. Enter a mainland China mobile number for testing. The remote validation for the mobile number returns true, but the international dialing code still shows an error, as shown in Figure 7:
7. Now we need to solve the above issues and achieve synchronous validation between the international dialing code and the mobile number. First, let’s fix the problem encountered before Figure 5. When the function is called after the request completes, the remote validation for the international dialing code returns true, but the mobile number text box still shows an error. In this case, we run the remote validation for the mobile number once again. The code is shown in Figure 8:
8. I found that the remote validation for the mobile number did not execute, as shown in Figure 9:
9. Open the URL: https://github.com/jzaefferer/jquery-validation and download version 1.11.1 of jquery-validation, because this is the version currently used by the web page, as shown in Figures 10 and 11:
10. After extracting, copy jquery.validate.js to the corresponding directory of the website’s resources, as shown in Figures 12 and 13:
11. In the web page source code, comment out the import of jquery.validation.min.js and import jquery.validate.js instead, to facilitate debugging during development, as shown in Figure 14:
12. In the element method, insert console.log(element); as shown in Figure 15:
13. Continue executing steps 2 and 3. Checking the Console confirms that execution has reached element (i.e., performing the re-validation of the mobile number), as shown in Figure 16:
14. In the element method, insert console.log(result); as shown in Figure 17:
15. Continue executing steps 2 and 3. Checking the Console confirms that when result is false, the remote validation for the mobile number does not execute, as shown in Figure 18:
16. In the check method, insert console.log(method); console.log(result); as shown in Figure 19:
17. Continue executing steps 2 and 3. Checking the Console confirms that when executing the remote check for the mobile number, it returns false, so the remote validation for the mobile number does not execute, as shown in Figure 20:
18. In the remote method within the built-in validation methods list, insert console.log(value); console.log(previous); as shown in Figure 21:
19. Continue executing steps 2 and 3. Checking the Console confirms that when executing the remote validation for the mobile number, because the value is exactly equal to previous.old, it returns false, which in turn causes the remote validation for the mobile number not to execute, as shown in Figure 22:
20. In the validator method previousValue, if the previousValue (i.e., the previous value) of the current element exists, it returns the previous value; otherwise, it returns an empty value, as shown in Figure 23:
21. Combining the analysis obtained from the validator method resetForm, if the previous value of #phone is equal to the value about to be remotely validated, and the remote validation must be executed again, we just need to clear the previous value, as shown in Figures 24 and 25:
22. Continue executing steps 2 and 3. Checking the Network shows that the remote validation for the mobile number executes successfully, as shown in Figure 26:
23. The same logic applies to phone. However, when the remote validation for the mobile number returns true and the international dialing code has an error, we clear the previous value of the international dialing code and execute the remote validation for the international dialing code again, as shown in Figure 27:
24. Continue executing steps 5 and 6. Checking the Network shows that the remote validation for the international dialing code executes successfully, as shown in Figure 28:
25. In the web page source code, revert the changes made in step 11, as shown in Figure 29:
Summary: If you cannot find an API in the JS framework’s manual that meets your requirements, you need to download the corresponding uncompressed source code yourself and read and analyze it.