我正在验证一个带有 的表单Javascript
,所述表单包含一个recaptcha
,我希望能够在recaptcha
验证 和其他字段后启用提交按钮,我在以下链接中获得了一种验证验证码的方法,它可以工作但是在输入上添加属性disabled
(例如链接的第二个响应)时,只需右键单击并检查页面,然后删除该属性,即可再次启用该按钮。
我想知道如何仅在填充 和 字段时启用提交按钮,usuario
如果这些字段不包含任何内容,则禁用继续按钮。contraseña
recaptcha
如果此字段为空,请使用该方法.prop()
但不要禁用按钮。
- 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>
我做了一个功能,让你知道如何做你想做的事。您只需要根据自己的喜好对其进行调整,也许可以添加您想要的东西。
在这个函数中,我们将使用:
preventDefault()
: 防止默认事件。在这种情况下发送表格。submit()
:发送表单数据。addEventListener()
:将事件注册到特定对象。我们在代码中所做的事情如下:
我们得到输入用户和输入密码元素、提交按钮和表单。
我们捕获按钮的事件,
addEventListener()
以便在单击时执行操作。我们创建将使用该按钮的函数。
我们
preventDefault()
用来取消默认事件。我们使用 a
if
来验证。在其中
if
,我们将验证inputs
用户名和密码是否包含所需内容。如果它们包含我们想要的内容,我们将使用
form.submit()
来发送我们在单击按钮之前阻止的相同功能。否则我们将发送一个
alert()
警告用户他做错了什么。您必须添加
if
对Recaptcha的验证,如果您愿意,可以更改alert()
.我还建议您将您在密码框中使用的RegEx和您在用户框中使用的 RegEx 传递给JS。
maxlength
注意:您可以删除
type="submit"
from 按钮并删除函数的第一行,因为我们将使用元素form
和函数发送数据submit()
。