jQuery Validation plugin error message placement f

Question

Please someone help me, I really stuck on this for the whole day. I have a php form (multiple page) with different types of input(radio, checkbox, etc). what I need is :

1. If user didn't fill required fields and pressed the continue button, he should receive an error message BESIDE or ABOVE that field.

2. If he forgot to fill some fields, other input fields should not be cleared (since I don't want him/her to get bored of re-answering all those questions again)

This is what I have tried so far with JQuery plugin: (sorry, I could not paste all the code since it was too long)

<form name="MovieSurvey" id="formId" action="page2.php"  method="post" />  
<fieldset id = "q1"> <legend class="Q1"></legend>
<label> What is your gender?<span>*</span></label>
<div class="fieldset content">
<div class="error_message_holder"></div> 

 <Input type = 'radio' Name ='q1' value = 'male'>Male
 <Input type = 'radio' Name ='q1' value = 'female'>Female
</div>
</fieldset>
....
....
<input type="submit"  name= "continue1" value="Continue" />
</form>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>

<script>
$(document).ready(function() { 
 $('#formId').validate({ // initialize the plugin
    rules: {
        q1: {
            required: true,
        },
        q2: {
            required: true,
        },
        q5: {
            required: true,
        },
        q6: {
            required: true,
        }
    },

    errorPlacement: function(error, element) {
       error.html('Please fill this field');

  if(element.closest('.fieldset content').find('label.error').length==0){
         error.insertBefore(element.closest('.fieldset content').find('.error_message_holder'));

     }
    }      

 }); 
});
</script>
</div>
</fieldset>

</body>
</html>

It works almost well, the only problem is that the error message is shown between radio-button and label! (This is when I don't write the errorPlacement: function part), in order to fix it I added the placement part but now it shows nothing!

Could someone help me fix it?

Thanks,

Answer 1

Well yeah, that's because you insert it before the error-message-holder.

I think it should be:

error.appendTo(element.closest('.fieldset content').find('.error_message_holder'));

BTW: This question shouldn't be tagged as "PHP". PHP has nothing to do with it.

Answer 2

Quote OP:

"If user didn't fill required fields and pressed the continue button, he should receive an error message BESIDE or ABOVE that field."

You're making this way more complicated than it needs to be.

• Simply use insertBefore, instead of the default insertAfter, in the errorPlacement callback.

  errorPlacement: function (error, element) {
      // error.insertAfter(element);  // default function
      error.insertBefore(element);
  },
  

• Then use the errorElement option to change the label into a div, which forces the message onto its own line. This results in a message above your radio button group, just as you requested.

  errorElement: 'div'  // default is 'label'
  

Quote OP:

"If he forgot to fill some fields, other input fields should not be cleared (since I don't want him/her to get bored of re-answering all those questions again)"

That's already the default behavior. This plugin will not, and cannot, change any values typed into the fields. It only blocks submission and shows/hides error messages.

DEMO: http://jsfiddle.net/9bkjsg8o/

Documentation (all options): http://jqueryvalidation.org/validate

---

NOTES:

Your form element is prematurely closed with a /> in the opening tag...

<form name="MovieSurvey" id="formId" action="page2.php"  method="post" />

The form is a container element and therefore already has a closing tag called </form>.

Your opening tag should look like this...

<form name="MovieSurvey" id="formId" action="page2.php"  method="post">