2

Actualización de la pregunta. Necesito validar un Select con jquery.validate y bootstrap antes de registrar, de lo contrario que mande la alerta. Tengo la tabla casa y la tabla apuesta, en el formulario selecciono es el id de la tabla casa para saber el nombre de la casa, y es ese selecc el que necesito validar. Ver imagen.introducir la descripción de la imagen aquí

El problema se ve en la imagen 2, que después de seleccionar la casa de apuesta sigue validando como si no se hubiera seleccionado nada. El código utilizado en el formulario es este:

<form action="registrar_apuesta.php" method="GET" name="myform" id="myform">  
    <div class="row">                                                                                   
        <div class="col-md-6">
            <div class="form-group">
                <label for="id_casa">Casa de Apuesta *:</label>
                <div class="input-group">				
                    <span class="input-group-addon">
                        <i class="glyphicon glyphicon-home"></i>
                    </span> 
                    <select id="id_casa" class="form-control" name="id_casa">
                        <?php
                        $mysqli = new mysqli('localhost', 'root', 'root', 'apuestas');
                        ?>
                        <option value="0">-- Seleccionar --</option>
                        <?php
                        $query = $mysqli->query("SELECT * FROM casa order by nombre_ca asc");

                        while ($valores = mysqli_fetch_array($query)) {
                            echo '<option value="' . $valores['id_casa'] . '">' . $valores['nombre_ca'] . '</option>';
                        }
                        ?>
                    </select>                                                 
                </div> 
                <span class="help-block" id="error"></span>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">				
                <label for="valor_apostado" class="form-control-label">Valor Apostado *</label>
                <div class="input-group">				
                    <span class="input-group-addon">
                        <i class="glyphicon glyphicon-usd"></i>
                    </span> 
                    <input type="text" class="form-control" id="valor_apostado" name="valor_apostado" placeholder="" required="true">                                                    
                </div>
                <span class="help-block" id="error"></span>
            </div>
        </div>
    </div>                               
</div>
<div class="modal-footer">
    <input type="submit" class="btn btn-success" value="Registrar">
    <button type="button" class="btn btn-danger" data-dismiss="modal"><span class='glyphicon glyphicon-remove'></span> Cerrar</button>
</form>

El código utilizado para la validación es este:

// JavaScript Validation For Registration Page

$('document').ready(function ()
{
    var combb = / /;
    $.validator.addMethod("combo", function (value, element) {
        return this.optional(element) || combb.test(value);
    });

    var nameregex = /[0-9]/;

    $.validator.addMethod("validvalorapos", function (value, element) {
        return this.optional(element) || nameregex.test(value);
    });

    $("#myform").validate({
        rules:
                {
                    id_casa: {
                        required: true,
                        combo: true,
                    },
                    valor_apostado: {
                        required: true,
                        validvalorapos: true,
                        minlength: 4
                    },
                },
        messages:
                {                    
                    id_casa: {
                        required: "Seleccione una casa de Apuesta",
                        combo: "Seleccione una casa de Apuesta",
                    },
                    valor_apostado: {
                        required: "Ingrese el Valor Apostado",
                        validvalorapos: "Sólo se pueden Ingresar Números",
                        minlength: "Su Nombre es Demasiado Corto"
                    },
                },
        errorPlacement: function (error, element) {
            $(element).closest('.form-group').find('.help-block').html(error.html());
        },
        highlight: function (element) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
            $(element).closest('.form-group').find('.help-block').html('');
        },
    });
});

4 respuestas 4

1

Para obtener el valor de un select la forma corta es:

$('select').val();

para evitar el envió puedes poner un return false;

aparte tienes un problema con el if ya que validas 0 == "" y esto retorna false

$(".validar_form").submit(function (e) {
    var select = $("select").val();

    if (select == 0) {
        $('.error').text("Seleccione una Casa de Apuestas");
        return false;
    } else {
        $('.errors').hide();
        alert('OK');
    }
});
6
  • También hice los cambios sugeridos por @JuanKGlezz y tampoco
    – Scorpion
    el 18 jul. 2017 a las 18:56
  • tu value de los options que valor contienen? números o texto?
    – JuankGlezz
    el 18 jul. 2017 a las 19:17
  • contienen números, pues es la llave foranea que hace referencia a otra tabla.
    – Scorpion
    el 18 jul. 2017 a las 19:19
  • @Scorpion he arreglado la respuesta, no funciona la validación de un numero con un texto
    – JuankGlezz
    el 18 jul. 2017 a las 19:20
  • Nada, no me funciona
    – Scorpion
    el 18 jul. 2017 a las 19:24
0

Mira aqui:

<option value="0">-- Seleccionar --</option>

Tienes que el valor por defecto si no se selecciona ninguna opcion es 0 pero en el script tienes:

var select = $("select option:selected").val();    
if (select == "") 
//..

Cuando debería de ser :

 var select = $("select option:selected").val();    
 if (select == "0")

Si no tienes definido jquery agrega esta etiqueta script al principio de la pagina:

  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <div class="modal-body">
     ...
13
  • Hice los cambios sugeridos pero sigue sin funcionar
    – Scorpion
    el 18 jul. 2017 a las 18:48
  • Dale un vistazo a la respuesta que la actualize.
    – Einer
    el 18 jul. 2017 a las 18:51
  • Sigue sin funcionar
    – Scorpion
    el 18 jul. 2017 a las 18:55
  • Estraño, me funciona correctamente. Tienes algun otro select en el formulario?
    – Einer
    el 18 jul. 2017 a las 19:03
  • Solamente tengo ese, ese es el código del formulario, tengo otros select pero en otros formualrios y no creo que genere conflicto
    – Scorpion
    el 18 jul. 2017 a las 19:06
0

Cambia tu PHP y añade un ID al select y cambia el valor 0

<select class="form-control" name="id_casa" id="id_casa">
 <option selected disabled>-- Seleccionar --</option>
</select>

Con jquery haz esto

$(".validar_form").submit(function () {
var select = $("#id_casa").val();
if (select == null) {
    $('.error').text("Seleccione una Casa de Apuestas");
    return false;
} else {
    $('.errors').hide();
    alert('OK');
    return true;
}
});

Eso debería funcionar

1
  • Agradezco a todos por sus comentarios, pero no logre dar solución al problema, ahora estoy intentando con jqueryvalidate, hago una nueva pregunta y doy por concluida esta o edito la pregunta original por la nueva, cuál es el procedimiento correcto?
    – Scorpion
    el 19 jul. 2017 a las 20:02
0

Compadre deje vacio el option:

<select id="id_casa" class="form-control" name="id_casa">
                    <?php
                    $mysqli = new mysqli('localhost', 'root', 'root', 'apuestas');
                    ?>
                    <option value="">-- Seleccionar --</option>
                    <?php
                    $query = $mysqli->query("SELECT * FROM casa order by nombre_ca asc");

                    while ($valores = mysqli_fetch_array($query)) {
                        echo '<option value="' . $valores['id_casa'] . '">' . $valores['nombre_ca'] . '</option>';
                    }
                    ?>
                </select>

Y prueba ahora.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.