成功提交後，jQuery Validator無效輸入字段消失

要保持簡短。我提交表單後會顯示無效/不完整的表單。我正在使用validate.js和form.js。提交不完整的表單後，這些字段顯示爲無效（正確）。糾正並重新提交它成功處理表單，但輸入字段消失。 我已經縮小了這個問題。它在代碼之後。我想我實際上需要幫助。成功提交後，jQuery Validator無效輸入字段消失

$(function() { 
$('#fltm_register').ajaxForm({ 
    beforeSubmit: function() { 
     $('#fltm_register').validate({  
      errorPlacement: function(error, element) { }, 
       rules: { 
       first_name: { 
        required: true, 
        minlength: 2 
       }, 
       last_name: { 
        required: true, 
        minlength: 2 
       }, 
       email: { 
        required: true, 
        minlength: 4, 
        email: true 
       }, 
       city: { 
        required: true 
       }, 
       state: { 
        required: true 
       }, 
       zip: { 
        required: true, 
        minlength: 4 
       }, 
       country: { 
        required: true 
       } 
      }, 

      messages: { 
       first_name: { 
        required: "", 
        minlength: "" 
       }, 
       last_name: { 
        required: "", 
        minlength: "" 
       }, 
       email: { 
        required: "", 
        minlength: "", 
        email: "" 
       }, 
       city: { 
        required: "" 
       }, 
       state: { 
        required: "" 
       }, 
       zip: { 
        required: "", 
        minlength: "" 
       }, 
       country: { 
        required: "" 
       } 
      }, 

      invalidHandler: function(e, validator) { 
       var errors = validator.numberOfInvalids(); 
       if (errors) { 
        var message = errors == 1 
        ? '<div class="alert alert-block alert-error">You missed 1 field. It has been highlighted below.</div>' 
        : '<div class="alert alert-block alert-error">You missed ' + errors + ' fields. They have been highlighted below.</div>'; 
        $(".form_notifications").html(message); 
        $(".form_notifications").fadeIn(); 
       } 
      }, 
      errorClass:'control-group error', 
      errorElement: 'div.control-group', 
      highlight: function (element, errorClass) { 
       $(element).parents("div.control-group").addClass(errorClass); 
      } 
     }); 
     return $('#fltm_register').valid(); 
    }, 
    success: function(responseText, statusText, xhr, $form) { 
     $(".form_notifications").hide(); 
     $(".form_notifications").html(responseText).hide().fadeIn(); 
     $("#fltm_register")[0].reset(); 
    } 
    /* unhighlight: function (element, errorClass, validClass) { 
      $(element).parents(".error").removeClass(errorClass); 
    } */ 
}); 
});

我縮小了這個問題。它有做：

errorClass:'control-group error', 
    errorElement: 'div.control-group', 
    highlight: function (element, errorClass) { 
     $(element).parents("div.control-group").addClass(errorClass); 
    }

所以我需要下面的代碼，但我不知道到底哪裏把它，因爲它似乎打破了AJAX？

unhighlight: function (element, errorClass, validClass) { 
     $(element).parents(".error").removeClass(errorClass); 
    }

來源

2013-07-26 jdaio

errorClass:'control-group error', 
errorElement: 'div.control-group', 
highlight: function (element, errorClass) { 
    $(element).parents("div.control-group").addClass(errorClass); 
}, 
unhighlight: function (element, errorClass, validClass) { 
    $(element).parents(".error").removeClass(errorClass); 
}

來源

2013-07-26 01:08:21

非常感謝！我不明白這是如何工作的。但是，我的代碼確實與原始腳本相比發生了很大的變化，所以我應該再試一次。唯一的事情是，它似乎只適用於最多3個控制元素？而突出顯示的是這樣的：

，我確實有一個是

，其餘不會突出顯示。我會盡力去看看我能做些什麼，但是... – jdaio

其實很抱歉，我不得不回溯這個答案（我認爲？）。雖然它似乎解決了提交問題，但它開始了一個新的問題。當我提交無效字段時，再次提交而不更改任何內容會導致字段消失... – jdaio

是的它的設置顯示：無; – jdaio

如果unhighlight是一個定義的方法，

highlight: function (element, errorClass) { 
    $(element).parents("div.control-group").addClass(errorClass); 
}, 
unhighlight: function (element, errorClass, validClass) { 
    $(element).parents(errorClass).removeClass(errorClass).addClass(validClass); 
}

來源

2013-07-26 01:09:25 Bellash

該方法仍然導致輸入字段不幸遺失。 – jdaio

成功提交後，jQuery Validator無效輸入字段消失

回答

相關問題