使用ajax进行自定义验证.....这里远程方法不起作用

时间:2013-07-31 06:28:21

标签: validation jquery spring-mvc

我正在使用jquery.validate.js,在下面的代码中,远程和正则表达式分别工作,但当我尝试集成两者时,它不起作用。任何人都可以帮助我在哪里做错了吗?

    <head>
<script type="text/javascript">


$(document).ready(function(){

        $("#clear").click(function(){

            $("input[type=text], textarea").val("");

        });
});

function submitForm() {

    $.validator.addMethod("subTitleVal", function(value, element) {
        return this.optional(element) || /^[A-Za-z\s\_,\.:;()''""]+$/.test(value); 
    }, "Enter Valid Name.");

    var validator = $("#company").validate({
        errorPlacement : function(error, element) {
            offset = element.offset();
            error.insertBefore(element)
            error.addClass('message'); 
            error.css('position', 'absolute');
            error.css('left', offset.left + element.outerWidth());
        },
        rules : {
            name : {
                required : true,
                subTitleVal : true,
                      remote: {
                        type: 'POST',
                        url: "${pageContext.request.contextPath}/company/getDuplicate",
                        data: {"name":name},
                        dataType : "json",
                        success:function(data){
                            /* response = ( data == true ) ? true : false; */
                            if (data.name == true)
                            {
                                message: {
                                    name: 'The username is already in use!'
                                }
                            }
                        }
                    },
                }
                },
        },
        errorElement : "span",
        wrapper : "span",
        messages : {
            name : {
                required : "Name Is Required",
            }
        }
    });
    if(validator.form()){ 
        $('form#company').submit(); 
        }
};

</script>

   </head>
   <body>
 <form:form commandname="company" action="${pageContext.request.contextPath}/company/create.action"  method="post" modelAttribute="company" name="theform">

    <label>Name:</label>
    <form:input path="name" id="name"></form:input>

    <a href="Javascript:submitForm()">Add</a>

</form:form>

</body> 

请帮忙。感谢

3 个答案:

答案 0 :(得分:2)

用这个

替换你的代码
function submitForm() {

    $.validator.addMethod("subTitleVal", function(value, element) {
                return this.optional(element)
                        || /^[A-Za-z\s\_,\.:;()''""]+$/.test(value);
            }, "Enter Valid Name.");

    var validator = $("#company").validate({
        errorPlacement : function(error, element) {
            offset = element.offset();
            error.insertBefore(element)
            error.addClass('message');
            error.css('position', 'absolute');
            error.css('left', offset.left + element.outerWidth());
        },
        rules : {
            name : {
                required : true,
                subTitleVal : true,
                remote : {
                    type : 'POST',
                    url : "${pageContext.request.contextPath}/company/getDuplicate",
                    data : {
                        name: function() { return $("#name").val(); }

                    }
                }
            }
        },
        errorElement : "span",
        wrapper : "span",
        messages : {
            name : {
                required : "Name Is Required",
                remote : "Name Already Taken."
            }
        }
    });
    if (validator.form()) {
        $('form#company').submit();
    }
};

答案 1 :(得分:1)

来自documentation

  

响应被评估为JSON,对于有效元素必须为true,   并且可以是任何false,undefined或null对于无效元素,使用   默认消息;或者一个字符串,例如。 “这个名字已经被拿走了,试试吧   peter123而不是“显示为错误消息。

因此,验证网址必须返回适当的值

尝试

function submitForm() {

    $.validator.addMethod("subTitleVal", function(value, element) {
                return this.optional(element)
                        || /^[A-Za-z\s\_,\.:;()''""]+$/.test(value);
            }, "Enter Valid Name.");

    var validator = $("#company").validate({
        errorPlacement : function(error, element) {
            offset = element.offset();
            error.insertBefore(element)
            error.addClass('message');
            error.css('position', 'absolute');
            error.css('left', offset.left + element.outerWidth());
        },
        rules : {
            name : {
                required : true,
                subTitleVal : true,
                remote : {
                    type : 'POST',
                    url : "${pageContext.request.contextPath}/company/getDuplicate",
                    data : {
                        "name" : name
                    }
                }
            }
        },
        errorElement : "span",
        wrapper : "span",
        messages : {
            name : {
                required : "Name Is Required"
            }
        }
    });
    if (validator.form()) {
        $('form#company').submit();
    }
};

答案 2 :(得分:0)

您的括号未正确关闭。您有一个额外的},

保持代码良好,以避免将来出现此类小错误。

这应该是您的代码:

function submitForm() {

    $.validator.addMethod("subTitleVal", function (value, element) {
        return this.optional(element) || /^[A-Za-z\s\_,\.:;()''""]+$/.test(value);
    }, "Enter Valid Name.");

    var validator = $("#company").validate({
        errorPlacement: function (error, element) {
            offset = element.offset();
            error.insertBefore(element)
            error.addClass('message');
            error.css('position', 'absolute');
            error.css('left', offset.left + element.outerWidth());
        },
        rules: {
            name: {
                required: true,
                subTitleVal: true,
                remote: {
                    type: 'POST',
                    url: "${pageContext.request.contextPath}/company/getDuplicate",
                    data: {
                        "name": name
                    },
                    dataType: "json",
                    success: function (data) {
                        /* response = ( data == true ) ? true : false; */
                        if (data.name == true) {
                            message: {
                                name: 'The username is already in use!'
                            }
                        }
                    }
                },
            }
        },
        errorElement: "span",
        wrapper: "span",
        messages: {
            name: {
                required: "Name Is Required",
            }
        }
    });
    if (validator.form()) {
        $('form#company').submit();
    }
};