validate form using regula.validate() with custom error message

Question

I wanted to validate a form with custom error message something like below

<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

  }`

On submit Error getting displayed but what I want Is Error needs to be displayed below input filed with a customized div <div class="alert-error0"> Number Digit is required </div>

some how Loop not getting closed and each and every time the error count keep increasing can some please help me to fix the issues. also need to add class for the input field if the error getting displayed. once we enter some values error field and the error class needs to be removed

Answer 1

You keep appending a new element each time. You should only have to change the content of the div:

So instead of:

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

You need:

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

In the success path, you simply need to clear the contents of each of the error divs:

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