jQuery Validation plugin want message aligned under the textbox

Question

I'm adding some client-side validations using Jquery Validation plugin to some existing pages. https:// jqueryvalidation.org The validations are working perfectly. However, because the user wants all the fields centered, the validation messages appear centered.

Is it possible to keep the centered textbox inputs, but have the validation messages appear under the textbox and aligned where the textbox starts?

This is what I have so far showing the validations: 1

This is what I am trying to achieve with the validation message aligned with the textbox underneath it. 2

Here is some simple code that I am working with to get an idea on using the validations. The actual forms typically have 12-15 input fields, all centered.

I know the "center" tag is deprecated, but still trying to keep it for now, if possible.

    <script src="https://jqueryvalidation.org/files/lib/jquery.js"></script>
    <script src="https://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
    <script src="https://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>

<script>

    $(document).ready(function () {
        $("#myForm").validate();
    });

</script>

<style>
    label.error {
        display: block;
        float: none;
        color: red;
    }


    input { border: 1px solid black; }
    input:focus { border: 1px solid black; }
    input.error { border: 1px solid red; }

</style>

    <center>
    <form id="myForm" action="/SubmitSuccess.html">

        <label>Input Number: </label>
        <input type="text" name="input_number" data-rule-required="true" data-msg-required="Required field.  Please enter 6 digits" size=10 maxlength=10 pattern="[0-9]{6}" data-msg-pattern="Please enter 6 digits"  />

        <br>

        <label>Input Alpha: </label>
        <input type="text" name="input_alpha" id="input_alpha" data-rule-required="true" data-msg-required="Required field. Please enter 6 uppercase characters" size=10 maxlength=10 pattern="[A-Z]{6}" data-msg-pattern="Must be 6 uppercase characters." />

        <br><br>

        Click Submit when complete<br>

        <input type="submit" name="SUBMIT" value="SUBMIT" />

    </form>
</center>

JFiddle - https://jsfiddle.net/4d3xgud9

score 0 · Answer 1 · edited May 23 '17 at 12:09

You can use the the errorPlacement function to move the error messages in whatever location you want. Here's an example of error placement to work with Bootstrap 3: Bootstrap 3 with jQuery Validation Plugin

You should be able to modify the below code to make it work in what ever way you want.

// override jquery validate plugin defaults
$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

Louys Patrice Bessette · Accepted Answer · 2017-04-16T07:30:43.773

CSS only...
Using your jQuery validation plugin.

Well... With some HTML adjustments!

CSS changed (impacts error messages):

label.error {
  display: block;
  float: none;
  color: red;

  position:relative;      /* added */
  top:0.2em;              /* added */
}


td.top{                   /* added */
  vertical-align:top;     /* added */
}                         /* added */
td{                       /* added */
  padding-bottom:4px;     /* added */
}                         /* added */

HTML changed ( Used a table!! -- Hey wow! what a great idea! ):

<form id="myForm" action="/SubmitSuccess.html">
  <table>
    <tr>
      <td class="top">
        <label>Input Number: </label>
      </td>
      <td>
        <input type="text" name="input_number" data-rule-required="true" data-msg-required="Required field.  Please enter 6 digits" size=10 maxlength=10 pattern="[0-9]{6}" data-msg-pattern="Please enter 6 digits"  />
      </td>
    </tr>

    <tr>
      <td class="top">
        <label>Input Alpha: </label>
      </td>
      <td>
        <input type="text" name="input_alpha" id="input_alpha" data-rule-required="true" data-msg-required="Required field. Please enter 6 uppercase characters" size=10 maxlength=10 pattern="[A-Z]{6}" data-msg-pattern="Must be 6 uppercase characters." />

      </td>
    </tr>
  </table>
  <br>
  <br>
  Click Submit when complete<br>

  <input type="submit" name="SUBMIT" value="SUBMIT" />

</form>

WORKING:

label.error {
  display: block;
  float: none;
  color: red;

  position:relative;
  top:0.2em;
}


td.top{
  vertical-align:top;
}
td{
  padding-bottom:4px;
}


input { border: 1px solid black; }
input:focus { border: 1px solid black; }
input.error { border: 1px solid red; }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

<script src="https://jqueryvalidation.org/files/lib/jquery.js"></script>
<script src="https://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="https://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>

<script>

  $(document).ready(function () {
    $("#myForm").validate();
  });

</script>

</head>

<body bgcolor="white">

  <center>
    <form id="myForm" action="/SubmitSuccess.html">
      <table>
        <tr>
          <td class="top">
            <label>Input Number: </label>
          </td>
          <td>
            <input type="text" name="input_number" data-rule-required="true" data-msg-required="Required field.  Please enter 6 digits" size=10 maxlength=10 pattern="[0-9]{6}" data-msg-pattern="Please enter 6 digits"  />
          </td>
        </tr>

        <tr>
          <td class="top">
            <label>Input Alpha: </label>
          </td>
          <td>
            <input type="text" name="input_alpha" id="input_alpha" data-rule-required="true" data-msg-required="Required field. Please enter 6 uppercase characters" size=10 maxlength=10 pattern="[A-Z]{6}" data-msg-pattern="Must be 6 uppercase characters." />

          </td>
        </tr>
      </table>
      <br>
      <br>
      Click Submit when complete<br>

      <input type="submit" name="SUBMIT" value="SUBMIT" />

    </form>
  </center>

</body>

Correct use case:

123456
HHHHHH

Thanks for the great reply! The table brought in other issues, like shifting the textboxes depending on the length of the message in the cell. But, it was better than what I had and it answered my question! I appreciate your detailed response! It was very helpful in learning to work with this plugin! — dmayley, Apr 18 '17 at 03:39

score 0 · Answer 3 · answered Apr 16 '17 at 08:27

$('#myform').validate({ // initialize the plugin
        rules: {
            "your field name or id": {
                required: true
            }
        },
        messages: {
            "your field name or id": {
                required: "Enter something"
            }
        }
    });

jQuery Validation plugin want message aligned under the textbox

3 Answers3

WORKING: