Jquery css 'display:block' not work

Question

I am attempting to create a simple validation function for my contact form. Click here At the moment, once details are submitted the form keeps display:none even when entries are incorrect. I have tried to target the form id Which doesn't seem to be working either.

below is a snippet of my function

 var form = $('#ajax-contact');
 var formMessages = $('#form-messages');



  form.validate();
  $(form).submit(function(e) {

      if ($('#ajax-contact').valid()) {

        $('#ajax-contact').validate({
            rules: {
              name: {
                rangelength: [2, 40],
              },
              email: {
                rangelength: [2, 40],
                email: true,
                required: true
              },
              errorClass: "error",
              highlight: function (input) {
                $(input).closet('.required').removeClass('has-success').addClass('has-error');
              }
            }
        })

      } else {
        $("#ajax-contact").css({'display:block'});
        console.log('not working');
      }
  })

please read the docs for the validation plugin again. you are setting up validation rules in the 'submit' event handler. this has to be done initially instead. if you do that you have to use an 'invalid' handler if you want to respond to an invalid form since the validation framework will suppress form submit's if the form is invalid. — André R.
– André R., Commented Aug 4, 2015 at 13:34

Hacketo · Accepted Answer · 2015-08-04 13:33:00Z

9

.css should be used this way:

$("#ajax-contact").css('display','block');

and if you have multiple .css to be set then you can go with

$("#ajax-contact").css({'display':'block','position':'relative'});

edited Aug 4, 2015 at 13:33

Hacketo

4,9974 gold badges21 silver badges34 bronze badges

answered Aug 4, 2015 at 13:23

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

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

Comments

brroshan · Accepted Answer · 2015-08-04 13:25:15Z

0

Try css({display: "block"}) as it takes an object as options. Not an array

answered Aug 4, 2015 at 13:25

brroshan

1,65017 silver badges19 bronze badges

Collectives™ on Stack Overflow

Jquery css 'display:block' not work

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related