Validate a select field

Question

Validate a select field

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

2

Update of the question. I need to validate a Select with jquery.validate and bootstrap before registering, otherwise I send the alert. I have the house table and the bet table, in the selected form it is the id of the house table to know the name of the house, and it is that selection that I need to validate. See image.

The problem is seen in image 2, that after selecting the betting house, it continues validating as if nothing had been selected. The code used in the form is this:

<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>

The code used for the validation is this:

// 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('');
        },
    });
});

jquery-validate bootstrap

asked by Scorpion 18.07.2017 в 20:27

source

4 answers

How to change the language of all asp.net mvc error messages from English to Spanish? Notice: Undefined index: id

score 1 · Answer 1

To obtain the value of a select the short form is:

$('select').val();

to avoid sending you can put a return false;

aside you have a problem with if since valid 0 == "" and this returns 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');
    }
});

score 0 · Answer 2

Look here:

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

You have the default value if no option is selected is 0 but in the script you have:

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

When it should be:

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

If you do not have a defined jquery, add this script tag to the top of the page:

  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <div class="modal-body">
     ...

score 0 · Answer 3

Change your PHP and add an ID to the select and change the value 0

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

With jquery do this

$(".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;
}
});

That should work

score 0 · Answer 4

Compadre leave the option empty:

<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>

And try now.