Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

João Parnaiba

Mudar frase padrão da validação html5

Por , em Javascript

Recommended Posts

João Parnaiba    0

João Parnaiba
Postado

Tenho esse formulário como faço para mudar em todos os navegadores usando java script aquela frase que aparece nos input requeridos

exemplo tenho esse dois campo só que quero fazer quando a pessoa tentar submeter o formulário em branco que ele apresente a mensagem digite um usuário valido e colocando o usuário e esquecendo a senha apareça a frase digite uma senha valida. e virse versa.

 

eu pesquisei esse site mais num tou conseguindo só no mozilla. http://blog.popupdesign.com.br/validando-formularios-like-a-boss-com-html5/

<form action="sua-conta.php" method="post" name="login_account" autocomplete>
                    <fieldset id="logon">
                        <legend>Faça seu login
                </legend>
                                            <input type="text" name="users-store" class="users" id="users" size="15" maxlength="20" placeholder="Usuário" oninput="novamsn(this)" required />
                                                        <input type="password" name="password" class="password" id="password" size="15" placeholder="Senha" required />
                                                                <input type="submit" value="Login" class="loginbutton" />
                                                                <a href="index.html" class="create-account" title="Crie sua conta aqui" alt="Crie sua conta aqui">Criar Conta
                        </a>
                </fieldset>
            </form>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marco Bruno    19

Marco Bruno
Postado

Olá João Parnaiba.

 

Fiz um página de exemplo pra você aplicar no seu projeto. Espero que ajude. :-)

 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Colocando casas decimais</title>

  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="form.css">
</head>
<body>
  <form class="form">
    <label class="form-label" for="email">Email:</label>
    <input class="form-input" type="email" id="email" required>

    <label class="form-label" for="password">Password:</label>
    <input class="form-input" type="password" id="password" required>

    <input class="form-button" type="submit" value="Login">
  </form>

  <script src="form.js"></script>
</body>
</html>

JavaScript

(function () {
  'use strict';

  var $email = document.querySelector('#email');
  var $password = document.querySelector('#password');

  $email.addEventListener('invalid', function () {
    var $this = this;
    var errorsMessage = 'Sua mensagem de error.'

    $this.setCustomValidity('');

    if (!$this.validity.valid) {
      $this.setCustomValidity(errorsMessage);
    };
  });
})();

CSS (reset.css)

* {
  margin: 0;
  padding: 0;
  border: none;
  list-style: none;
}

html, body {
  height: 100%;
}

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #EFEFEF;
  background-color: #D1D5D8;
}

a {
  color: inherit;
  text-decoration: none;
}

input {
  font-size: inherit;
  font-family: inherit;
}

CSS (form.css)

.form {
  background-color: #28324E;
  width: 40%;
  padding: 5%;
  margin-top: 4em;
  margin-left: auto;
  margin-right: auto;
  font-size: 2em;
  text-align: center;
}
.form-label {
  display: block;
  margin-bottom: .4em;
}
.form-input {
  display: block;
  box-sizing: border-box;
  width: 80%;
  padding-left: 1.5%;
  padding-right: 1.5%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: .8em;
  height: 1.5em;
  border: 1px solid #2969B0;

  transition: border .2s linear;
}
.form-input:focus {
  border-width: 4px;
}

.form-button {
  display: inline-block;
  padding-left: 2%;
  padding-right:2%;
  background-color: #41A85F;
  color: inherit;
  font-weight: normal;
  cursor: pointer;
}

Tendo qualquer dúvida é só falar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Parnaiba    0

João Parnaiba
Postado

Não Deu certo! quando mando o seu formulário em branco um dos campos aparece por favor preencha este campo quero que apareça digite um usuário valido seu o usuário estiver em branco e digite uma senha valida se tiver a campo da senha em branco

Compartilhar este post

Link para o post
Compartilhar em outros sites

edramos    0

edramos
Postado

no scripty Marco Bruno e so fazer assim 

<form action="sua-conta.php" method="post" name="login_account" autocomplete>
    <fieldset id="logon">
        <legend>Faça seu login
        </legend>
        <input type="text" name="users-store" class="users" id="users" size="15" maxlength="20" placeholder="Usuário" oninput="novamsn(this)" required />
        <input type="password" name="password" class="password" id="password" size="15" placeholder="Senha" required />
        <input type="submit" value="Login" class="loginbutton" />
        <a href="index.html" class="create-account" title="Crie sua conta aqui" alt="Crie sua conta aqui">Criar Conta
        </a>
    </fieldset>
</form>


<script>
    ( function () {
        'use strict';

        var $users = document.querySelector('#users');
        var $password = document.querySelector('#password');

        $users.addEventListener('invalid', function () {
            var $this = this;
            var errorsMessage = 'Sua mensagem de login.'

            $this.setCustomValidity('');

            if (!$this.validity.valid) {
                $this.setCustomValidity(errorsMessage);
            };
        });
    }
    )();


    ( function () {
            'use strict';

            var $users = document.querySelector('#users');
            var $password = document.querySelector('#password');

            $password.addEventListener('invalid', function () {
                var $this = this;
                var errorsMessage = 'Sua mensagem de senha.'

                $this.setCustomValidity('');

                if (!$this.validity.valid) {
                    $this.setCustomValidity(errorsMessage);
                };
            });
        }
    )();



</script>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito