Campo contato não pesquisa

[Danilo Esmeraldo]

estou desenvolvendo um sistema em laravel para controle de vagas, e preciso que no campo contato seja um campo de pesquisa, para que ao digitar o numero o sistema diga se já existe ou não os dados no banco, se sim pegar o cadastro já existente e preencha os campos menos o campo do cartão de identificação, se não existir o sistema me avise e seja realizado um novo cadastro, alguém pode me ajudar com essa dúvida

Código no cadastro.blade.php

<x-app-layout>

    <x-slot name="header">

        <h2 class="font-semibold text-xl text-gray-800 leading-tight">

            {{ __('Cadastro de Criança e Responsável') }}

        </h2>

    </x-slot>

    <div class="py-12">

        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">

            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">

                <h1 class="text-2xl mb-4">Cadastro de Criança e Responsável</h1>

                <!-- Exibe mensagens de sucesso ou erro -->

                @if(session('success'))

                    <div class="alert alert-success mb-4">

                        {{ session('success') }}

                    </div>

                @endif

                @if(session('error'))

                    <div class="alert alert-danger mb-4">

                        {{ session('error') }}

                    </div>

                @endif

                <!-- Formulário de Cadastro -->

                <form action="{{ route('cadastro.store') }}" method="POST">

                    @csrf

                    <h3 class="text-lg font-semibold mb-2">Dados do Responsável</h3>

                    <div class="mb-4">

                        <label for="responsavel_nome" class="block text-sm font-medium text-gray-700">Nome do Responsável:</label>

                        <input type="text" name="responsavel_nome" required class="block mt-1 w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">

                    </div>

                    <div class="mb-4">

                        <label for="responsavel_contato" class="block text-sm font-medium text-gray-700">Contato do Responsável:</label>

                        <input type="text" id="telefone" name="responsavel_contato" required class="block mt-1 w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">

                    </div>

                    <h3 class="text-lg font-semibold mb-2">Dados da Criança</h3>

                    <div class="mb-4">

                        <label for="crianca_nome" class="block text-sm font-medium text-gray-700">Nome da Criança:</label>

                        <input type="text" name="crianca_nome" required class="block mt-1 w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">

                    </div>

                    <div class="mb-4">

                        <label for="crianca_idade" class="block text-sm font-medium text-gray-700">Idade da Criança:</label>

                        <input type="number" name="crianca_idade" required class="block mt-1 w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">

                    </div>

                    <div class="mb-4>">

                        <label for="numero_cartao" class="block text-sm font-medium text-gray-700">Número do Cartão de Identificação:</label>

                        <input type="text" name="numero_cartao" required class="block mt-1 w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">

                    </div>

                    <div class="mb-4">

                        <label for="atipica" class="inline-flex items-center">

                            <input type="checkbox" name="atipica" value="1" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">

                            <span class="ml-2 text-sm text-gray-600">Criança Atípica?</span>

                        </label>

                    </div>

                    <div class="mb-4">

                        <label for="restricao_alimentar"class="block text-sm font-medium text-gray-700">Restrição Alimentar:</label>

                        <input type="text" name="restricao_alimentar" placeholder="Informe se há alguma restrição alimentar"><br>

                    </div>

                    <!-- Botão de Cadastro -->

                    <div class="mt-4">

                        <button type="submit" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">

                            Cadastrar

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>

        <!-- Script para máscara de telefone -->

    <script>

        document.getElementById('telefone').addEventListener('input', function (e) {

            let value = e.target.value.replace(/\D/g, '');

            value = value.replace(/^(\d{2})(\d)/g, '($1) $2');

            value = value.replace(/(\d)(\d{4})$/, '$1-$2');

            e.target.value = value;

        });

    </script>

    <script>

        // Atualizado para usar o ID correto do campo de contato

        document.getElementById('telefone').addEventListener('input', function () {

            var contato = this.value;

            if (contato.length >= 10) {  // Verifica se o contato tem ao menos 10 dígitos

                fetch("{{ route('verificar.contato') }}", {

                    method: 'POST',

                    headers: {

                        'Content-Type': 'application/json',

                        'X-CSRF-TOKEN': '{{ csrf_token() }}'

                    },

                    body: JSON.stringify({responsavel_contato: contato})

                })

                .then(response => response.json())

                .then(data => {

                    if (data.status === 'exists') {

                        // Preenche os campos da criança automaticamente

                        document.querySelector('input[name="crianca_nome"]').value = data.crianca.nome;

                        document.querySelector('input[name="crianca_idade"]').value = data.crianca.idade;

                        document.querySelector('input[name="atipica"]').checked = data.crianca.atipica;

                        // Desativa os campos da criança para evitar alterações

                        document.querySelector('input[name="crianca_nome"]').readOnly = true;

                        document.querySelector('input[name="crianca_idade"]').readOnly = true;

                    } else {

                        // Limpa os campos se o contato não existir

                        document.querySelector('input[name="crianca_nome"]').value = '';

                        document.querySelector('input[name="crianca_idade"]').value = '';

                        document.querySelector('input[name="atipica"]').checked = false;

                        // Ativa os campos para novo cadastro

                        document.querySelector('input[name="crianca_nome"]').readOnly = false;

                        document.querySelector('input[name="crianca_idade"]').readOnly = false;

                    }

                });

            }

        });

    </script>

