Operate a required? HTML5

Question

Operate a required? HTML5

Navigation

#1 by (1 votes)

3

guys! I'll be brief, I'm doing a basic form in HTML of the type "Register here", some input I throw them with attribute 'required', but when I try it they do not work for me. I leave an example.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/estilos.css">
<title>Regístrese aquí</title>
</head>
<body>
<form action="Registrar.php" class="formulario">
    <h1 class="titulo">Regístrese Aquí</h1>
    <div>
        <label for="nombres">Nombres: </label>
        <input type="text" name="nombres" id="nombres" required>
    </div>

    <div>
        <label for="apellidos">Apellidos: </label>
        <input type="text" name="apellidos" id="apellidos" >
    </div>

    <div>
        <label for="correo">Correo: </label>
        <input type="email" name="correo" id="correo" required>
    </div>

    <div>
        <label for="estadoCivil">Estado Civil</label>
        <select name="estadoCivil" id="estadoCivil">
            <option value="0"></option>
            <option value="1">Soltero(a)</option>
            <option value="2">Casado(a)</option>
            <option value="3">Union Libre</option>
            <option value="4">Viudo(a)</option>             
        </select>
    </div>      

    <div>
        <label for="genero">Genero: </label>
        Hombre <input type="radio" name="genero value="H> 
        Mujer <input type="radio" name="genero value="M>    
    </div>          

    <div>
        <label for="password">Password: </label>
        <input type="password" name="password" id="password" required>
    </div>

    <div>
        <label for="password1">Confirmar Password: </label>
        <input type="password1" name="password1" id="password1" required>
    </div>

    <div>
        <input type="button" value="Enviar" id="enviar" class="boton">
        <input type="reset" class="boton">
    </div>  

    <div class="mensajes">

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

JavaScript for the type button

enviar=document.getElementById("enviar");
enviar.onclick=validarDatos;

function validarDatos () {
    var elemento =document.getElementById("correo");
    if (elemento.checkValidity() ==false && elemento.required){
    //document.getElementById("mensajes").innerHTML='<p>Debe ingresar un ${elemento.id} valido</p>';
    document.getElementById("mensajes").innerHTML="<p>Debe ingresar un "+elemento.id +" valido</p>";
}
}

html5 required

asked by Ivan Gonzalez 24.03.2018 в 01:49

source

1 answer

Error "no such table: tablename (code 1):, while compiling: Query", code: 0 Calculate assistances, faults, delays in PHP

score 1 · Accepted Answer

A couple of things to mention if the only thing you're looking for is that you do not stop sending if the field is empty, the syntax you use is the correct one:

<input type="text" id="nombre-de-usuario" name="usuario" required>

However, what you have to consider is the degree of compatibility with browsers, which you can check in the following official link:

Required in CanIUse

Where you can see that the only problem you could have is if you use Internet Explorer from version 10 downwards

I also tell you that it does not work because you use the button label to do the processing of the form which by default will only work if you enter it with some javascript action, if you want to see that if it serves only change the type of button to submit

Look like this

<input type="submit" value="Enviar" id="enviar" class="boton">

I also commented that to make a simpler validation, leave the required attribute in the HTML so when it is available it will also work and on the other hand in javascript you can handle it so look

In the input button you invoke the function like this:

<div>
        <input onclick="validar()" type="button" value="Enviar" id="enviar" class="boton">
        <input type="reset" class="boton">
    </div>

And inside the javascrip I handle it like this:

<script>
    function validar() {
        var elemento = document.getElementById("correo").value
      if (elemento == ""){
        alert("Debes llenar el campo")
        return false
      }else {
        alert("Genial el valor es: "+elemento)
        return false
      }
    }

  </script>

And with the above you can leave your input as a button without needing to put submit