JQuery Проверка AddMethod для HTML Множественный выбор - PullRequest
Новая
       1

JQuery Проверка AddMethod для HTML Множественный выбор

0 голосов
/ 15 марта 2020

Я использую Jquery проверить addmethod для формы множественного выбора. Я не понимаю данные / типы данных, передаваемые методу (значению, элементу), чтобы можно было написать желаемое условие. Условие должно проверять, было ли выбрано более двух параметров, и если «Смешанное» является одним из значений, вернуть ошибку. Я приложил скриншот моих усилий по отладке для печати типов объектов и значений. В моем реальном коде условие, которое я выполняю (если значение == 1), очевидно, не работает из-за типов данных, которые были только для тестирования.

Пример желаемой функциональности 

$.validator.addMethod(
    "mixedbreed",
    function(value, element) {
        if ( value.length >= 2 && value.includes("Mixed") ) {
            return false;
        }
    },
    "Can't use 'Mixed' with other options"
);

HTML

<html>
    <head>
        <?php echo $html_head ?>
        <link rel="stylesheet" href="css/animal.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
    </head>
    <body>
        <?php echo $html_navigation ?>
        <h2 align="center">Edit Animal</h2>
            <div align="center" class="container">
                <form name="animal" id="animal" method="POST">
                    Breeds:
                    <select name="breeds[]" id="breeds" multiple>
                        <option>--Species Required--</option>
                    </select>
                    <input type="submit" name="animal_form" onclick="submitForm();"/>
                </form>
            </div>
    </body>
</html>

Данные о породах 

<?php
    include_once('../resources/config.php');
    include_once('session.php');

    $result = sql_select_available_breeds("Cat");


    while( $row = pg_fetch_row($result) ) {
        echo sprintf("<option value='%s'>%s</option>",
                     $row[1], $row[1]);
    }
?>

JQuery

    function submitForm() {
        $.validator.addMethod(
            "mixedbreed",
            function(value, element) {
                if ( value.length == 1 ) {
                    return false;
                }
            },
            function(value, element) {
                return "Bad value: " + value + " " + element[0].text + " " + typeof element[0];
            }
        );

        var animal_validator = $("#animal").validate({
            rules: {
                'breeds[]': {
                    required: true,
                    mixedbreed: true
                }
            },
            errorElement: "span",
            messages: {
                'breeds[]': {
                    required: "b required "
                }
            }
        });
        if (animal_validator.form()) {
            $('form#animal').attr({
                action: 'mycontroller'
            });
            $('form#animal').submit();
        }
    }

Результат

Я пытался понять типы объектов и структуры данных. Я не могу различить guish опции, которые были выбраны из нет. enter image description here

1 Ответ

0 голосов
/ 15 марта 2020

Изначально я был довольно близок к пониманию типа данных. Ниже приведена ссылка, которая поможет мне и моему решению.

Параметры Looping 

$.validator.addMethod(
// argument #1 = method name
"mixedbreed",
// argument #2 = condition
function(value, elements) {
    let selected = 0;
    let mixed = Boolean(false);
    for (let i = 0; i < elements.length; i++) {
        if (elements[i].selected) {
            selected++;
            if (elements[i].text == "Mixed") {
                mixed = true;
            }
        }
    }
    if (selected >= 2 && mixed) {
        return false;
    } else {
        return true;
    }
},
// argument #3 = error message
"'Mixed' not allowed with other breed(s)"
);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...