Проверка jQuery errorLabelContainer

Пожалуйста, помогите мне с моей проверкой, я пытался настроить, где должно отображаться сообщение об ошибке, но я не могу, и я пытался искать в Интернете, но мне кажется, что я не понимаю "errorLabelContainer" или validate.js

У меня есть два входа, имя и адрес электронной почты. Я хочу контролировать, где сообщение отображается вместо тега ввода

<script>
jQuery(function($) {
$('#form').validate({
 errorClass: "errorOne",
 rules: {
  firstname: {
   required: true
  },
  email: {
   required: true
  }
 },
 messages: {
  firstname: {
   required: 'Please enter name',
   errorElement : 'div',
   errorLabelContainer: 'errorOne'
  },
  email: {
   required: 'Please enter a valid email address',
   errorElement : 'div',
   errorLabelContainer: '.errorTwo'
  }
 }
});
</script>
<style>
 .errorOne{
  background: lightgreen;
  min-height: 20px;
}
 .errorTwo{
  background: pink;
  min-height: 20px;
}
 </style>
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>jQuery validation plug-in - main demo</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>

</head>
<body>


<form id="form" method="post" action="">
 <div style="border:1px solid red; height: 500px">
  <div class="col-md-8">
   <label for="firstname">Enter Name:</label>
   <input class="form-control"  type="text" name="firstname" />
   <label for="email">Enter Email:</label>
   <input class="form-control" type="text" name="email" /><br>
   <input type="submit" class="button" value="Submit" />
  </div>
  <div class="col-md-4">
   <ul>
    <li>
     <p>The name error must be displayed in the div with class errorOne</p>
     <div class="errorOne"></div>
    </li>
    <li>
     <p>The email error must be displayed in the div with class errorTwo</p>
     <div class="errorTwo"></div>
    </li>
   </ul>
  </div>
 </div>

</form>
</body>
</html>

Источник

1 ответ

Решение

Ты можешь использовать errorClass возможность изменить класс ошибки, например:

$('#form').validate({
    errorClass: "errorOne", // Now class of '.errorOne' will be used for errors 
    rules: {
      firstname: {
        required: true
      },
      email: {
        required: true
      }
    },
    messages: {
        firstname: {
            errorElement : 'div',
        },
        email: {
            errorElement : 'div',
        }
    },

  });
});

Обратите внимание, что это errorOne без точки перед ним.

ОБНОВИТЬ

Если вы хотите добавить разные классы ошибок к каждому входу, это невозможно сделать без настройки jQuery Validator.

Более простой способ добиться этого - определить класс CSS только для этого ввода. errorElement(label по умолчанию).

Как это:

input[name='firstname']+label{ color: deeppink; }

input[name='email']+label{ color:pink; }

Посмотрите на эту демонстрацию

Источник
Другие вопросы по тегам