O required está permitindo enviar dados em branco para minha tabela e a validacao nao funciona

Oi Jose, tudo bem?

Com o require nao deveria estar deixando enviar em branco, lembre de deixar o campo sempre dentro de um form junto com um botao de submit. Fiz esse Jsbin e esta tudo funcionando.

O padrao tambem esta funcionando 100%, testei no Rege101:

Abcs!

olha como esta meu codigo o que posso fazer para solucionar?

<form id="form-adiciona">

        <div class="">
            <label for="mes-form">Mês:</label>
            <input id="mes-form" name="mes-form" type="text"  class="campo" ></br></br>

            <label for="data">Data:</label>
            <input id="data" name="data" type="text" class="campo" maxlength="10" placeholder="DD/MM/YYYY" required pattern="\d{2}\/\d{2}\/\d{4}">


            <label for="conta">Conta:</label>
            <input id="conta" name="conta" type="text"  class="campo-medio" required>


            <label for="valor">Valor:</label>
            <input id="valor" name="valor" type="text" class="campo" required value="0" maxlength="8">
        </div>
        </br>
        <button id="adiciona-conta">Adicionar</button>

    </form>

Oi jose,

Joguei exatamente seu codigo num Jsbin e esta ok. http://jsbin.com/koyowexozo/edit?html,js,output

Repare que quando voce coloca algo fora do padrao ele nao deixa enviar.

Abcs!

ele envia para minha table normal estou manipulando a dom com o javascript e envia em branco e nao atende ao pattern

valordoInput();
//escutando o click do botao
var botaoAdicionar = document.querySelector("#adiciona-conta");
botaoAdicionar.addEventListener("click", function(event){
    event.preventDefault(); //previnindo carregamento da pagina 


//selecionar o form
var form = document.querySelector("#form-adiciona");

//criando objeto conta
var conta = obtemContaDoFormulario(form);
// console.log(conta);

adicionaContaNaTabela(conta);

mostraTotal(); // recebendo total da funcao mostra total

alteraMes();

inputForm.value = recebeMes.textContent;

 form.reset(); // limpa os campos do form

});

function alteraMes(){

    var altMes = document.querySelector("#mes");
    var inputForm = document.querySelector("#mes-form");
    altMes.textContent = inputForm.value.toUpperCase();
}

function valordoInput(){
    var recebeMes = document.querySelector("#mes");
    recebeMes.textContent;
    var inputForm = document.querySelector("#mes-form");
    inputForm.value = recebeMes.textContent;
    // console.log(recebeMes.textContent);
}

function adicionaContaNaTabela(conta){
    var contaTr = montaTr(conta);
    var tabela = document.querySelector("#tabela-conta"); // selecionando tabela
    tabela.appendChild(contaTr); //colocando a linha tr dentro da tabela


}

//criando objeto com os dados do form
function obtemContaDoFormulario(form){

    var conta = {
        data: form.data.value,
        conta: form.conta.value,
        valor: form.valor.value
    }
    return conta;
}

//criar monta tr 
function montaTr(conta){
    var contaTr = document.createElement("tr");
    contaTr.classList.add("conta");

    contaTr.appendChild(montaTd(conta.data, "info-data"));
    contaTr.appendChild(montaTd(conta.conta, "info-conta"));
    contaTr.appendChild(montaTd(conta.valor, "info-valor"));

    return contaTr;
}

function montaTd(dado,classe){
        var td = document.createElement("td");
        td.textContent = dado;
        td.classList.add(classe);

        return td;
    }

insira seu código aqui

Dá uma olhadinha nisso, acho que pode ajudar : http://jsbin.com/qenomepuro/edit?html,js,output

Fiz o teste aqui e rolou :D

no minha aplicacao q nao funciona essa validacao

fiz uma validação simples porque daquele jeito não ta funcionando tem como usar o pattern nessa função??

function adicionaContaNaTabela(conta){

    //preencher data com 10 caracteres
    if(conta.data.length ==10){

        var contaTr = montaTr(conta);
        var tabela = document.querySelector("#tabela-conta"); // selecionando tabela
        tabela.appendChild(contaTr); //colocando a linha tr dentro da t
    }
    else if (conta.data.length > 0 ){
        alert("Data no formato incorreto!");
    }

    //preencher todos os campos
    if(conta.data && conta.conta )
    {

        var contaTr = montaTr(conta);
        var tabela = document.querySelector("#tabela-conta"); // selecionando tabela
        tabela.appendChild(contaTr); //colocando a linha tr dentro da tabela

    }else{

        alert("Preencha todos os campos!");
    }

}