Estoy tratando de crear una herramienta de página web que generará un archivo de conexión de texto a partir de la entrada de dos formularios
El primer formulario es para la identificación de la base de datos, se pegará y tendrá que coincidir con la expresión regular ^(\w{8})-(\w{4})-(\w{4})-(\w{4})-(\w{12})$ La segunda forma será el nombre de la tabla y no debe estar vacía. La herramienta no sabe cuáles son los valores posibles.
Idealmente, cada vez que la entrada de formularios sea válida (sin esperar a que se envíe, haga clic en keyup o input, creo), deberíamos tener un enlace href debajo del formulario, que sería un uri de datos que generaría el archivo txt en sí mismo connect.txt "conectarse a Tablename desde databaseid " (idioma imaginario)
Encontré algunos violines que traté de mezclar/adaptar sin éxito, principalmente:
https://jsfiddle.net/fma1hyoL/4/ para generación de texto dinámico con validación
https://jsfiddle.net/wtp5a0o8/1/ para generar el archivo uri
principiante en html y javascript, ¿podría indicarme la dirección correcta?
Además, ¿alguna mala práctica a evitar con respecto a tales funcionalidades?
Gracias y saludos
Lo encontré gracias a Dan:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Romain</title> <style> label { display: block; } input { padding: 1.2em; width: 25em; } input:required:invalid, input:focus:invalid { background-color: #faa; } #result { border: 1px solid #333; font-family: monospace; padding: 1em; display: none; } #result.isVisible { display: inherit; } </style> </head> <body> <form id="form"> <p> <label> Database id <input required id="dbField" type="text" pattern="(\w{8})-(\w{4})-(\w{4})-(\w{4})-(\w{12})" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" /> </label> </p> <p> <label> Table name <input required id="tableField" type="text" placeholder="" value="" /> </label> </p> </form> <div id="result" class=""> <a id="resultLink" href="#" target = "_blank" download = "myFile.txt" ></a> </div> <script> const form = document.getElementById('form'); const dbField = document.getElementById('dbField'); const tableField = document.getElementById('tableField'); const result = document.getElementById('result'); const resultLink = document.getElementById('resultLink'); const resultButton = document.getElementById('resultButton'); // Callback: Update #result if form fields are valid const update = function(event){ if ( !dbField.checkValidity() || !tableField.checkValidity() ){ // Hide result result.classList.remove('isVisible'); return; }; // Update link text & href result.classList.add('isVisible'); resultLink.innerHTML = getOutputText(); resultLink.href = `data:attachment/text,${encodeURI(getOutputText())}`; } // Return the output text from the form field values const getOutputText = function(){ return `connect to ${tableField.value} from ${dbField.value}`; } // Call update() on form keyup events form.addEventListener('keyup', update); </script> </body> </html>