mirror of
https://github.com/manualdousuario/marreta.git
synced 2025-09-01 10:10:14 +00:00
84 lines
2.4 KiB
JavaScript
84 lines
2.4 KiB
JavaScript
/**
|
|
* Funções JavaScript para validação de formulário e manipulação de erros
|
|
*/
|
|
|
|
/**
|
|
* Valida o formulário antes do envio
|
|
*
|
|
* Verifica:
|
|
* - Se a URL não está vazia
|
|
* - Se a URL começa com http:// ou https://
|
|
* - Se a URL tem um formato válido
|
|
*
|
|
* @returns {boolean} True se a URL for válida, False caso contrário
|
|
*/
|
|
function validateForm() {
|
|
const urlInput = document.getElementById('url');
|
|
const submitButton = document.querySelector('button[type="submit"]');
|
|
const url = urlInput.value.trim();
|
|
|
|
// Verifica se a URL não está vazia
|
|
if (!url) {
|
|
showError('Por favor, insira uma URL');
|
|
return false;
|
|
}
|
|
|
|
// Verifica se a URL começa com http:// ou https://
|
|
if (!/^https?:\/\//i.test(url)) {
|
|
showError('A URL deve começar com http:// ou https://');
|
|
return false;
|
|
}
|
|
|
|
// Tenta criar um objeto URL para validar o formato
|
|
try {
|
|
new URL(url);
|
|
} catch (e) {
|
|
showError('Formato de URL inválido');
|
|
return false;
|
|
}
|
|
|
|
// Desabilita o input e o botão
|
|
urlInput.readonly = true;
|
|
submitButton.disabled = true;
|
|
|
|
// Adiciona classes de disabled do Tailwind
|
|
submitButton.classList.add('cursor-wait', 'disabled:bg-blue-400');
|
|
submitButton.classList.remove('hover:bg-blue-700');
|
|
|
|
urlInput.classList.add('cursor-wait', 'disabled:bg-gray-50', 'focus:outline-none');
|
|
|
|
// Adiciona estado de loading ao botão
|
|
submitButton.innerHTML = `
|
|
<img src="assets/svg/search.svg" class="w-6 h-6 mr-3" alt="Search">
|
|
Analisando...
|
|
`;
|
|
|
|
return true;
|
|
}
|
|
|
|
/**
|
|
* Exibe uma mensagem de erro abaixo do formulário
|
|
*
|
|
* Remove qualquer mensagem de erro existente antes de exibir a nova.
|
|
* A mensagem é exibida com um ícone de erro e formatação em vermelho.
|
|
*
|
|
* @param {string} message Mensagem de erro a ser exibida
|
|
*/
|
|
function showError(message) {
|
|
const form = document.getElementById('urlForm');
|
|
const existingError = form.querySelector('.error-message');
|
|
|
|
// Remove mensagem de erro anterior se existir
|
|
if (existingError) {
|
|
existingError.remove();
|
|
}
|
|
|
|
// Cria e adiciona nova mensagem de erro
|
|
const errorDiv = document.createElement('div');
|
|
errorDiv.className = 'error-message mt-4 text-base text-red-600';
|
|
errorDiv.innerHTML = `
|
|
<img src="assets/svgs/error.svg" class="inline-block w-5 h-5 mr-2" alt="Error icon">
|
|
${message}`;
|
|
|
|
form.appendChild(errorDiv);
|
|
}
|