javascript - 如何使用 jquery 验证器创建自定义事件

Question

我正在使用jquery验证器http://validation.bassistance.de/documentation/尽管它正在工作并验证表单，但我有一个要求，我需要创建一个自定义事件，以便在验证字段时，我可以从 View 中隐藏该字段。

例如，在我的表单中，我有一个字段“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'); 
    }
});

Working demo

你也可以让我成为通用的，只需包含在一个函数中并通过 id 调用即可。