使用 jQuery 验证器添加动态验证规则时出错

Question

我在 html 表单中使用 jQuery 验证器插件。

客户端脚本：Java Script/jQuery

服务器端脚本：PHP

我先解释一下表格。我的表格包含：

a) 仅接受电子邮件 ID 的文本字段

b) 添加评论的文本区域。

c) 输入用户名的文本框

d) 输入手机号码的文本框（只接受号码）

a) 和 b) 是我表格的永久居民。无论发生什么，它们都将永远保持原状。他们就像家人一样。

c) 和 d) 是临时的。它们的存在依赖于a)。那是电子邮件 ID。

如果用户输入的邮箱id不包含在数据库中，c)和d)起作用。用户必须输入他们的用户名和手机号码，并且需要验证所有四个字段。如果不是，则只会验证前两个字段。我有点把事情搞砸了。

我正在使用来自客户端的 jQuery 验证程序插件验证所有这些字段。服务器端也有验证。我不会在这里讨论那个。暂且略过

为了检查电子邮件是否存在，我使用了插件的远程功能。我尝试了两种方法来为 c) 和 d) 转换 on/off 验证规则，但都失败了。 :)

<form role="form" id="product_description_form" name="product_description_form" method="POST" action="place_order_action.php" >
    <div class="col-md-6 col-sm-6 title bg-black">
        <div class="form-group">
            <input type="text" id="email_id" name="email_id"  class="form-control" placeholder="Email Address">
        </div>

        <div class="form-group">
            <textarea type="text" id="product_description" name="product_description"  class="form-control" placeholder="Comments"></textarea>
        </div>

        <div id="fullname_div" class="form-group" style="display:none;">
            <input type="text" id="full_name" name="full_name"  class="form-control" placeholder="Your Full Name">
        </div>

        <div id="mobilenum_div" class="form-group" style="display:none;">
            <input type="text" id="mob_num" name="mob_num"  class="form-control" placeholder="Contact Number">
        </div>

        <div class="col-md-12">
            <input type="submit" name="submit" id="finish" value="CONFIRM NOW" class="btn btn-primary" />
        </div>
    </div>
</form>

最初我隐藏手机号码和姓名 div。如果电子邮件 ID 不匹配，我会将它们显示给用户。届时，名称和移动字段的类型将从隐藏更改为文本。否则，类型保持隐藏状态。我在某处听说隐藏字段没有得到验证。这就是我选择这条路线的原因。

我一开始想做一个fiddle。但我正在使用远程工作，所以它有点不合时宜，你知道的。也许吧。

这是第一种方法我试过了。

$(document).ready(function() {
    $('#product_description_form').validate({
        rules: {
            email_id: {
                email: true,
                required: true,
                remote: {
                    url: "checkemail_exist.php",
                    type: "post",
                    dataType: 'html',
                    data: {
                        email_id: function() {
                            return $("#email_id").val();
                        }
                    },
                    success: function(dataa) {
                        var condition = dataa.trim();

                        //Invalid Data              
                        if (condition == "2") 
                        {
                            remove_validation();          
                            document.getElementById('email_id').value = '';
                            document.getElementById('mobilenum_div').style.display = 'none';
                            document.getElementById('fullname_div').style.display = 'none';
                            document.getElementById('mob_num').value = '';
                            document.getElementById('full_name').value = '';
                            alert('Please enter a valid email id.');
                        }
                        //Existing User
                        else if (condition == "1") 
                        {
                            remove_validation();           
                            document.getElementById('mobilenum_div').style.display = 'none';
                            document.getElementById('fullname_div').style.display = 'none';
                            document.getElementById('mob_num').value = '';
                            document.getElementById('full_name').value = '';
                            document.getElementById('mob_num').type = 'hidden';
                            document.getElementById('full_name').type = 'hidden';
                            alert('We will contact you.');
                        }
                        //New User
                        else if (condition == "3") 
                        {
                            add_validation();
                            document.getElementById('mob_num').type = 'text';
                            document.getElementById('full_name').type = 'text';
                            document.getElementById('mobilenum_div').style.display = 'block';
                            document.getElementById('fullname_div').style.display = 'block';
                            alert('New User.');
                        } 
                        else 
                        {
                            remove_validation();
                            document.getElementById('email_id').value = '';
                            document.getElementById('mobilenum_div').style.display = 'none';
                            document.getElementById('fullname_div').style.display = 'none';
                            document.getElementById('mob_num').value = '';
                            document.getElementById('full_name').value = '';
                        }
                    }
                }

            },
            product_description: {
                required: true,
                minlength: 10
            }

        },
        highlight: function(element) {
            $(element).closest('.form-group').removeClass('success').addClass('error');
        },
        success: function(element) {
            element.text('').addClass('valid')
                .closest('.form-group').removeClass('error').addClass('success');
        }
    });

function add_validation()
{
    $("#full_name").rules("add", "required");
    $("#mob_num").rules("add", {number: true, required:true, minlength: 10, maxlength:12 });
}

function remove_validation()
{
    $("#full_name").rules("remove", "required");
    $("#mob_num").rules("remove", {number: true, required:true, minlength: 10, maxlength:12 });     
}

});

