Mi formulario ha generado automáticamente campos de selección múltiple. Esto significa que no sé cuántos de ellos se crearán (depende del archivo de entrada). Además, el nombre de selección no se puede usar ya que se genera automáticamente de una manera específica, por lo que supongo que en jQuery tendría que ir con la clase o la ID.

Ya probé algunas opciones que encontré en stackoverflow, etc., y lo mejor que pude obtener fue mi código a continuación. En realidad, valida si hay al menos una opción seleccionada, pero en todos los campos de selección múltiple presentados. Entonces, si tengo 10 campos, en uno de ellos se seleccionó uno, eso es suficiente para que funcione el botón Enviar, que no es lo que quiero.

Ahí está la parte de jQuery:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script>
            $(function () {
                $('#myForm').submit(function () {
                    var isValid = true;
                    var form = this;
                    isValid = isValid && validateMultipleSelect($('select.required', form));
                    return isValid;
                });
            });
            function validateMultipleSelect(select) {
                var number = $('option:selected', select).size();
                alert("Select at least one option in each column per Vendor")
                return (number > 0);
            }
        </script>

Ahora bien, esta es la parte de formulario:

<form action="{% url 'index' %}" method="post" id="myForm">
            {% csrf_token %}
        <p></p>
        <hr>
​
        {% for vendor in vendor_list %}
             {{ vendor.vendor_name }} 
   ​
                    {% for columns in vendor.option_list %}
​
                        <select class="required" multiple id="required" name = '{{ columns.column_name }} {{ vendor.vendor_id }}'>
                            <option value = {{ columns.column_name }} disabled> {{ columns.column_name }}</option>
                                {% for option in columns.column_options %}
                                <option value= "{{ option }}"> {{ option }} </option>
                                {% endfor %}
                            <br>
                        </select>
​
​
                     {% endfor %}
            <br><br>
​
        {% endfor %}

Intenté extraer la longitud de la cantidad de campos de selección múltiple que tengo, por lo que si tengo 10 campos de selección, entonces la condición podría ser 'al menos 10 opciones seleccionadas'. Pero si de varios campos de selección uno de ellos tiene 10 opciones, se podrían seleccionar 10 en ese campo de selección y se pueden seleccionar cero opciones en cualquier otro campo de selección, eso aún permitiría que el botón de envío funcione (ya que se seleccionaron 10 opciones), lo cual no es lo que quiero.

Lo que necesito es validar cada uno de los campos seleccionados para al menos UNA opción seleccionada. Entonces, en todos esos campos seleccionados, se debe seleccionar al menos una opción para que el botón de envío funcione.

Entonces esto no debería funcionar (ya que el país de la última fila no está seleccionado):

enter image description here

Y esto debería funcionar:

enter image description here

¡Gracias de antemano por cualquier ayuda!

0
Piotr Konopnicki 3 oct. 2019 a las 16:45

1 respuesta

La mejor respuesta

Ok, alguien me ayudó, esto funciona:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            $('#myForm').submit(function () {
                var isValid = true;
                $('select.required').each((index, element) => {
                    var isValid = validateMultipleSelect(element);
                    if (!isValid) {
                        alert("Select at least one option in each column per vendor");
                        event.preventDefault()
                        return isValid;

                    }
                });
                return isValid;

            });
        });
        function validateMultipleSelect(select) {
            var number =$('option:selected', select).size();
            return (number >0);
        }

    </script>
0
Piotr Konopnicki 4 oct. 2019 a las 10:21