I am validating a form with Javascript
, said form contains a recaptcha
to which, I would like to be able to enable a submit button after the recaptcha
and the other fields are verified, I got in the following link a way to verify the captcha, it works but when adding the attribute disabled
(such as the second response of the link) on the input, just by right clicking and inspect page, and deleting said attribute, the button is enabled again.
What I would like is to know how it is possible to enable the submit button only when the usuario
, contraseña
and the recaptcha
fields are filled, and if these fields do not contain anything, the continue button is disabled.
Use the method .prop()
but do not disable the button if this field is empty.
- JavaScript:
// Validación de ingreso
$(".validarIngreso").change(function(){
var usuario = $("#usuario").val();
var password = $("#password").val();
var error = $("#error");
error.text("");
if(usuario != "")
{
var caracteres = usuario.length;
var expresion = /^[a-zA-Z0-9]*$/; /*NO INCLUYA CARACTERES ESPECIALES*/
if(caracteres > 6)
{
error.append("<i class='fas fa-times'></i> Usuario incorrecto, ingresó más de 6 caracteres.");
}
else if(!expresion.test(usuario))
{
error.append("<i class='fas fa-times'></i> Por favor, no ingrese caracteres especiales en el usuario.");
}
else
{
error.text("");
}
}
else
{
$("#enviar").prop("disabled", true);
}
if(password != "")
{
var caracteres = password.length;
var expresion = /^[a-zA-Z0-9]*$/; /*NO INCLUYA CARACTERES ESPECIALES*/
if(caracteres < 6)
{
error.append("<i class='fas fa-times'></i> Contraseña incorrecto, ingresó menos de 6 caracteres.");
}
else if(!expresion.test(password))
{
error.append("<i class='fas fa-times'></i> Por favor, no ingrese caracteres especiales en la contraseña.");
}
else
{
error.text("");
}
}
else
{
$("#enviar").prop("disabled", true);
}
});
function enabledSubmit(response) {
$('#enviar')[0].disabled = false;
}
- HTML
<form method="POST">
<!-- usuario -->
<div class="group validarIngreso">
<input type="text" name="usuario" id="usuario" maxlength="6" required>
<span class="highlight"></span>
<span class="bar"></span>
<label><i class="fas fa-user-tie"></i> USUARIO</label>
</div>
<!-- contraseña -->
<div class="group validarIngreso">
<input type="password" name="password" id="password" pattern="(?=.*[a-z]).{6,}" required>
<span class="highlight"></span>
<span class="bar"></span>
<label><i class="fas fa-key"></i> CONTRASEÑA</label>
</div>
<span class="text-danger p-2" id="error"></span>
<div class="g-recaptcha" data-sitekey="6LcUXbkUAAAAAIwK4Jh4IuFT9j0WgHsHzl0IJPac" data-callback="enabledSubmit"></div>
</div>
<!-- botones del modal -->
<div class="modal-footer justify-content-center">
<button type="submit" class="btn btn-entrar" id="enviar">INGRESAR</button>
</form>
I made a function to give you an idea of how to do what you want. You would just have to adjust it to your liking, perhaps adding things to it that you wanted.
In this function we will use:
preventDefault()
: Prevent the default event. In this case send the form.submit()
: Send the form data.addEventListener()
: Register an event to a specific object.What we do in the code is the following:
We get the input user and input password elements, the submit button and the form.
We capture the event of the button with
addEventListener()
so that when clicked it performs an action.We create the function that will use the button.
We use
preventDefault()
to cancel the default event.We use a
if
to validate.Within
if
it we will validate theinputs
username and password if they contain what is desired.If they contain what we want, we will use the
form.submit()
to send the same function that we prevented before when clicking on the button.And otherwise we will send a
alert()
to warn the user of what he is doing wrong.You must add
if
the validation of the Recaptcha and if you wish, change thealert()
.I also recommend that you pass the RegEx you use in the password box and the
maxlength
one you use in the user box to JS .Note: You could remove the
type="submit"
from button and remove the first line of the function as we will send the data using the elementform
and the functionsubmit()
.