Jquery nie sprawdza warunku w if.

0

Witam,
Dlaczego warunek w if nie jest sprawdzany i przycisk się nie pokazuje?

<script src="${pageContext.servletContext.contextPath}/resources/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript"
        src="${pageContext.servletContext.contextPath}/resources/js/jquery.validate.min.js"></script>
<script>

    $('#btnRegister').hide();
    var validator = $( 'form' ).validate({
        rules: {
            email: {
                required: true,
                email: true,
                minlength: 3,
                maxlength: 100,

                remote: {
                    url: "<spring:url value="/register/available"/>",
                    type: "get",
                    data: {
                        username: function () {
                            return $('#email').val();
                        }
                    }
                }
            },
            password: {
                required: true,
                minlength: 3
            },
            name: {
                required: true,
                minlength: 3
            },
            lastname: {
                require: true,
                minlength: 3
            }
        },
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function (error, element) {
            if (element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        },
        messages: {
            email: {
                remote: "Such email already exists."
            }
        }
    });


    $( "#target" ).keypress(function() {
        $( "#testval" ).text(validator.numberOfInvalids() + " field(s) are invalid" ); //wyswietla liczbe blednych pol
        var numberOfInvalids = parse.int(validator.numberOfInvalids());

        if(validator.numberOfInvalids() > 0){
            $('#btnRegister').hide();
        }else{
            $('#btnRegister').show();
        }
    });
</script>

Formularz:

 
<div class="modal fade" id="register">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h3 class="modal-title"><spring:message code="page.register.header"/></h3>
            </div>
            <div class="modal-body" id="target">
                <div id="testval"></div>
                <%--<form:form commandName="user" cssClass="form-horizontal registrationForm">--%>
                <form:form commandName="user" action="/register" cssClass="form-horizontal">
                    <div class="form-group">
                        <label for="email" class="col-sm-2 control-label"><spring:message
                                code="page.register.email"/></label>

                        <div class="col-sm-10">
                            <form:input path="email" cssClass="form-control"/>
                            <form:errors path="email"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="password" class="col-sm-2 control-label"><spring:message
                                code="page.register.password"/></label>

                        <div class="col-sm-10">
                            <form:password path="password" cssClass="form-control"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label"><spring:message
                                code="page.register.name"/></label>

                        <div class="col-sm-10">
                            <form:input path="name" cssClass="form-control"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label"><spring:message
                                code="page.register.lastname"/></label>

                        <div class="col-sm-10">
                            <form:input path="lastname" cssClass="form-control"/>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <div class="form-group">
                            <div class="col-sm-12" id="btnRegister">
                                <input type="submit" value="<spring:message code="page.register.btn.register"/>"
                                       class="btn btn-lg btn-primary pull-right"/>
                            </div>
                        </div>
                    </div>
                </form:form>
            </div>
        </div>
    </div>
</div>

2.PNG3.PNG

0

Wez sobie przed tym warunkiem zrob:

console.log(validator.numberOfInvalids());

i zobacz co wypluwa konsola :)

0

Był problem z remote i parsowaniem, prawie działa. Tylko nie wiem czemu jak w jednym polu jest błąd to twierdzi, że jest 0, więc przycisk się wyświetla. Jak w większej liczbie pól jest błąd to działa dobrze.

<script>

    $('#btnRegister').hide();
    var validator = $( 'form' ).validate({
        rules: {
            email: {
                required: true,
                email: true,
                minlength: 3,
                maxlength: 100,

                <%--remote: {--%>
                    <%--url: "<spring:url value="/register/available"/>",--%>
                    <%--type: "get",--%>
                    <%--data: {--%>
                        <%--username: function () {--%>
                            <%--return $('#email').val();--%>
                        <%--}--%>
                    <%--}--%>
                <%--}--%>
            },
            password: {
                required: true,
                minlength: 3
            },
            name: {
                required: true,
                minlength: 3
            },
            lastname: {
                require: true,
                minlength: 3
            }
        },
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function (error, element) {
            if (element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        },
        messages: {
            email: {
//                remote: "Such email already exists."
            }
        }
    });


    $( "#target").on('input', function()  {
        $( "#testval" ).text(validator.numberOfInvalids() + " field(s) are invalid" ); //wyswietla liczbe blednych pol
        //var numberOfInvalids = parse.int(validator.numberOfInvalids());

        console.log("vfsd");
        console.log(validator.numberOfInvalids());
        if(validator.numberOfInvalids() > 0){
            $('#btnRegister').hide();
        }else{
            $('#btnRegister').show();
        }
    });
</script>

b1.PNG

0
(validator.numberOfInvalids() + " field(s) are invalid" ); 

gdzie masz zdefiniowane numverOfInvalids, co to robi?

var numberOfInvalids = parse.int(validator.numberOfInvalids());

gdzie masz zdefiniowane parse.int? (w czystym JS jest tylko parseInt)

0

zobacz co tu piszą:
http://stackoverflow.com/questions/8621743/jquery-numberofinvalids-function-is-not-working
Be sure to call valid on the form before calling numberOfInvalids:

1 użytkowników online, w tym zalogowanych: 0, gości: 1