如何使用jquery驗證器創建自定義事件

Question

我正在使用jquery驗證器http://validation.bassistance.de/documentation/雖然它正在工作並驗證表單，但我有一個要求，我需要創建一個自定義事件，所以當一個字段被驗證時，我可以隱藏視野中的字段。

例如，在我的表格中，我有一個字段'dept'。 這個想法是，當它通過驗證時，是隱藏字段，以便用戶可以繼續下一個。 我想這樣做的原因之一就是空間。

我已閱讀文檔並搜索谷歌但無法找到答案，因此我的請求在這里。 我粘貼了我的代碼，如果有人可以提供任何建議，我將不勝感激。

jquery代碼

$(function ()
{

    $.validator.setDefaults(
    {
        errorClass: 'form_error_frmreport',
        errorElement: 'div'
    });

    $("#frmreport").validate(
    {
        rules:
        {

            email:
            {
                required: true,
                email: true
            },
            position:
            {
                required: true
            },
            feedback:
            {
                required: true
            }
        },
        messages:
        {


            email:
            {
                required: "<br />* required: You must enter a valid email address"
            },
            position:
            {
                required: "<br />* required: Please state your position"
            },
            feedback:
            {
                required: "<br />* required: Please enter as much information regarding the exact nature of the problem"
            }
        },

        submitHandler: function()   {
                if ($("#frmreport").valid() === true)  { 
                var data = $("#frmreport").serialize();
                $.post('/sample/admin/frm10010.php', data, function(msg) {

               var messageOutput = '';
                for (var i = 0; i<msg.length; i++){
                    messageOutput += msg[i].box+'  ';     
                }
                $("#confirm_department").hide();


               var $dialog = $('<div id="dialog"></div>')
               .html('Your report was successfully submitted and a representative will respond to you shortly.<br /><br />Thank you.');
               $dialog.dialog({
               autoOpen: true,
               modal: true,
               title: 'Report submission successfull',
               width: 400,
               height: 200,
               draggable: false,
               resizable: false,
               buttons: {
               Close: function() {
               $( this ).dialog( "close" );
               }
               }
               });
                $("#frmreport").get(0).reset();
                }, 'json');

         } else

         { 
           return; 
         }
        },
        success:  function()   {

            //validator.resetForm();
                //$.html("You have entered a box");
                //$("#BA_boxform").get(0).reset();
        }   

    });
});

HTML表單

            <div id="formShow">
              <form id="frmreport" method="post">
                <fieldset>
                <legend><span class="subtitle">Submit Technical Report</span></legend>
                <div class="spacer"></div>
                <label for="dept">Department</label><br />
                <input id="dept" name="dept" class="text" type="text" /><br />
                <label for="name">Full Name:</label><br />
                <input id="name" name="name" class="text" type="text" /><br />
                <label for="email">Email address:</label><br />
                <input id="email" name="email" class="text" type="text" /><br />
                <label for="position">Position:</label><br />
                <input id="position" name="position" class="text" type="text" /><br />
                <label for="feedback">Problem:</label><br />
                <textarea name="feedback" cols="22" rows="5"></textarea><br />
                </fieldset><br />
                <input class="submit" type="submit"  name="submit" value="Submit Report" />
                <input class="cancel" type="reset"  name="cancel" value="Clear Report" />
              </form>
            </div>

Answer 1

我做了一些技巧，禁用輸入框。 僅給出了電子郵件字段驗證的示例。

$('#email').blur(function(){
    var id=$(this).attr('id'); 
    if($('#'+id).next('div[for='+id+']:contains("required")').length == 0){
       $('#'+id).attr('disabled', 'disabled'); 
    }
});

工作演示

你也可以讓我成為通用的，只需包含在一個函數中並通過id調用。