javascript
  • jquery
  • jquery-validate
  • 2016-02-19 89 views -2 likes 
    -2

    我還有另一個問題與.rules()函數添加到堆中。我理解它應該在使用.validate()之後纔會出現,但我仍然在控制檯中收到「無法找到設置」類型錯誤。jQuery .rules()函數

    我不在.validate()裏面添加它的原因是因爲我在頁面上有多個表單,其中一些表單使用了具有相同名稱的輸入(它們使用AJAX提交,名稱字段指向我的DDB專欄)。

    下面的代碼。有任何想法嗎?

    <form id="userForm" class='validate form-horizontal'> 
        <fieldset> 
         <legend class="text-center">Not a member yet?</legend> 
    
         <input type="hidden" name="User_ID" id="User_ID"> 
         <input type="hidden" name="PermissionLevel" id="PermissionLevel" value="1"> 
    
         <div class="form-group"> 
          <label for="RegisterUserName">Email Address:</label> 
           <input type="text" name="UserName" id="RegisterUserName" class="required email form-control tooltip-toggle" title="This will be your username" data-placement="right"> 
         </div> 
    
         <div class="form-group"> 
          <label for="RegisterUserPassword">Password:</label> 
           <input type="password" name="UserPassword" id="RegisterUserPassword" class="required password form-control tooltip-toggle" title="Your password must be between 8-14 characters and can only contain numbers, letters, and the following symbols: @ * _ - . !" data-placement="right" rangelength="[8,14]"> 
         </div> 
    
         <div class="form-group"> 
          <label for="RegisterUserPassword2">Confirm Password:</label> 
           <input type="password" name="UserPassword2" id="RegisterUserPassword2" class="required password form-control" rangelength="[8,14]"> 
         </div> 
    
         <div class="form-group"> 
          <div class="col-sm-12 text-center"> 
           <button type="button" class="btn btn-primary btn-register form-submit" data-form="registerUsername">Register</button> 
          </div> 
         </div> 
        </fieldset> 
    </form> 
    
    $('form.validate').each(function() { 
        $(this).validate({ 
        errorElement: 'span', 
        errorClass: 'has-error help-block', 
        errorPlacement: function(error, element) { 
         if ($(element).hasClass('chosen-select') || $(element).hasClass('chosen-select-multiple')) { 
         error.appendTo(element.next('.chosen-container')); 
         } else { 
         element.after(error); 
         } 
        }, 
        highlight: function (element, errorClass, validClass) { 
         if ($(element).hasClass('chosen-select') || $(element).hasClass('chosen-select-multiple')) { 
         $(element).next('.chosen-container').find('a').addClass(errorClass).removeClass(validClass); 
         } 
         $(element).closest('.form-group').addClass(errorClass).removeClass(validClass); 
        }, 
        unhighlight: function (element, errorClass, validClass) { 
         if ($(element).hasClass('chosen-select') || $(element).hasClass('chosen-select-multiple')) { 
         $(element).next('.chosen-container').find('a').removeClass(errorClass).addClass(validClass); 
         } 
         $(element).closest('.form-group').addClass(validClass).removeClass(errorClass); 
        }, 
        ignore: ':hidden:not(.chosen-select):not(.chosen-select-multiple)' 
        }); 
    
        $.validator.addMethod('USAdate', function(value, element, param) { 
        var isValidDate = /^((((0[13578])|([13578])|(1[02]))[\/](([1-9])|([0-2][0-9])|(3[01])))|(((0[469])|([469])|(11))[\/](([1-9])|([0-2][0-9])|(30)))|((2|02)[\/](([1-9])|([0-2][0-9]))))[\/]\d{4}$|^\d{4}$/.test(value); 
        return this.optional(element) || isValidDate; 
        }, 'Please enter a valid date.'); 
    
        $.validator.addMethod('phone', function(value, element, param) { 
        var isValidPhone = /^[2-9]\d{2}-\d{3}-\d{4}$/.test(value); 
        return this.optional(element) || isValidPhone; 
        }, 'Please enter a valid phone number.'); 
    
        $.validator.addMethod('password', function(value, element, param) { 
        var isValidPassword = /^[A-Za-z0-9\d=!\[email protected]_*]+$/.test(value); 
        return this.optional(element) || isValidPassword; 
        }, 'Must be between 8-14 characters, only numbers, letters, and the following symbols: @ * _ - . !'); 
    
        $.validator.addMethod('nnInteger', function(value, element, param) { 
        var isNNInteger = /^\d+$/.test(value); 
        return this.optional(element) || isNNInteger; 
        }, 'Please enter a non-negative number.'); 
    
        $('#RegisterUserPassword2').rules('add', { 
        equalTo: '#RegisterUserPassword', 
        messages: { 
         equalTo: 'Passwords must match.' 
        } 
        }); 
    }); 
    
    $('.form-submit').on('click', function() { 
        var form = $(this).closest('form'); 
    
        switch ($(this).data('form')) { 
        case 'registerUsername': 
        var loginModal = $('#login'); 
        var registerModal = $('#register'); 
    
        if (form.validate().form()) { 
         $.ajax({ 
         type: 'POST', 
         url: 'includes/ajax/ajax-registerUsername.php', 
         data: form.serialize(), 
         dataType: 'json', 
         success: function(data) { 
          if (data.result === 'error') { 
          loginModal.find('.modal-header').addClass('error'); 
          loginModal.find('.modal-footer').addClass('error').html('Error: An error occured while submitting your username<br>' + data.message); 
          return false; 
          } else { 
          console.log(data); 
          clientRegistration = data.user; 
          loginModal.modal('hide'); 
          var registerCarousel = registerModal.find('#registerCarousel'); 
          registerModal.modal({backdrop: 'static', keyboard: false}, 'show'); 
          } 
         } 
         }); 
        } 
        break; 
        } 
    }); 
    

    編輯:只需註釋掉.rules()呼叫刪除Uncaught TypeError: Cannot read property 'settings' of undefined錯誤。

    編輯2:按照建議包裝表單驗證,添加一個表單提交示例。

    +0

    正如您發佈它的最新版本的代碼沒有問題:http://jsfiddle.net/r0fd80hb/ – Sparky

    回答

    -1

    找到了解決方案。如果您運行的是$.each()以同時驗證多個表單,特別是如果給定頁面上存在多個表單,則不能多次使用.rules()添加規則。

    $('form.validate').each(function() { 
        //.validate() stuff here 
        switch ($(this).attr('id')) { 
        case 'userForm': 
         $('#RegisterUserPassword2').rules('add', { 
         equalTo: '#RegisterUserPassword', 
         messages: { 
          equalTo: 'Passwords must match.' 
         } 
         }); 
         break; 
        case 'passForm': 
         $('#NewPassword2').rules('add', { 
         equalTo: '#NewPassword', 
         messages: { 
          equalTo: 'Passwords must match.' 
         } 
         }); 
         break; 
        } 
    }); 
    

    類似的東西可以用來添加輸入屬於給定表單的規則。不是最好的編程方法,但它工作。

    +0

    ** Quote **:*「如果您正在運行'$ .each()'一次驗證多個表單,特別是如果給定頁面上存在多個表單,則無法添加規則使用'.rules()'不止一次「*〜這是不正確的:http://jsfiddle.net/r0fd80hb/1/ – Sparky

    +0

    @Sparky:我不會和你一起進入一場愚蠢的火焰戰爭。無論您接受與否,此解決方案都適用於我。處理它。 – Shaazaam

    +0

    放鬆,這不是一場「火焰戰」,也沒有什麼愚蠢的幫助別人,指出你的回答中的陳述在技術上是不正確的,正如這個jsFiddle所證明的那樣:http://jsfiddle.net/r0fd80hb/ 1 /〜就具體的幫助而言,我花費了大量的時間來處理一直在編輯並且一直工作的OP:http://jsfiddle.net/r0fd80hb/~爲了獲得幫助,你的負擔是郵政編碼,重現問題。 – Sparky

    0

    你的代碼...

    $('form.validate').validate({ 
        onsubmit: true, 
        .... 
    

    Check the docs regarding onsubmit: true - "A boolean true is not a valid value."換句話說,你只能設置onsubmitfalse或功能。如果您需要默認功能,請將其完全保留。

    通過設置它true,您可能會打破該插件。


    若要驗證立即發生在單擊按鈕時,您必須在button元素上有一個type="submit"。 (或含有click處理程序代碼,編程觸發驗證


    DEMO:http://jsfiddle.net/rma3s6n0/


    編輯

    ...因爲我有使用相同名稱的並排表格...

    Uncaught TypeError: Cannot read property 'settings' of undefined錯誤。

    顯然,你試圖通過攻擊類附加.validate()方法不止一個form ...

    $('form.validate').validate({ ... 
    

    如果是這樣,那麼你必須使用一個jQuery .each()附着的方法到多於一個的表單元素,從而分別初始化每個表單。 This is a documented limitation of the plugin

    $('form.validate').each(function() { 
        $(this).validate({ .... 
    

    編輯2

    的OP被編輯到以上不再問題出現在代碼點。

    我看到你再次編輯了這個問題。您的ajax表單提交代碼應該包含在submitHandler回調函數中。

    參見:http://jqueryvalidation.org/validate/#submithandler

    「合適的地方通過Ajax提交表單被驗證後」


    編輯3

    As of the time of this edit, OP的代碼正在工作:http://jsfiddle.net/r0fd80hb/

    +0

    刪除該行沒有任何區別。無論如何,插件的功能都是一樣的。我知道它與添加規則有關,因爲註釋掉了我的錯誤。 – Shaazaam

    +0

    @Shaazaam,你的代碼對我來說沒有任何錯誤:http://jsfiddle.net/L74emvku/ – Sparky

    +0

    @Shaazaam,當點擊按鈕時立即驗證,你必須有一個'type =「提交「'在''button'元素上。 – Sparky

    相關問題