在 jquery-form-validator 插件中放置错误答案

【问题标题】：placement of errors in jquery-form-validator plugin在 jquery-form-validator 插件中放置错误
【发布时间】：2015-05-20 11:10:24
【问题描述】：

<html lang="en" dir="ltr"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>jQuery Form Validator</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
</head>
<form action="" id="registration-form">
<table border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>E-mail</td>
    <td><input id="email" name="email" data-validation="email"></td>
  </tr>
  <tr>
    <td></td>
    <td><label for="email" generated="true" class="error"></label></td>
  </tr>
  <tr>
    <td>User name</td>
   <td> <input id="user" name="user" data-validation="length alphanumeric" 
         data-validation-length="3-12" 
         data-validation-error-msg="User name has to be an alphanumeric value (3-12 chars)"></td>
  </tr>
  <tr>
    <td></td>
    <td><label for="user" generated="true" class="error"></label></td>
  </tr>
  <tr>
    <td>Password</td>
    <td><input id="pass_confirmation" name="pass_confirmation" data-validation="strength" 
         data-validation-strength="2"></td>
  </tr>
  <tr>
    <td></td>
    <td><label for="pass_confirmation"></label></td>
  </tr>
  <tr>
    <td>Repeat password</td>
    <td><input name="pass" data-validation="confirmation"></td>
  </tr>
  <tr>
    <td>Birth date</td>
    <td><input name="birth" data-validation="birthdate" 
         data-validation-help="yyyy-mm-dd"></td>
  </tr>
  <tr>
    <td>Country</td>
    <td><input name="country" id="country" data-validation="country"></td>
  </tr>
  <tr>
    <td>Profile image</td>
     <td><input name="image" type="file" data-validation="mime size required" 
         data-validation-allowing="jpg, png" 
         data-validation-max-size="300kb" 
         data-validation-error-msg-required="No image selected"></td>
  </tr>
  <tr>
    <td>User Presentation (<span id="pres-max-length">100</span> characters left)</td>
    <td><textarea name="presentation" id="presentation"></textarea></td>
  </tr>
  <tr>
    <td colspan="2"><input type="checkbox" data-validation="required" 
         data-validation-error-msg="You have to agree to our terms">
    I agree to the <a href="..." target="_blank">terms of service</a></td>
  </tr>
  <tr>
    <td><input type="submit" value="Validate"></td>
    <td><input type="reset" value="Reset form"></td>
  </tr>
</table>  
</form>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.1/jquery.form-validator.min.js"></script>
<script>

  $.validate({
    modules : 'location, date, security, file',
    onModulesLoaded : function() {
      //$('#country').suggestCountry();

    }

  });

  // Restrict presentation length
  $('#presentation').restrictLength( $('#pres-max-length') );

</script>
</html>

我正在研究表单验证，一段时间后我发现 jquery-form-validator 插件可以帮助我进行验证。但现在我正在尝试找出如何更改错误位置。现在所有错误都显示在字段名称前面。我想在此显示电子邮件的错误

<label for="user" generated="true" class="error"></label>

还有php的表单验证吗

【问题讨论】：

标签： jquery plugins jquery-form-validator

【解决方案1】：

使用属性data-validation-error-msg-container 指出某个输入的错误消息的位置

<input data-validation="..." 
       data-validation-error-msg-container="#some-where-else" />
<div id="some-where-else"></div>

在这方面，您还有其他一些选择。你可以在http://formvalidator.net/#configuration_position阅读它

【讨论】：

【解决方案2】：

使用可以参考他们的文档http://formvalidation.io/examples/showing-message-custom-area/ 自定义错误消息区域

或者你可以使用这个代码：

err: {
        container: '#messages'
    },

您可以在每个字段的 jQuery 验证插件代码中尝试此代码。

【讨论】：