jQuery验证插件希望消息在文本框下对齐

Question

我将使用Jquery Validation插件向一些现有页面添加一些客户端验证。 https：// jqueryvalidation.org验证工作正常。 但是，因为用户希望所有字段都居中，所以验证消息显示为居中。

是否可以保留居中的文本框输入，但是验证消息是否出现在文本框下方并与文本框开始处对齐？

到目前为止，这是我展示的验证内容： 1

这就是我要通过将验证消息与其下方的文本框对齐来实现的。 2

这是一些我正在使用的简单代码，以获取有关使用验证的想法。 实际的表单通常具有12-15个输入字段，全部都居中。

我知道不建议使用“中心”标签，但如果可能的话，仍会尝试暂时保留它。

    <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

Answer 1

您可以使用errorPlacement函数将错误消息移动到所需的任何位置。 这是与Bootstrap 3一起使用的错误放置示例：带有jQuery Validation插件的Bootstrap 3

您应该能够修改以下代码，使其以您想要的任何方式工作。

// 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);
        }
    }
});

Answer 2

仅CSS ...
使用您的jQuery验证插件。

好吧...经过一些HTML调整！

CSS已更改 （影响错误消息）：

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改变 （使用的表！ -嘿哇真是个好主意！）：

<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>

工作方式：

 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="[AZ]{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>

正确的用例：

123456
HHHHHH

Answer 3

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

jQuery验证插件希望消息在文本框下对齐

问题描述

3 个解决方案

解决方案1
0 2017-04-16 06:39:19

解决方案2
0 已采纳 2017-04-16 07:18:53

工作方式：

解决方案3
0 2017-04-16 08:27:37

jQuery验证插件希望消息在文本框下对齐

问题描述

3 个解决方案

解决方案1 0 2017-04-16 06:39:19

解决方案2 0 已采纳 2017-04-16 07:18:53

工作方式：

解决方案3 0 2017-04-16 08:27:37

解决方案1
0 2017-04-16 06:39:19

解决方案2
0 已采纳 2017-04-16 07:18:53

解决方案3
0 2017-04-16 08:27:37