Curso de Google Formulários - #15 Validações, Máscaras e Ajax

Nesse tutorial nós trabalharemos com máscaras, validações avançadas e ajax utilizando a API do Google Formulários.

API Avançada do Google Forms

Vamos criar dentro da pasta lib o diretório js pra receber as nossas funções Javascript.

lib/js/javascript.js

Esse será o arquivo responsável pelo javascript e pelo ajax:

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

    if(doc.querySelector("#cpf")){
        let cpf=doc.querySelector("#cpf");
        VMasker(cpf).maskPattern("999.999.999-99");
    }

    if(doc.querySelector("#telefone")){
        let tel=doc.querySelector("#telefone");
        let telMask = ['(99) 9999-99999', '(99) 99999-9999'];
        VMasker(tel).maskPattern(telMask[0]);
    }

    if(doc.querySelector("#form1")){
        let form=doc.querySelector("#form1");
        form.addEventListener('submit',function(event){
            event.preventDefault();
            let ajax=new XMLHttpRequest();
            let formData=new FormData(form);
            ajax.open('POST','controllers/FormController.php');
            ajax.onreadystatechange=function(){
                if(ajax.status===200 && ajax.readyState===4){
                    let response=JSON.parse(ajax.responseText);
                    doc.querySelector('.result').innerHTML=response.div;
                    if(response.result === 'success'){
                        form.reset();
                    }
                }
            };
            ajax.send(formData);
        });
    }
})(window,document);

index.php

Na index precisamos linkar o nosso arquivo recém criado, javascript.js, e a lib de Vanilla Masker.
Vamos criar também de exemplo um input com nome de cpf e telefone.

<input class="form-control mt-4" name="cpf" id="cpf" type="text" placeholder="CPF:" required>
<input class="form-control mt-4" name="telefone" id="telefone" type="tel" placeholder="Telefone:" required>

<script src="lib/js/vanilla-masker-master/lib/vanilla-masker.js"></script>
<script src="lib/js/javascript.js"></script>
</body>

controllers/ControllerForm.php

A validação de dados ocorrerá no nosso backend:

<?php
include ("../lib/vendor/autoload.php");
$nome=filter_input(INPUT_POST,'nome',FILTER_DEFAULT);
$genero=filter_input(INPUT_POST,'genero',FILTER_DEFAULT);
$cpf=filter_input(INPUT_POST,'cpf',FILTER_DEFAULT);
$telefone=filter_input(INPUT_POST,'telefone',FILTER_DEFAULT);
$comentario=filter_input(INPUT_POST,'comentario',FILTER_DEFAULT);
$preferencia="";
if(isset($_POST['preferencia']) && is_array($_POST['preferencia'])){
    foreach ($_POST['preferencia'] as $options){
        $preferencia.=$options.' - ';
    }
}

if($nome!="" && $genero != "" && $cpf !="" && $telefone !="" && $comentario !="" && $preferencia !=""){
    $spreadsheet=new \Classes\ClassSpreadsheet();
    $spreadsheet->insertSheet(
        "1ecB5MW9JL5K_22pNXZ35NQ1ud4axNU8xt1lwVQbSOrY",
        "Dados!A1",
        [
            $nome,
            $genero,
            $cpf,
            $telefone,
            $preferencia,
            $comentario
        ]
    );
    echo json_encode([
       "div"=>"<div class='alert alert-success text-center' role='alert'>
                  Dados inseridos com sucesso
                </div>",
        "result"=>"success"
    ]);

}else{
    echo json_encode([
        "div"=>" <div class='alert alert-danger text-center' role='alert'>
                  Preencha todos os dados!
                </div>",
        "result"=>"error"
    ]);
}

Por hoje é só! Sucesso nos códigos e na vida!

Precisa de uma mãozinha? Suporte premium: webdesignemfoco@gmail.com