Tengo un formulario en mi sitio web donde en algunos casos necesito validar un número de teléfono y en otros casos no tengo que hacerlo (según los cambios en el campo de entrada.
El formulario se completa con datos de una base de datos y si se ha cambiado la entrada "phone_Number", necesito validar el número cuando se presiona Enviar.
Si la entrada "phone_number" no ha cambiado, el formulario tiene otras entradas que deben validarse.
Mi problema es: si el número de teléfono ha cambiado, necesito hacer 2 llamadas con ajax en lugar de 1, y no sé cuál es la mejor manera de hacerlo. He leído que async: false quedó en desuso, por lo que necesito ayuda para organizar mi código para que funcione el envío.
He visto algunos ejemplos diferentes de jquery when/wait, pero no entiendo jquery lo suficientemente bien como para cambiar los resultados de los ejemplos en mi pregunta.
$(document).on('submit', '#order_form', function(event){ let form_data = new FormData($('#order_form')[0]); let phone_number = $('#phone_number').val(); form_data.append('customer_name',$('#customer_name').val()); if($('#old_number').val() != phone_number) { $.ajax({ url: 'https://api.numlookupapi.com/v1/validate/' + phone_number + '?apikey=api_key', dataType: 'json', success: function(json) { form_data.append('valid',json.valid); form_data.append('number',json.number); form_data.append('local_format',json.local_format); .... some additional "form_data.append" happens here .... } }); } else { form_data.append('local_format',phone_number); } $.ajax({ url: "process.php", method: 'POST', data: form_data, contentType: false, processData: false, success: function () { .... do something .... } }); });`Puede poner la segunda llamada AJAX en el método de éxito de la función AJAX anterior. Me gusta esto:
function processFormData(form_data) { $.ajax({ url: "process.php", method: 'POST', data: form_data, contentType: false, processData: false, success: function () { .... do something .... } }); } $(document).on('submit', '#order_form', function(event){ let form_data = new FormData($('#order_form')[0]); let phone_number = $('#phone_number').val(); form_data.append('customer_name',$('#customer_name').val()); if($('#old_number').val() != phone_number) { $.ajax({ url: 'https://api.numlookupapi.com/v1/validate/' + phone_number + '?apikey=api_key', dataType: 'json', success: function(json) { form_data.append('valid',json.valid); form_data.append('number',json.number); form_data.append('local_format',json.local_format); .... some additional "form_data.append" happens here .... processFormData(form_data); } }); } else { form_data.append('local_format',phone_number); processFormData(form_data); } }); Cuando el número de teléfono ha cambiado, solo se llamará a processFormData() cuando la llamada a la API haya tenido éxito; de lo contrario, se llamará directamente a processFormData() .
Nota: ¿Por qué no simplemente usar una llamada AJAX y verificar en PHP si el número de teléfono ha cambiado? Puede llamar a la API desde PHP para verificar si el número es válido. En general, siempre debe hacer la validación de entrada final del lado del servidor, porque cualquier cosa del lado del cliente puede ser manipulada.