你猜怎么着？它没有用。我知道，我知道我正在混合使用 jQuery 和 Java 脚本。但这只是一个演示。无论如何，在我的第一种方法成功失败后，我尝试使用插件的 depends 属性。总有 B 计划。:D

这是第二种方法我试过了：

$(document).ready(function() {
    //Function to validate

    $('#product_description_form').validate({
        rules: {
            email_id: {
                email: true,
                required: true,
                remote: {
                    url: "checkemail_exist.php",
                    type: "post",
                    dataType: 'html',
                    data: {
                        email_id: function() {
                            return $("#email_id").val();
                        }
                    },
                    success: function(dataa) {
                        var condition = dataa.trim();

                        //Invalid Data              
                        if (condition == "2") 
                        {
                            document.getElementById('email_id').value = '';
                            document.getElementById('mobilenum_div').style.display = 'none';
                            document.getElementById('fullname_div').style.display = 'none';
                            document.getElementById('mob_num').value = '';
                            document.getElementById('full_name').value = '';
                            alert('Please enter a valid email id.');
                        }
                        //Existing User
                        else if (condition == "1") 
                        {
                            document.getElementById('mobilenum_div').style.display = 'none';
                            document.getElementById('fullname_div').style.display = 'none';
                            document.getElementById('mob_num').value = '';
                            document.getElementById('full_name').value = '';
                            document.getElementById('mob_num').type = 'hidden';
                            document.getElementById('full_name').type = 'hidden';
                            alert('We will contact you.');
                        }
                        //New User
                        else if (condition == "3")
                        {
                            document.getElementById('mob_num').type = 'text';
                            document.getElementById('full_name').type = 'text';
                            document.getElementById('mobilenum_div').style.display = 'block';
                            document.getElementById('fullname_div').style.display = 'block';
                            alert('New User.');
                        } 
                        else 
                        {
                            document.getElementById('email_id').value = '';
                            document.getElementById('mobilenum_div').style.display = 'none';
                            document.getElementById('fullname_div').style.display = 'none';
                            document.getElementById('mob_num').value = '';
                            document.getElementById('full_name').value = '';
                        }
                    }
                }

            },
            product_description: {
                required: true,
                minlength: 10
            },
            full_name: 
            {
                required: 
                {
                    depends: function(element) 
                    {
                        if (condition == "3") 
                        {
                            return true;
                        } 
                        else
                        {
                            return false;
                        }
                    }
                }

            },
            mob_num: 
            {
                required:
                {
                    depends: function(element) 
                    {
                        if (condition == "3") 
                        {
                            return true;
                        }
                        else 
                        {
                            return false;
                        }
                    }
                },
                number: true,
                minlength: 10,
                maxlength: 12
            }

        },
        highlight: function(element) {
            $(element).closest('.form-group').removeClass('success').addClass('error');
        },
        success: function(element) {
            element.text('').addClass('valid')
                .closest('.form-group').removeClass('error').addClass('success');
        }
    });

});

有时B计划也会失败。所以我们找到了一个 C 计划。就是这样。我哪里错了？谢谢。

远程方法工作正常。我什至从 checkemail_exist.php 页面得到响应，并且也检查了成功中的 if-else 条件。但是没有相应地添加和删除验证规则。

Answer 1

您以错误的方式接近它，您可以只隐藏元素然后验证规则将不会应用。

因此您可以设置验证规则，然后可以使用更改事件处理程序，它可以根据电子邮件是否存在来设置这些元素的显示。

jQuery(function($) {
  $('#product_description_form').validate({
    rules: {
      email_id: {
        email: true,
        required: true,
      },
      product_description: {
        required: true,
        minlength: 10
      },
      full_name: {
        required: true
      },
      mob_num: {
        number: true,
        required: true,
        minlength: 10,
        maxlength: 12
      }
    }
  });

  $('#email_id').change(function() {
    //based on the value set the display state of those fields
    //as a temp implementation we will just toggle the display
    //using timeout to simulate a async ajax
    setTimeout(function() {
      $('#mobilenum_div, #fullname_div').toggle();
    }, 500);
  });
});

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script>
<form role="form" id="product_description_form" name="product_description_form" method="POST" action="place_order_action.php">
  <div class="col-md-6 col-sm-6 title bg-black">
    <div class="form-group">
      <input type="text" id="email_id" name="email_id" class="form-control" placeholder="Email Address">
    </div>

    <div class="form-group">
      <textarea type="text" id="product_description" name="product_description" class="form-control" placeholder="Comments"></textarea>
    </div>

    <div id="fullname_div" class="form-group" style="display:none;">
      <input type="text" id="full_name" name="full_name" class="form-control" placeholder="Your Full Name">
    </div>

    <div id="mobilenum_div" class="form-group" style="display:none;">
      <input type="text" id="mob_num" name="mob_num" class="form-control" placeholder="Contact Number">
    </div>

    <div class="col-md-12">
      <input type="submit" name="submit" id="finish" value="CONFIRM NOW" class="btn btn-primary" />
    </div>
  </div>
</form>

使用 jQuery 验证器添加动态验证规则时出错

Error in adding dynamic validation rules using jQuery Validator

jquery

jquery-validate