form field validation

[ionv06]

Hi,
How could I pass a variable from SQLPage to a javascript function? I want to check if the value filled in a field in a form is found in a list

set invoice = "123" ;
select 'form' as component, 'Invoices' as title;
select 'document' as name,'invoice' as id;
select 'date' as name,'date' as type; 

javascript code:

const existingValues = [ ]; 

function checkValue(event, values) {
	const inputValue = event.target.value; 

	if (values.includes(inputValue)) {
		alert('The value already exists!');
		event.target.value = '';
		event.target.focus() ;
	}
}
const invoiceInput = document.getElementById('invoice');
//const elText = document.getElementById('text');
//elText.innerText=existingValues;

invoiceInput.addEventListener('blur', function(event) {
	checkValue(event, existingValues); 
}); 

How can I pass the $invoice variable from form to the javascript function, in 'existingValues' array ?

[ionv06]

What I wanted to do is to check when filling in an invoice number if it already exists in the database (validation is done when leaving the field)
I added an api.sql that receives as a parameter the invoice number entered in the #invoice field and returns a json with the registration id. Request api.sql is called at the blur event on the #invoice field.
Surely there are better solutions...

test.sql

select 'shell' as component, 'test.js' as javascript, 'test.css' as css;
select 'form' as component, 'Invoices' as title;
select 'document' as name,'invoice' as id,'Invoice' as label,'error-message' as class;
select 'date' as name,'date' as type;

api.sql

SELECT 'json' AS component, 
       JSON_OBJECT(
           'id', id
       ) AS contents
FROM doc
WHERE tip="FACT" and document=$value LIMIT 1;

test.js

async function checkValue(event) {
	const invoiceValue = event.target.value; 
	const errorMessageElement = document.getElementById('error-message');

	try {
		const response = await fetch(`http://localhost:8080/api.sql?value=${encodeURIComponent(invoiceValue)}`);
		const data = await response.json();

		if (data.id !== undefined && data.id !== 0) {
			event.target.value = '';
			event.target.placeholder = "Document already exists!";
			event.target.classList.add('error-placeholder'); 
			event.target.focus();
		} else {
			event.target.placeholder = "Document number";
			event.target.classList.remove('error-placeholder'); 
		}
	} catch (error) {
		console.error('Error fetching data:', error);
	}
}

const invoiceInput = document.getElementById('invoice');

invoiceInput.addEventListener('blur', checkValue);

test.css

::placeholder {
	color: grey; 
	font-weight: normal; 
}

.error-placeholder::placeholder {
	color: red; 
	font-weight: bold; 
}

[lovasoa]

This sounds good to me. What is your problem with this?

[ionv06]

@lovasoa I do not have any problem with this, I just wondered if any better solutions exists :)

[YunusMechery]

Try this: #628

[YunusMechery]

OR you can use alert component with WHERE clause, at the top of page/form, instead of new validation_error_msg parm

[ionv06]

Thank you, Yunus! I understand now and I managed to validate and display the message with the 'alert' component. However, it is not clear to me the usefulness of the 'htmx' library if I use hx-target='body' - meaning that I reload the whole page (we assume that under that form whose field I validate for uniqueness there is a table with many records, if I load the whole page will generate a new 'select' for that table, the entire page will be sent from the server to the client, etc.).

[YunusMechery]

Your api.sql also have select, right?. In any way, we need to touch database to check uniqueness of your document.

Here, htmx is for immediately passing the entered invoice number to alert component at the top of the page, instead waiting for user filling all the fields in the form and waiting for user to click form's Submit button or a Next.

Full page refresh is not a problem in 2024, what you need to focus is your WHERE clause accurate and table have proper index.

[ionv06]

In both versions (mine with api.sql and yours with htmx) a 'select' instruction is sent to verify the uniqueness of the document. From this point, I was looking for the optimal option that would not refresh the entire page and I succeeded with that javascript function. I expected something similar from htmx, that's all. You gave me important information about using htmx, I will try to understand better how it works. By the way, where does that question mark ('?' as on_change) come from? I did not find in the htmx documentation anything about this at hx-post

[YunusMechery]

I think its something to do with SQLPage . htmx syntax is '' (blank for POST to same page) but it was not working in my testing and only question mark worked.