</x-app-layout>

[FRANKLLIN]

Bom dia. Já tentou fazer assim: 
1 - Criar uma metodo de routa 

2 - Criar o controlador  : observar use validate para validata o campo contato

3 - sí for avisado que não returna com um erro ou que não existe o cartão

[Marcio Cardoso]

Cara não precisa de nada disso. Primeiro, neste campo de banco de dados, crie ou defina como unico ( unique ), pode ser na migrations mesmo. Assim caso o valor deste campo ja exista, o laravel vai reclamar na hora de enviar o formulario e gravar os dados no banco. Essa reclamação vem em um codigo de erro padrão do php e laravel. Voce pode tratar ou personalizar esse codigo enviando a mensagem que desejar ao usuario. Bem voce pode achar que o cara tera de preencher todos os dados antes de enviar o formulario e caso ele exista, pedeu tempo com isso. Então a melhor estratégia seria particionar o formulario, ou criando uma pagina anterior ou utilizando um wizard onde cada etapa do formulario vai sendo validada aos poucos e a primeira coisa que voce vai pedir é o campo telefone ou celular. Digamos que vc faça isso em duas paginas. Na primeira voce coloca somente o campo telefone, e ao submeter o formulario, de cara ele ja identifica que esse campo existe e se existir, pede as informações do cartão de identificação. Assim, ele passa para o banco de dados apenas as informações do cartão de identificação que antes não existia e quando o registro ocorrer com sucesso, vc redireciona ele com uma pagina que exiba todos os dados que agora existem naquele cadastro.

Caso no inicio o telefone não seja reconhecido, ele vai para a pagina com todos os campos para preenchimento e quando terminar, tambem redireciona para a pagina que exibe todos os dados daquele cadastro, ou apenas um agradecimento pelo preenchimento. No campo que pega o numero de telefone, coloque uma mascara, para mostrar ao usuario que os dados estão corretos como desejar, por exempplo (xx) xxxxx-xxxx mas na hora de cadastrar no banco de dados, exclua toda a formatação, enviando ao banco apenas numeros, assim xxxxxxxxxxx por que se vc nao por a mascara, e nao tratar os dados enviados, um usuario pode por exemplo preencher o mesmo numero de duas formas diferentes, com ou sem parenteses e ai o seu sistema iria entender como dois dados diferentes.

Então acho que seu problema nem é o sistema ou liguagem em si, mas nas estategias e planejamento. Voce ja notou que os aplicativos de companhias de celular pedem primeiro o numero de telefone, depois o nome, senha, etc... eles verificam primiro se é da operadora, se esta no sistema, a qual cidade pertence, que plano, qual o proprietario muito antes de pedir mais informações.... 

Espero ter ajudado. 

--
Você recebeu essa mensagem porque está inscrito no grupo "Laravel Brasil" dos Grupos do Google.
Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para laravel-brasi...@googlegroups.com.
Para acessar essa discussão na Web, acesse https://groups.google.com/d/msgid/laravel-brasil/ea109505-7306-4040-b1cf-83506f5c3682n%40googlegroups.com.