使用带有自定义错误消息的 regula.validate() 验证表单

Question

我想验证一个带有自定义错误消息的表单，如下所示

<input type="text" name="numberdigit" class="numberClass" placeholder="Number Digit" data-constraints='@Required(message = "Number Digit is required.")' />
<input type="text" name="numberdigit" class="numberClass" placeholder="Number Digit" data-constraints='@Required(message = "Number Digit is required.")' />
<select class="something" name="action" data-constraints='@Required(message = "Please select text1 or text2.")'> <option>text / text2</option> <option value="0">text 1</option> <option value="1">text 2 </option> </select>

`$('form', $parent).submit(function () {
            var validationResults = regula.validate(),
                html = '',
                hasErrors = validationResults.length > 0,
                i;

            if (hasErrors === true) { // fail path


                // iterate over errors
                for(var i = 0; i < validationResults.length; i++) {
// append and show errors
$(".alert-error"+i).append(validationResults[i].message);

                     $(".alert-error"+i).show();
                }



            } else{
//success path

  }`

在提交时显示错误，但我想要的是错误需要显示在输入字段下方，并带有自定义 div <div class="alert-error0"> Number Digit is required </div>

循环没有关闭，每次错误计数不断增加时，请帮助我解决问题。如果显示错误，还需要为输入字段添加类。一旦我们输入一些值错误字段并且需要删除错误类

Answer 1

你每次都在添加一个新元素。您应该只需要更改div 的内容：

所以而不是：

$(".alert-error"+i).append(validationResults[i].message);

你需要：

$(".alert-error" + i).text(validationResults[i].message);

在成功路径中，你只需要清除每个错误divs的内容：

$(".alert_error").empty();