堆棧內存溢出
  簡體   English   中英

使用jQuery Validator添加動態驗證規則時出錯

[英]Error in adding dynamic validation rules using jQuery Validator

 原文  2015-12-09 03:38:30  9   1    jquery/ jquery-validate

問題描述

我正在以html形式使用jQuery驗證程序插件 。

客戶端腳本 ： Java腳本/ jQuery

服務器端腳本 ： PHP

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

a）僅接受電子郵件ID的文本字段

b）用於添加評論的文本區域。

c）輸入用戶名的文本字段

d）輸入手機號碼的文本字段（僅接受號碼）

a）和b）是我表格的永久居民。 無論發生什么情況，它們都會永遠保持形式。 他們就像家人一樣。

c）和d）是暫時的。 它們的存在取決於a） 。 那是電子郵件ID。

如果用戶輸入的電子郵件ID不包含在數據庫中，則c）和d）生效。 用戶將必須輸入其用戶名和手機號碼，並且所有四個字段都需要驗證。 如果不是，將僅驗證前兩個字段。 我在這里有點混亂。

我正在使用客戶端的jQuery驗證程序插件來驗證所有這些字段。 服務器端也有一個驗證。 我不在這里。 讓我們暫時跳過它。

要檢查電子郵件是否存在，我使用了插件的遠程功能。 我嘗試了兩種方法來打開/關閉c）和d）的驗證規則，並且'em都失敗了。 :) 

<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不匹配，我將向用戶顯示'em。 屆時，名稱和移動字段的類型將從隱藏更改為文本。 否則，該類型保持隱藏。 我在某處聽說隱藏字段未得到驗證。 這就是為什么我走這條路。

我想起初是擺弄小提琴。 但是我正在使用遙控器，所以您知道它有點不完整。 也許。

這是我嘗試的第一種方法 。 

$(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和JavaScript。 但這只是一個演示。 無論如何，在第一種方法成功失敗后，我嘗試使用插件的depends屬性。 總有一個計划B。

這是我嘗試的第二種方法 ： 

$(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條件。 但是不會相應地添加和刪除驗證規則。

1 個解決方案

解決方案1
 0 已采納  2015-12-09 03:50:54

您以錯誤的方式進行操作，您可以僅隱藏元素，然后將不應用驗證規則。

因此，您可以設置驗證規則，然后可以使用更改事件處理程序，該處理程序可以根據電子郵件是否存在來設置這些元素的顯示。 

 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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用jQuery Validator動態添加條件驗證 Jquery驗證 - 向輸入元素添加規則時出錯？ 使用jquery AND Rules進行動態表單字段驗證 jquery驗證器插件 - 動態更改驗證規則 JQuery Validator插件-單擊按鈕添加規則 jquery驗證插件動態規則 手動向jQuery驗證器添加和刪除驗證錯誤 在執行時間內使用MVC 3和jQuery Validator添加驗證 使用addMethod（）的jQuery驗證器自定義規則 將JSON用於jQuery驗證程序規則和消息
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM