CODEWITHSUNDEEP
jqueryjquery-validate
JGV
JGV

Reputation: 5187

jquery validation: display error label inside a custom div

I am trying to display the error label inside a div but, it is not working.

<div class="panel-body">
      <div class="well-custom datecontrol-fixed datecontrol-fixed-xs">
          <div class="input-group">
               <input type="text" class="form-control input-sm" id="TextBoxProdMoveDate" name="TextBoxProdMoveDate"/>
                      <label class="input-group-addon btn" for="TextBoxProdMoveDate">
                          <span class="glyphicon glyphicon-calendar"></span>
                       </label>
                     </div>
                    <div id="DivProdMoveDateErrorContainer"></div>
                   </div>
                 </div>

And, setting the rule like this,

required: true,
messages: {required: "Production move date is required."},
errorLabelContainer: '#DivProdMoveDateErrorContainer',

but, it is not working.

All I am expecting is, to display the error label inside the DivProdMoveDateErrorContainer.

Any suggestion will be greatly appreciated.

Upvotes: 0

Views: 2128

Answers (1)

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

Jquery validation generates a label for each field whose data is improper like:

<label id="reg_name-error" class="error" for="reg_name" style="display: inline-block;">Please enter name</label>

just copy the entire label from DOM and paste it inside the div or where you want the error msg by removing the error msg text from it like:

<label id="reg_name-error" class="error" for="reg_name" style="display: inline-block;"></label>

And refresh the page and try again.

Explanation: If the error lable is already present in the page then validation jquery will not produce the label, instead it will use the already existing label.

Or you can simply place in your custom place like:

$("#fm_regis").validate({
  rules :{
    name: {
      required: true,
    },
  },   
  errorLabelContainer: "#id-of-your-specific-place",
  // More of your code
})

Upvotes: 2

Related Questions