i am using Jquery validation plugin for validating the form.when validating the form for one element alignment is not proper.

If you see the image,for the city field icon + button alignment not proper when it validating the form. Because label error validation is displaying in between the input element and icon +. I need to display the error message below of the element.

My html code is like this for the city field

    <tr>
        <td align="right"><span class="mandetry">*</span> City:</td>
         <td>
       <div class="input-group" id="app_details">
      <input type="text" class="form-control client_city" name="client_city" id="city_name" value="<?php echo set_value('client_city')?>"> 
     <span class="input-group-btn">
     <a class="btn btn-default" id='addnewcity' href="<?php echo base_url('addnewcity')?>"><i class="fa fa-plus-square"></i></a>
     </span>
   <div id="messageBox"></div> <!-- Here i would like to display message-->
    </div> </tr>

js code is like this

$(document).ready(function(){
$('#add_client').validate({
    errorClass: 'validation_errors',
    debug: false,
     rules: {
         client_name:{required:true},
         client_address:{required:true},
         client_city:{required:true},
         errorPlacement: function(error, element) {
                if (element.attr("name") == "client_city" )
                {
                    error.appendTo("#messageBox");
                }
            }
     },
     messages: {
         client_name:{required:"The Client name is a required / mandatory field"},
         client_address:{required:"The Client address is a required / mandatory field"},
         client_city:{required:"The City is a required / mandatory field"},

     }

});
     });

Error message not appended to messageBox div.Is there any wrong with errorPlacement in js. For only city element i need to display the error message properly. For other form fields it shouldn't change.i am unable to solve this issue. Please suggest me. Thanks.

i am using Jquery validation plugin for validating the form.when validating the form for one element alignment is not proper.

If you see the image,for the city field icon + button alignment not proper when it validating the form. Because label error validation is displaying in between the input element and icon +. I need to display the error message below of the element.

My html code is like this for the city field

    <tr>
        <td align="right"><span class="mandetry">*</span> City:</td>
         <td>
       <div class="input-group" id="app_details">
      <input type="text" class="form-control client_city" name="client_city" id="city_name" value="<?php echo set_value('client_city')?>"> 
     <span class="input-group-btn">
     <a class="btn btn-default" id='addnewcity' href="<?php echo base_url('addnewcity')?>"><i class="fa fa-plus-square"></i></a>
     </span>
   <div id="messageBox"></div> <!-- Here i would like to display message-->
    </div> </tr>

js code is like this

$(document).ready(function(){
$('#add_client').validate({
    errorClass: 'validation_errors',
    debug: false,
     rules: {
         client_name:{required:true},
         client_address:{required:true},
         client_city:{required:true},
         errorPlacement: function(error, element) {
                if (element.attr("name") == "client_city" )
                {
                    error.appendTo("#messageBox");
                }
            }
     },
     messages: {
         client_name:{required:"The Client name is a required / mandatory field"},
         client_address:{required:"The Client address is a required / mandatory field"},
         client_city:{required:"The City is a required / mandatory field"},

     }

});
     });

Error message not appended to messageBox div.Is there any wrong with errorPlacement in js. For only city element i need to display the error message properly. For other form fields it shouldn't change.i am unable to solve this issue. Please suggest me. Thanks.

• javascript
• jquery
• html
• css
• jquery-validate

1 Answer 1

You are missing the else part, if it is not the client_city element then you need to insert the error after

$(document).ready(function () {
    $('#add_client').validate({
        errorClass: 'validation_errors',
        debug: false,
        rules: {
            client_name: {
                required: true
            },
            client_address: {
                required: true
            },
            client_city: {
                required: true
            }
        },
        errorPlacement: function (error, element) {
            console.log('dd', element.attr("name"))
            if (element.attr("name") == "client_city") {
                error.appendTo("#messageBox");
            } else {
                error.insertAfter(element)
            }
        },
        messages: {
            client_name: {
                required: "The Client name is a required / mandatory field"
            },
            client_address: {
                required: "The Client address is a required / mandatory field"
            },
            client_city: {
                required: "The City is a required / mandatory field"
            },

        }

    });
});

Demo: Fiddle