Question

我正在尝试使用spring security实现一个简单的登录表单。但我希望确保每次用户按下按钮时，只有在所有内容都填满后才会提交表单。

我正在使用验证Jquery验证，问题是在按下按钮后，表单仍然被提交（即使所有字段都是空的）。

我的JSP是：

<form id="loginuser" name="loginuser" action="<spring:url value="/j_spring_security_check" htmlEscape="true" />" method="POST"  class="login">  
    <div id="user_login">
        <fieldset>
            <dl>
                <input type='text' name='other_email' id='other_email'> 
                <dt><label for="j_username"><fmt:message key="app.username" />:</label></dt>
                <dd><input id="j_username" name="j_username" type="text" value="" tabindex="1" required/></dd>
                <dt><label for="j_password"><fmt:message key="app.password" />:</label></dt>
                <dd><input id="j_password" name="j_password" type="password" tabindex="2" required/></dd>               
            </dl>
        </fieldset>
        <p class="btn-paragraph">   
            <input type="submit" class="submitLoginButton btn-submit-style" value="<fmt:message key="app.login"/>" />

            <% // TODO: Quando a pagina de recovery password estiver concluida alterar o link para la!!  %>
            <a href="www.google.pt" class="help-link"><fmt:message key="login.recovery" /></a>
        </p> 
        <div id="loading" style="display:none;">
            <img id="loading-image" src="<c:url value="/resources/images/loader.gif"/>" alt="Loading..." />
        </div>
    </div>
</form>

我的Javascript代码是：

$(function() {

    $('#loginuser').validate({
        errorClass: 'errors',
        validClass: 'successes',
        onkeyup: false,
        rules: {            
            j_username: {
                minlength: minLength,
                loginUsernameRegex: true,
                required: true
            },
            j_password: {
                required: true,
                minlength: minLength
            }
        },
        messages: {
            j_username: {
                    minlength: '<fmt:message key="registeruser.username.minlength"/>',
                    required: '<fmt:message key="registeruser.username.required"/>',
                    loginUsernameRegex: '<fmt:message key="registeruser.username.alfanumeric.only"/>'
                }, 
            j_password:  {
                minlength: '<fmt:message key="registeruser.pwd.minlength"/>',
                required: '<fmt:message key="registeruser.pwd.required"/>'
            }
        },

        showErrors : function(errorMap, errorList) {
        this.defaultShowErrors();
        return false;
        }
    });

    $('.submitLoginButton').click(function(evt){
        if($('#other_email').val() && $('#other_email').val().length > 0){
            return false;
        }

        if($('#loginuser').valid()){
            console.log("Valid form");
        }
        else{console.log("not valid");}

        return false;
    });
});

因此，每当我的控制台显示“有效表单”消息时。有人知道我在这里缺少什么吗？

谢谢！

Answer 1

尝试设置if语句，检查该字段是否为空。 if j_username == nil{do something};祝你好运！：d

Answer 2

我在jsfiddle中尝试了您的代码，它似乎有效。

但是，我认为你应该为表单注册一个on-submit处理程序，而不是按钮的on-click处理程序。

$('#loginuser').submit(function() {
    if ($('#other_email').val()) {
        return false;
    }
});

jsfiddle

Jquery在登录表单中始终为true

2 个答案: