jquery - 如果未选中/未选择已输入数据的jQuery，如何为每个元素添加跨度

Question

我有这个表格...

<form action="" method="post" id="register">
    <ol class="subproduct">
        <li>
            <input type="checkbox" name="extra2" value="Multidispositivo" />
            <p class="checkbox"></p>
                <h3>Multidispositivo <span class="price"><span>+2</span>€</span></h3>

            <p>Disfrute la conexión en hasta 3 dispositivos simultáneamente</p>
        </li>
        <li>
            <input type="checkbox" name="extra2" value="Multidispositivo" />
            <p class="checkbox"></p>
                <h3>Multidispositivo <span class="price"><span>+2</span>€</span></h3>

            <p>Disfrute la conexión en hasta 3 dispositivos simultáneamente</p>
        </li>
        <li>
            <input type="checkbox" name="extra2" value="15 min extra" />
            <p class="checkbox"></p>
                <h3>15 min extra <span class="price"><span>+4</span>,10€</span></h3>

            <p>Además podrá usar correo, redes sociales, VPN y tendrá más velocidad de conexión</p>
        </li>
        <li>
            <input type="checkbox" name="extra2" value="Multidispositivo" />
            <p class="checkbox"></p>
                <h3>Multidispositivo <span class="price"><span>+2</span>€</span></h3>

            <p>Disfrute la conexión en hasta 3 dispositivos simultáneamente</p>
        </li>
    </ol>
    <div class="data">
            <h3>Datos de acceso</h3>

        <p class="email-login">
            <label for="email-login">Su correo electrónico</label>
            <input id="email-login" name="email-login" type="text" placeholder="Su correo electrónico" />
        </p>
        <p class="password-login">
            <label for="password-login">Elija una contraseña</label>
            <input id="password-login" name="password-login" type="text" placeholder="Elija una contraseña" />
        </p>
            <h3>Datos personales</h3>

        <p>
            <label for="name">Nombre y apellidos</label>
            <input id="name" name="name" type="text" placeholder="Nombre y apellidos" />
        </p>
        <div class="data1">
            <p class="gender">  <span class="female">
                    <label for="gender-female">Mujer</label>
                    <input id="gender-female" name="gender-female" type="radio" value="Mujer" />
                </span>
    <span class="male">
                    <label for="gender-male">Hombre</label>
                    <input id="gender-male" name="gender-male" type="radio" value="Hombre" />
                </span>

            </p>
            <p class="age select">  <span>Edad</span>

                <select></select>
            </p>
        </div>
        <div class="data2">
            <p class="country select">  <span>País</span>

                <select></select>
            </p>
            <p class="postal">
                <label for="postalcode">Código postal</label>
                <input id="postalcode" name="postalcode" type="text" value="" />
            </p>
        </div>
        <div class="terms">
            <input type="checkbox" name="terms" value="Acepto las condiciones" />
            <p class="checkbox"></p>
            <p class="termsconds">Acepto las condiciones
                <a title="Términos y condiciones" href="static.html">?</a>
            </p>
        </div>
        <p class="submit">  <span class="button">Conectar</span>

            <input id="register-submit" type="submit" value="Conectar" />
        </p>
    </div>
</form>

如果每个人都没有输入/选择/复选框，我需要给一个错误...。

目前我有这个

$(document).ready(function () {
    $('#register').submit(function () {
        $("#email-login").each(function () {
            if ($(this).val() === "") {
                $("#email-login").after('<span class="register-error email-error">email</span>');
            }
        });
        $("#password-login").each(function () {
            if ($(this).val() === "") {
                $("#password-login").after('<span class="register-error password-error">password</span>');
            }
        });
        $("#name").each(function () {
            if ($(this).val() === "") {
                $("#name").after('<span class="register-error name-error">name</span>');
            }
        });

        if ($("#gender-female").is(':checked')) {
            //$(this).prop('checked',false);
            $("#gender-male").after('<span class="register-error female-error"></span>');
            $("#gender-female").hide().after();
        } else {
            //$(this).prop('checked',true);
            $("#gender-female").after('<span class="register-error female-error"></span>');
            $("#gender-male").hide().after();
        }

        $(".data select").each(function () {
            if ($(this).val() === "") {
                $(".data select").after('<span class="register-error select1-error">age</span>');
            }
        });
        $(".data2 select").each(function () {
            if ($(this).val() === "") {
                $(".data2 select").after('<span class="register-error select2-error">plage</span>');
            }
        });
        $("#postalcode").each(function () {
            if ($(this).val() === "") {
                $("#postalcode").after('<span class="register-error postalcode-error">postcode</span>');
            }
        });
        $(".terms checkbox").each(function () {
            if ($(this).val() === "") {
                $(".terms checkbox").after('<span class="register-error select2-error">agree</span>');
            }
        });
        return false;

    });


});


$(document).on('click', '.register-error', function () {
    $(this).remove();
    return false;
});

它的输入字段很好，但是我无法使性别成为或隐藏点击错误，并且我不知道如何让jquery来查找被填充的内容？

有任何想法吗？

Answer 1

// Validate on submit
$('form').submit(function() { return validateForm(); });

// validate on change
$(':input').change(function() { validateForm(); });

var validateForm = function() {
    var validates = true;

    $(':input') // Find all form elements
        .not('input[type="submit"]') // Exclude the submit button
        .each(function(i) {
            var $this = $(this), // ~cache the jQuery object
                selected = $this.is(':checkbox') ? this.checked : !!$this.val(); // Check selected checkbox or a required value

            // TODO: Check for radio grouped buttons

            console.log(i, selected); // DEBUG

            // Toggle "invalid" class
            $this.toggleClass('invalid', !selected);

            if (!selected) validates = false;
        });

    console.log('Form validates', validates); // DEBUG
    return validates;
};

http://jsfiddle.net/S2jJ3/