使用远程方法对emailId和电话号码进行Jquery验证

时间:2015-10-19 13:05:20

标签: jquery validation jsp jquery-validate

我正在尝试使用 jQuery Validation插件(远程方法)验证是否存在输入emailId和电话号码。但我不知道我哪里错了。我尝试使用添加方法插件但没有工作。任何人都可以帮助我在哪里出错?

这是代码。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
    <script src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/additional-methods.js"></script>

$('#myForm').validate({ // initialize the plugin
            rules: {
                emailId: {
                    required: true,
                    email: true,
                    remote: {
                        url:'verifyEmailOrPhone-'+$('#emailId').val()+'-'+$('#contactNumber').val(),
                        type:'GET',

                }
                },

                contactNumber:{
                    required: true,
                    minlength: 9,
                    maxlength: 10,
                    number: true,
                    remote: {
                        url:'verifyEmailOrPhone-'+$('#emailId').val()+'-'+$('#contactNumber').val(),
                        type:'GET',

                  }
                },

            },   
            messages:{
                emailId:{
                    remote: "emailId already taken"
                    },
                contactNumber:{
                    remote: "phone number exists"
                }   
                },

            submitHandler: function (form) { 
                // for demo
                alert('valid form submitted'); // for demo
                return false; // for demo
            }

        });

html

<div class="margin-top-10  contact-check has-feedback form-group" >
                       <input class="form-control input-lg" name="contactNumber" id="contactNumber" placeholder="Phone Number" size="25" type="text"  value="">
                   </div>
                   <div class="margin-top-10  email-check  form-group has-feedback" >
                       <input class="form-control input-lg" name="emailId" id="emailId" placeholder="Email" size="25"  value=""  type="text">
                   </div>

在控制台中我正在 http://localhost:8080/SpringMvcExample/verifyEmailOrPhone--?emailId=bhagya%40gmail.com

远程方法在url中返回“emailId = bhagya%40gmail.com”,我只需要返回输入数据。

1 个答案:

答案 0 :(得分:2)

  1. 您发送的值为true,而不是字段值

    data: {
        emailId: function() {
            return true; // <- ??
        }
    }
    
  2. 您根本不需要使用data属性,因为默认情况下已经发送了该字段的值。

  3. 完全删除data属性。

    当然,这个答案假定您的服务器端脚本(我们看不到)构建并正常运行。