Vanilla Javascript - #25 Formulários

No tutorial de hoje iremos trabalhar com o Javascript na manipulação de formulários (forms, inputs, textareas...).

Formulário no HTML5

No HTML iremos criar os elementos do formulário:

<form name="form1" id="form1" method="post" action="controller.php"<
    <input type="text" name="inpText" id="inpText"<<br<
    <textarea name="txtArea" id="txtArea"<</textarea<<div id="lengthArea"<</div<
</form<

Javascript

No JS iremos manipular as propriedades do formulário:

(function readyJS(win,doc){
    'use strict';

    let form1=doc.querySelector('#form1');
    let inpText=doc.querySelector('#inpText');
    let txtArea=doc.querySelector('#txtArea');
    let lengthArea=doc.querySelector('#lengthArea');

    //Form
    form1.action='teste.php';
    console.log(form1);

    //Input Text
    function validateInput(event){
        if(event.target.value == ""){
            alert('Preencha o campo!');
        }
    }
    inpText.style.backgroundColor='gray';
    inpText.value='Texto';
    inpText.addEventListener('blur',validateInput,false);
    console.log(inpText);

    //TextArea
    function countArea(event)
    {
        lengthArea.innerHTML=event.target.textLength;
        if(event.target.textLength >= 30){
            txtArea.setAttribute('disabled','disabled');
        }
    }
    console.log(txtArea);
    txtArea.value='Example';
    txtArea.addEventListener('blur',validateInput,false);
    txtArea.addEventListener('keydown',countArea,false);

})(window,document);