Show error message in a span of a form in javascript

Question

Show error message in a span of a form in javascript

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

0

I made a validation but I want the message to fill in all the fields to be displayed in a span with javascript:

function validarformulario(){

var nombre,correo,compañia,expresion;
nombre =document.getElementById('nombre').value;
correo=document.getElementById('email').value;
compañia=document.getElementById('compañia').value;

expresion= /^[-\w.%+]{1,64}@(?:[A-Z0-9-]{1,63}\.){1,125}[A-Z]{2,63}$/i;

if ( nombre ==="" || compañia==="" || correo==="" ) { 
   error.html(<'span>Todos los campos son obligatorios</span>');
          return false
}
else if (!expresion.test(email.value)){ 
      error.html('<span>Please enter a valid email address</span>');
       return false
     }
}

javascript html

asked by Einer 29.08.2017 в 21:08

source

3 answers

How to achieve shadow effect in Wpf 0,1 + 0,2 === 0,3 - FALSE [duplicated]

score 1 · Answer 1

var errorSpan = document.getElementById("formError");

errorSpan.innerHTML = "Rellena todos los campos" // plain javascript

// $("#errorSpan").html("Rellena todos los campos");  Jquery

<html>
<head>
  <title></title>
</head>

<body>

  <span id="formError"></span>

</body>

</html>

score 1 · Answer 2

I imagine that something like this is what you want, but clarifying a bit the doubts about your code, maybe it does not work for you because you declare the variables, with that I mean this, var name, company, email; You have to declare them individually, var name; male company; etc. I also recommend that you do not use Ñ in variable names. Also to see this type of errors you can use the browser console, pressed F12 in most browsers, and look for the console tab (Console) and errors appear there, if there are any.

I hope you serve, greetings.

function validarformulario(){

        var nombre;
        var correo; 
        var company;
        var expresion;
        nombre =document.getElementById('nombre').value;
        correo=document.getElementById('email').value;
        company=document.getElementById('compañia').value;

        expresion= /^[-\w.%+]{1,64}@(?:[A-Z0-9-]{1,63}\.){1,125}[A-Z]{2,63}$/i;

        if ( nombre ==="" || company==="" || correo ==="" ) { 
            document.getElementById("demo").innerHTML = "Todos los campos son obligatorios";
            return false
        }
        else if (!expresion.test(email.value)){ 
            document.getElementById("demo").innerHTML = "Please enter a valid email address";
            return false
        }
    }

    <input type="text" id="nombre">
    <input type="text" id="email">
    <input type="text" id="compañia">
    <button  onclick="validarformulario()">Validar</button><br>
    <span id="demo"></span>

score 0 · Answer 3

<!DOCTYPE html>
<html lang="en">
  <head>

    <meta charsef="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>

  <body>
      <div>
        <input type="text" name="" id="nombre" placeholder="nombre">        
        <input type="text" name="" id="email" placeholder="email">
        <input type="text" name="" id="compania" placeholder="compañia">
        <button type="button" onclick="validarformulario()"> Enviar</button>
        <span></span>        
      </div>
      
      <script>
        function validarformulario(){

          var nombre,correo,compania,expresion;
          nombre =document.getElementById('nombre').value;
          correo=document.getElementById('email').value;
          compania=document.getElementById('compania').value;

          expresion= /^[-\w.%+]{1,64}@(?:[A-Z0-9-]{1,63}\.){1,125}[A-Z]{2,63}$/i;

            if ( nombre ==="" || compania==="" || correo==="" ) { 
               
               $("span").html("<span>Todos los campos son obligatorios</span>");
                  return false
            }
            else if (!expresion.test(email.value)){ 
                $("span").html('<span>Please enter a valid email address</span>');
                 return false
               }
        }
      </script>
  </body>
</html>

Maybe this can be useful Greetings !!!!