How to create custom events using jquery validator

Question

I am using jquery validator http://validation.bassistance.de/documentation/ and although it is working and validating the form, I have a requirement where I need to create a custom event so when a field is validated, I can hide that field from view.

For example, in my form I have a field 'dept'. The idea, is that when it passes validation, is to hide the field so the user can move on to the next one. The reason that I want to do this is one of space.

I have read the docs and searched google but cannot find an answer, so hence my request here. I have pasted my code and if anyone could offer any advice, I would be grateful.

jquery code

$(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 form

            <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>

'How to ...' without a question mark always sounds like a tutorial to me. — Broxzier
– Broxzier, Commented Jul 11, 2013 at 8:34
@Broxzier I was merely asking for advice as per the body of my question. Not how to do it. — user1532468
– user1532468, Commented Jul 11, 2013 at 10:33
Next time you should ask "How to ... ?", "How do I ... ?" or "Need help with ...". If people search for this on Google they know it is a question when they see the title. — Broxzier
– Broxzier, Commented Jul 11, 2013 at 12:02

RONE · Accepted Answer · 2013-07-11 08:51:42Z

2

i have done some trick, to disable the input box. given example for only email field validation.

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

Working demo

you can make me as generic also, just include in a function and call by id.

answered Jul 11, 2013 at 8:51

RONE

5,5059 gold badges45 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1532468 Over a year ago

SAM I can see where you are going with this. I assume that I can also hide an element using standard jquery .hide(). Also, what is the prupose of id in your code. thanks

user1532468 Over a year ago

you will also notice from your fiddle that the email does not show error message if blank.

Collectives™ on Stack Overflow

How to create custom events using jquery validator

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related