Проблема с отображением сообщения об ошибке в элементе span при проверке

Question

Не могли бы вы предложить, как показать сообщение об ошибке не после элемента с идентификатором #genderError, а вставить его внутрь?

errorPlacement: function(error, element) {
    if (element.attr("name") == "myoptions" ) error.insertAfter('#genderError'); 
    },    

Answer 1

document.getElementById('#genderError').innerHTML = error; 

Или если вы используете jQuery:

$('#genderError').html(error);

или

$('#genderError').text(error);`

, если вам просто нужно установить текст.

Answer 2

Вы можете управлять несколькими условиями внутри errorPlacement.

Как показано ниже -

errorPlacement: function(error, element) {
            if (element.attr("name") == "genderError") {
                $('#genderError').html(error); //or
                //$('#genderError').after(error);
            }
            else {
                if (element.hasClass("chosen-select")) {
                    error.insertAfter(element.next('div.chosen-container'));         
                }
                else {
                    error.insertAfter(element);  
                }
            }
        }

Answer 3

Могу ли я ввести проверку формы CSS в качестве обходного решения?

<form>
  <label for="male">male</label>
  <input type="radio" name="gender" value="male" id="male" required>
  <label for="female">female</label>
  <input type="radio" id="female" name="gender" value="male" required>
  <span class="errMsg"></span>
</form>

input:invalid ~ .errMsg::after {
  content: '\2717';
  color: red;
}

input:valid ~ .errMsg::after {
  content: '\2713';
  color: green;
}