I Create Some Custom Filed and this Error Message show when i click on the sumbit button without click on verify otp Button here is my Code

This code i use in functions.php
//Verify OTP

function enqueue_custom_wpforms_script() {
wp_enqueue_script(‘custom-wpforms’, get_template_directory_uri() . ‘/js/custom-wpforms.js’, array(‘jquery’), null, true);

// Localize the script with ajaxurl
wp_localize_script('custom-wpforms', 'wpforms_ajax', array(
    'ajaxurl' => admin_url('admin-ajax.php')
));

} add_action('wp_enqueue_scripts', 'enqueue_custom_wpforms_script');

function send_otp_via_proxy() { if (isset($_POST['mobile'])) { $mobile = sanitize_text_field($_POST['mobile']);

// Get the API endpoint from wp-config.php $api_endpoint = defined('API_ENDPOINT_OTP') ? API_ENDPOINT_OTP : 'https://dashboard.happylocate.com/api/v1/user/login/send-otp';

// Perform the POST request to the API $response = wp_remote_post($api_endpoint, array( 'body' => json_encode(array('mobile' => $mobile)), 'headers' => array( 'Content-Type' => 'application/json' ) ));

    if (is_wp_error($response)) {
        wp_send_json_error(array(
            'message' => 'Failed to send OTP',
            'error' => $response->get_error_message()
        ));
    } else {
        $body = wp_remote_retrieve_body($response);
        $data = json_decode($body, true);

        // Debugging: Log the full response
        error_log(print_r($data, true));

        if (isset($data['success']) && $data['success']) {
            wp_send_json_success(array(
                'message' => 'OTP sent successfully',
                'data' => $data['data']
            ));
        } else {
            wp_send_json_error(array(
                'message' => 'Failed to send OTP',
                'response_body' => $data
            ));
        }
    }
} else {
    wp_send_json_error(array('message' => 'Mobile number not provided'));
}
wp_die();

} add_action('wp_ajax_send_otp', 'send_otp_via_proxy'); add_action('wp_ajax_nopriv_send_otp', 'send_otp_via_proxy');

**This is Our Java Script Code(wpform.js) ** jQuery(document).ready(function ($) { $('#verify-otp-btn').click(function (e) { e.preventDefault();
    
var mobileNumber = $('#wpforms-22167-field_3').val(); // Mobile field ID
    console.log('Mobile Number:', mobileNumber); // Log mobile number

    if (mobileNumber) {
        console.log('Sending OTP request...');
        $.ajax({
            url: wpforms_ajax.ajaxurl, // Use the localized ajaxurl
            method: 'POST',
            data: {
                action: 'send_otp',
                mobile: mobileNumber
            },
            beforeSend: function() {
                console.log('AJAX request is about to be sent.');
            },
            success: function (response) {
                console.log('Response:', response); // Log the entire response

                // Correctly accessing the UUID from the response
                if (response.success && response.data && response.data.data && response.data.data.uuid) {
                    var uuid = response.data.data.uuid;
                    console.log('Captured UUID:', uuid); // Debugging: Log the UUID

                    // Store the UUID in the WPForms fields
                    $('#wpforms-22167-field_20').val(uuid); // Hidden field
                    $('#wpforms-22167-field_21').val(uuid); // Single-line text field
                    
                    alert('OTP has been sent to your mobile number.');

                    // Show the OTP input field container
                    $('#wpforms-22167-field_19-container').show();

                    // Change the button text to "Resend OTP"
                    $('#verify-otp-btn').text('Resend OTP');

                    // Disable the button for 1 minute
                    disableResendOtpButton();

                } else {
                    // Handle cases where the UUID is not found or success is false
                    console.error('UUID not found or success not true in response:', response);
                    alert('Failed to send OTP. The response was invalid.');
                }
            },
            error: function (xhr, status, error) {
                console.error('Error sending OTP:', error); // Log error response
                alert('Failed to send OTP. Please try again.');
            },
            complete: function() {
                console.log('AJAX request completed.');
            }
        });
    } else {
        alert('Please enter your mobile number.');
    }
});

function disableResendOtpButton() {
    var $button = $('#verify-otp-btn');
    var $timer = $('<span id="otp-timer"></span>');
    $button.after($timer); // Add the timer next to the button
    $button.prop('disabled', true); // Disable the button

    var timeLeft = 60; // 60 seconds countdown

    var timerInterval = setInterval(function() {
        timeLeft--;
        $timer.text(' (' + timeLeft + 's)'); // Update the timer text

        if (timeLeft <= 0) {
            clearInterval(timerInterval);
            $timer.remove(); // Remove the timer text
            $button.prop('disabled', false); // Re-enable the button
        }
    }, 1000);
}

});

i want to Replace this error
enter image description here

with this message “Please verify the OTP before submitting the form”

type here