I try to go through all the input of a form associated by the class, where I want to validate if each of these elements is empty, and if it is disabled by a button, when they are all full and if it is possible to append that for all the fields the minimum of characters is 7
$(document).ready(function() {
$('#btn-buy').prop('disabled', true);
$('.reque').each(function(){
alert($(this).text())
$('.reque').keyup(function() {
console.log($(this));
if($(this).val() != '') {
$('#btn-buy').prop('disabled', false);
}
});
});
});
<form class="form" id="creditcard-form" role="form">
<h1>Formulario de Pago</h1>
<div class="jumbotron" id="wrapper">
<h3 class="alert">Por favor ingrese los siguientes datos</h3>
<div class="container row">
<div class="col-md-6">
<div class="form-group row">
<label for="" class="col-md-4 form-control-label">Nombre de su organización:</label>
<div class="col-md-6">
<input type="text" class="form-control form-control-lg reque" name="nombre_organizacion" id="nombre_organizacion" required="" pattern="[A-Za-zñÑáéíóúÁÉÍÓÚ0 ]{1,150}" title="Solo letras son permitidas para este campo" maxlength="150" onkeypress="return validar(event);">
</div>
</div>
<div class="form-group row">
<label for="" class="col-md-4 form-control-label reque">Correo electrónico:</label>
<div class="col-md-6">
<input type="email" class="form-control form-control-lg" name="correo_electronico" id="correo_electronico" required="" maxlength="255">
</div>
</div>
<div class="form-group row">
<label for="" class="col-md-4 form-control-label reque">Teléfono:</label>
<div class="col-md-6">
<input type="text" class="form-control form-control-lg" name="telefono" id="telefono" required="" pattern="[0-9+]{7,50}" maxlength="50" title="Solo números y el signo + son permitidos en este campo" onkeypress="return validartelf(event);">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label for="" class="col-md-4 form-control-label reque">Dirección:</label>
<div class="col-md-6">
<input type="text" class="form-control form-control-lg" name="direccion" id="direccion" required="" maxlength="100" onkeypress="return validarln(event);">
</div>
</div>
<div class="form-group row">
<label for="" class="col-md-4 form-control-label reque">País:</label>
<div class="col-md-6">
<?php
require_once "includes/funciones/bd_conexion.php";
$sql="SELECT * FROM paises";
$sql=$conn->query($sql);
echo '<select required="" name="idpais" id="idpais" class="form-control form-control-lg">';
echo ' <option value="0">Seleccione</option>';
foreach ($sql as $key => $value) {
echo ' <option value="'.$value['iso'].'">'.utf8_encode($value['nombre']).'</option>';
}
echo '</select>';
?>
</div>
</div>
<div class="form-group row">
<label for="" class="col-md-4 form-control-label reque">Ciudad:</label>
<div class="col-md-6">
<input required="" type="text" class="form-control form-control-lg" pattern="[A-Za-zñÑáéíóúÁÉÍÓÚ0 ]{1,50}" title="Solo letras son permitidas en este campo" name="city" id="city" maxlength="50" onkeypress="return validar(event);">
</div>
</div>
</div>
</div>
<div class="container row">
<div class="col-sm-8 col-12" id="creditcard">
<h3 class="alert">Información de su Tarjeta de Crédito</h3>
<div class="form-group row">
<label for="" class="col-md-4 form-control-label reque">Nombre del títular de la tarjeta:</label>
<div class="col-md-6">
<input required="" type="text" class="form-control form-control-lg" pattern="[A-Za-zñÑáéíóúÁÉÍÓÚ0 ]{1,50}" name="payer_name" title="Solo letras son permitidas en este campo" id="card-holder-name" maxlength="50" onkeypress="return validar(event);">
</div>
</div>
<div class="form-group row">
<label for="" class="col-md-4 form-control-label reque">Número:</label>
<div class="col-md-6">
<input type="number" class="form-control form-control-lg" name="credit_card_number" id="card-number" required="" maxlength="16" pattern="[0-9]{16}" title="Solo números son permitidos en este campo" onkeypress="return getCardType(event);">
<span id="mensaje"></span>
</div>
<div class="col-md-2">
<img name="imgty" id="type" src="" alt="" width="54" height="54" style="float: left;">
<input type="hidden" name="payment_method" id="payment_method">
</div>
</div>
<div class="form-group row">
<label class="col-md-4 f-control-label" for="expiry-month">Fecha de expiración</label>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<select required="" class="form-control form-control-lg reque" name="month_exp" id="expiry-month">
<option value="01">Ene (01)</option>
<option value="02">Feb (02)</option>
<option value="03">Mar (03)</option>
<option value="04">Abr (04)</option>
<option value="05">May (05)</option>
<option value="06">Jun (06)</option>
<option value="07">Jul (07)</option>
<option value="08">Ago (08)</option>
<option value="09">Sep (09)</option>
<option value="10">Oct (10)</option>
<option value="11">Nov (11)</option>
<option value="12">Dic (12)</option>
</select>
</div>
<div class="col-md-6">
<select required="" class="form-control form-control-lg reque" name="year_exp">
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="" class="col-md-4 form-control-label"><a href="#" data-toggle="modal" data-target="#exampleModalCenter"><i class="fas fa-info-circle"></i> CCV:</a></label>
<div class="col-md-6">
<input required="" type="password" class="form-control form-control-lg reque" name="security_code" id="cvv" maxlength="4" pattern="[0-9]{3,4}" title="Solo números son permitidos en este campo" onkeypress="return validarcvv(event);">
</div>
</div>
<div class="form-group row">
<label for="" class="col-md-4 form-control-label">Documento de identidad:</label>
<div class="col-md-6">
<input required="" type="number" class="form-control form-control-lg reque" pattern="[0-9]{25}" title="Solo números son permitidos en este campo" name="number_document" id="number_document" maxlength="25" onkeypress="return validarnum(event);">
</div>
</div>
<h3 class="alert text-center">Por favor ingrese el ID del vendedor</h3>
<div class="form-group row">
<label for="" class="col-md-4 form-control-label">ID del vendedor:</label>
<div class="col-md-6">
<input type="text" class="form-control form-control-lg" title="Solo letras son permitidas en este campo" name="id_seller" id="id_seller" maxlength="30" onkeypress="return validarln(event);">
</div>
</div>
</div>
<div class="col-sm-4 align-self-center">
<div class="">
<br>
<?php $deviceSessionId = md5(session_id().microtime()); ?>
<input type="hidden" name="dsi" value="<?php echo $deviceSessionId; ?>">
<button id="btn-buy" onclick="Payment.creditcard()" type="button" class="btn btn-success">Pagar ahora</button>
</div>
<a href="https://www.payulatam.com" target="_blank"><img src="img/logo-payu.png" alt="PayU Latam" border="0" /></a> <br>
</div>
</div>
<div class="container">
<div class="col-md-12">
<a href="politicas de tratamiento de datos.p" target="_blank"><img src="img/pdf.png" alt=""> Política de Tratamiento de seguridad de la Información para dar cumplimiento a la 1581 de 2012 </a>
</div>
</div>