Validate a Form

Navigation
7

How do I display a alert() if the person has not filled in a textarea, and alert() that the comment was saved?

JavaScript: 

function saveTextAsFile() {

    var textToWrite = document.getElementById("inputTextToSave").value;

    var textFileAsBlob = new Blob([textToWrite], {
        type: 'text/plain'
    });

    var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;

    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    if (window.webkitURL != null) {
        // Chrome allows the link to be clicked
        // without actually adding it to the DOM.
        downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
    } else {
        // Firefox requires the link to be added to the DOM
        // before it can be clicked.
        downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
        downloadLink.onclick = destroyClickedElement;
        downloadLink.style.display = "none";
        document.body.appendChild(downloadLink);

    }

    downloadLink.click();
}

function destroyClickedElement(event) {
    document.body.removeChild(event.target);
}

function loadFileAsText() {
    var fileToLoad = document.getElementById("fileToLoad").files[0];

    var fileReader = new FileReader();

    fileReader.onload = function (fileLoadedEvent) {
        var textFromFileLoaded = fileLoadedEvent.target.result;
        document.getElementById("inputTextToSave").value = textFromFileLoaded;
    };

    fileReader.readAsText(fileToLoad, "UTF-8");
}

Note: This script is saving the comment in a text document.

    
asked by anonymous 16.09.2015 / 01:47

3 answers

4

To solve your problem, I propose the following solution. For alert() empty textarea is very simple and remember that you need to validate the field with the filename too! And the process is the same below: 

if(textToWrite == '') {
    alert('textarea vazia :´/');
    return;
}

Already for the alert() of when the file was saved, it is a bit more complicated since we do not have a callback that is called after your file is downloaded. To work around this, I suggest using setTimeout() . In it we set a timer to execute a callback as in the example below: 

setTimeout(function() {
  alert('arquivo baixado com sucesso!')
}, 2000);

Follow the jsfiddle .

    
16.09.2015 / 02:32
2

Validation of fields

I suggest you create a function to validate the submission of data to control the padding of the text field.

validFilling (event);

No onclick of your button or onsubmit of your form assigns the validaPreenchimento(event); function. It is also extremely important to check if the text is not just whitespace. Consider changing the function saveTextAsFile() to saveTextToFile(textContent, fileName) or change the name of the function, because what it actually does is not only save text to file, it is to save the text of a certain field to file. 

function validaPreenchimento(evt) {
    var textToWrite = document.getElementById("inputTextToSave").value;
    var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;

    // verificando tamanho da string ignorando espaços em branco nas extremidades (trim)
    if (textToWrite.replace(/^\s+|\s+$/gim, "").length == 0 ||
        fileNameToSaveAs.replace(/^\s+|\s+$/gim, "").length == 0) {
        alert("Os campos {texto} e {arquivo} são obrigatórios.");

        if (evt.preventDefault) {
            evt.preventDefault();
        }
        else {
            evt.returnValue = false; // IE
        }
    }
    else {
        saveTextAsFile();
    }
}

Recording the file

If the file is written synchronously, just put alert at the end of the saveTextAsFile() function. As JavaScript is blocking I suggest using a setTimeout in called saveTextAsFile() to avoid screen locking while the file is written. 

window.setTimeout(saveTextAsFile, 100);
    
16.09.2015 / 21:14
1

In your saving method you can validate 

function saveTextAsFile() {
  var textToWrite = document.getElementById("inputTextToSave").value;

  if ( textToWrite !== "" ){
      alert("Favor preencher todos campos");
      return;
  }
  var textFileAsBlob = new Blob([textToWrite], {
  type: 'text/plain'
});
    
16.09.2015 / 02:12
How to receive a List (Java) in Javascript using Spring MVC? How to create my own composite package in github?