Question

我想使用jQuery验证插件来验证登录模式。这就是我尝试过的so far。

<script type="text/javascript">

$(document).ready(function(){
    handleSubmitForm();
});

function handleSubmitForm(){

$('#loginModal input.btnSubmitLogin').click(function(){

    $('#loginForm').validate(
            {
                rules : {
                    identification : {
                        required : true,
                        minlength : 5
                    },
                    loginPassword : {
                        required : true,
                        minlength : 5
                    }
                },
                messages : {
                    identification : {
                        required : "Please enter your email or your username",
                        minlength : "Your username must be at least 5 characters long"
                    },
                    loginPassword : {
                        required : "Please provide a password",
                        minlength : "Your password must be at least 5 characters long"
                    }
                },
                errorPlacement: function (error, element) {
                    var name = $(element).attr("name");
                    error.appendTo($("#" + name + "_validate"));
                },submitHandler: function(form) {
                    form.submit();
                }
        });


    });


}
</script>

我想在文本框下面添加错误消息;但是在执行此代码时，没有任何反应！您能否提供一些示例来帮助我了解如何将它们组合在一起以获得以下输出：

enter image description here

提前谢谢！

编辑：添加我参考的模板

<%@ include file="taglibs.jsp"%>
<html>
     <head>

     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title><tiles:insertAttribute name="title" ignore="true" /></title>

     <!-- Bootstrap Core CSS -->

     <link href="<c:url value="/bootstrap/css/bootstrap.min.css"/>"
        rel="stylesheet" type="text/css">
     <!-- Fonts -->
     <link
         href="<c:url value="/bootstrap/font-awesome/css/font-awesome.min.css"/>"
         rel="stylesheet" type="text/css">
     <link href="<c:url value="/bootstrap/css/animate.css"/>"
         rel="stylesheet" />
     <link href="<c:url value="/bootstrap/color/default.css"/>"
         rel="stylesheet">

     <!-- Boostrap JS -->

<script type="text/javascript"
    src="<c:url value="/bootstrap/js/jquery.min.js"/>"></script>
<script type="text/javascript"
    src="<c:url value="/bootstrap/js/bootstrap.min.js"/>"></script>
<script type="text/javascript"
    src="<c:url value="/bootstrap/js/jquery.easing.min.js"/>"></script>
<script type="text/javascript"
    src="<c:url value="/bootstrap/js/jquery.scrollTo.js"/>"></script>
<script type="text/javascript"
    src="<c:url value="/bootstrap/js/wow.min.js"/>"></script>


<!-- Custom CSS -->

<link href="<c:url value="/customCSS/style1.css"/>" rel="stylesheet"
    type="text/css" />
<link href="<c:url value="/customCSS/style2.css"/>" rel="stylesheet"
    type="text/css" />
<!-- Custom Theme JavaScript -->

<script type="text/javascript"
    src="<c:url value="/customJs/custom.js"/>"></script>
<script type="text/javascript"
    src="<c:url value="/customJs/jquery-1.11.1.js"/>"></script>
<script type="text/javascript"
    src="<c:url value="/customJs/dist/jquery.validate.js"/>"></script>
<!-- Kendo CSS -->

<link rel="stylesheet"
    href="<c:url value="/kendo/styles/kendo.common.min.css"/>" />
<link rel="stylesheet"
    href="<c:url value="/kendo/styles/kendo.rtl.min.css" />" />
<link rel="stylesheet"
    href="<c:url value="/kendo/styles/kendo.blueopal.min.css" />" />
<link rel="stylesheet"
    href="<c:url value="/kendo/styles/kendo.dataviz.min.css"/>" />
<link rel="stylesheet"
    href="<c:url value="/kendo/styles/kendo.dataviz.default.min.css" />" />
<!-- Kendo JS -->

<script src="<c:url value="/kendo/js/kendo.all.min.js" />"></script>
<script src="<c:url value="/kendo/js/jquery.min.js" />"></script>

</head>
<body>
    <tiles:insertAttribute name="header" />
    <tiles:insertAttribute name="body" />
    <tiles:insertAttribute name="footer" />
</body>
</html>

编辑：错误 enter image description here

Answer 1

您好我已经为您使用Jquery validate创建了示例，请查看。

$(function() {

// Setup form validation on the #register-form element
$("#register-form").validate({

    // Specify the validation rules
    rules: {
        firstname: "required",
        lastname: "required",
        email: {
            required: true,
            email: true
        },
        password: {
            required: true,
            minlength: 5
        },
        agree: "required"
    },

    // Specify the validation error messages
    messages: {
        firstname: "Please enter your first name",
        lastname: "Please enter your last name",
        password: {
            required: "Please provide a password",
            minlength: "Your password must be at least 5 characters long"
        },
        email: "Please enter a valid email address",
        agree: "Please accept our policy"
    },

    submitHandler: function(form) {
        form.submit();
    }
});

 });

Demo

使用jquery验证插件执行未经验证的验证

1 个答案: