Question

我想验证两个输入是否具有“ validate-input”类。当他们选择了几个下拉菜单时，我要添加validate-input类。例如

            <div class="wrap-input100 input100-select bg1 rs1-wrap-input100" data-validate = "Choose one of the options">
            <span class="label-input100">Choose one of the options</span>
            <div>
                <select class="js-select2 optiuni" name="service">
                    <option>Choose...</option>
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                    <option>Option 4</option>
                </select>

            </div>
        </div>
        <div class="wrap-input100 bg2 dis-none js-show-anulare" data-validate = "Add xyz">
            <p><span class="label-input100">Add xyz</span></p>
            <div class="wrap-input100 bg1 rs1-wrap-input100 iban" data-validate = "Add yxz">
                <span class="label-input100">Add yxz*</span>
                <input class="input100" type="text" name="anulare" placeholder="Add yxz">
            </div>
            <div class="wrap-input100 bg1 rs1-wrap-input100 nume-ben" data-validate = "Add xyz">
                <span class="label-input100">Add xyz*</span>
                <input class="input100" type="text" name="anulare" placeholder="Add xyz">
            </div>
        </div>
<script>
        $(".js-select2").each(function(){
            $(this).select2({
                minimumResultsForSearch: 20,
            });


            $(".js-select2").each(function(){
                $(this).on('select2:close', function (e){
                    if($(this).val() == "Choose...") {
                        $('.js-show-anulare').slideUp();
                        $('.iban').removeClass("validate-input");
                        $('.nume-ben').removeClass("validate-input");
                    }
                    else if ($(this).val() == "Option 1") {
                        $('.js-show-anulare').slideDown();
                        $('.iban').addClass("validate-input");
                        $('.nume-ben').addClass("validate-input");
                    }
                    else if ($(this).val() == "Option 2") {
                        $('.js-show-anulare').slideDown();
                        $('.iban').addClass("validate-input");
                        $('.nume-ben').addClass("validate-input");
                        //validate-input
                    }   
                    else if ($(this).val() == "Option 3") {
                        $('.js-show-anulare').slideUp();
                        $('.iban').removeClass("validate-input");
                        $('.nume-ben').removeClass("validate-input");
                    }
                    else if ($(this).val() == "Option 4") {
                        $('.js-show-anulare').slideDown();
                        $('.iban').addClass("validate-input");
                        $('.nume-ben').addClass("validate-input");

                    }                   

                });
            });
        })
    </script>

这是验证者

(function ($) {
    "use strict";


    /*==================================================================
    [ Validate after type ]*/
    $('.validate-input .input100').each(function(){
        $(this).on('blur', function(){
            if(validate(this) == false){
                showValidate(this);
            }
            else {
                $(this).parent().addClass('true-validate');
            }
        })    
    })


    /*==================================================================
    [ Validate ]*/
    var input = $('.validate-input .input100');

    $('.validate-form').on('submit',function(){
        var check = true;

        for(var i=0; i<input.length; i++) {
            if(validate(input[i]) == false){
                showValidate(input[i]);
                check=false;
            }
        }

        return check;
    });


    $('.validate-form .input100').each(function(){
        $(this).focus(function(){
           hideValidate(this);
           $(this).parent().removeClass('true-validate');
        });
    });

     function validate (input) {
        if($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
            if($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
                return false;
            }
        }
        if($(input).attr('type') == 'telefon' || $(input).attr('name') == 'telefon') {
            if($(input).val().trim().match(/^\+?\d+$/) == null) {
                return false;
            }
        }
        if($(input).attr('select') == 'optiuni' || $(input).attr('name') == 'service') {
            if($(input).val("Choose...") == true) {
                return false;
            }
        }
                else {
            if($(input).val().trim() == ''){
                return false;
            }
        }
    }

    function showValidate(input) {
        var thisAlert = $(input).parent();

        $(thisAlert).addClass('alert-validate');

        $(thisAlert).append('<span class="btn-hide-validate">&#xf136;</span>')
        $('.btn-hide-validate').each(function(){
            $(this).on('click',function(){
               hideValidate(this);
            });
        });
    }

    function hideValidate(input) {
        var thisAlert = $(input).parent();
        $(thisAlert).removeClass('alert-validate');
        $(thisAlert).find('.btn-hide-validate').remove();
    }



})(jQuery);

但是，如果仅在加载DOM之后才添加validate-input类，则验证器功能不起作用，我认为这是原因，我并不十分了解验证器不起作用的原因。 / p>

如果选择的选项正确，我尝试使用.html（''）创建新的div，但是仍然无法正常工作。

谢谢！

addClass之后的输入验证

0 个答案: